/* ===== 汉字战棋 · 孤侠 ===== 抽象国风视觉 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#ece0c4; --paper2:#dccba1; --paper3:#cbb884;
  --ink:#261d12; --ink2:#5a4a2f; --ink3:#8a7651;
  --gold:#b8901f; --goldL:#e8c452;
  --red:#a8341f; --redL:#d4523b; --redD:#6b1f12;
  --green:#3c7240; --greenL:#6aa56b;
  --brown:#6d4a2c; --gray:#564f42; --grayL:#8b8474;
  --orange:#b56a1e; --blue:#2c5d7a; --purple:#5a3a72; --cyan:#2f8a8a;
  --cols:10; --rows:10;  /* 由 JS 按关卡地图写入 */
  /* 格子边长：初值仅作首帧兜底，此后由 fitBoard() 按窗口实量写入，
     使棋盘在「格子少→放大、格子多→缩小」之间自适应，且整盘恒完整落在窗口内 */
  --cell:48px;
  /* 手牌牌面：宽度由 fitHand() 依栏宽与牌数写入，高度按比例联动，整条底栏随之定高 */
  --cardW:74px;
  --cardGap:8px;   /* 手牌间距：窄屏由 fitHand() 收紧到 5px，多挤几张 */
  --cardHMin:104px; /* 牌面高度下限：由 fitHand() 定宽后按比例算高，但不矮于此值 */
  --cardH:max(calc(var(--cardW) * 1.42),var(--cardHMin));
}
html,body{height:100%}
body{
  font-family:"KaiTi","STKaiti","FangSong","SimSun",serif;
  background:
    radial-gradient(circle at 18% 8%,#f5ecd2,transparent 42%),
    radial-gradient(circle at 82% 92%,#cdb98c,transparent 50%),
    linear-gradient(135deg,var(--paper),var(--paper2));
  color:var(--ink);height:100vh;user-select:none;overflow:auto;
}
#app{height:100vh;max-width:1600px;margin:0 auto;padding:8px;display:flex;flex-direction:column;gap:6px;
  overflow:hidden}   /* 棋盘与底栏皆按窗口精算，故整页不滚动 */
/* 极端矮窗兜底：由 fitBoard() 裁定，放开整页滚动而非裁切棋盘 */
#app.loose{height:auto;min-height:100vh;overflow:visible}
/* ---- 顶栏 ---- */
#topbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,250,235,.82),rgba(220,203,161,.6));
  border:2px solid var(--ink2);border-radius:8px;padding:6px 14px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.title{font-size:22px;font-weight:bold;letter-spacing:6px;color:var(--ink);text-shadow:1px 1px 0 rgba(255,255,255,.4)}
.title small{font-size:13px;color:var(--ink2);letter-spacing:2px;font-weight:normal}
#turnInfo{font-size:16px;font-weight:bold;color:var(--red);min-width:120px}
#levelInfo{font-size:15px;color:var(--ink2);white-space:nowrap}
#levelInfo b{font-size:18px;color:var(--gold)}
#levelInfo .lvname{color:var(--ink);font-weight:bold;letter-spacing:1px}
#levelInfo .lvsize{font-size:12px;color:var(--ink3);border:1px solid var(--ink3);border-radius:4px;padding:0 4px}
#turnInfo .who{color:var(--gold)}
#heroStats{display:flex;gap:16px;font-size:14px;align-items:center;margin-left:auto}   /* 靠右成组，抽/弃牌堆紧随其右 */
.stat{display:flex;align-items:center;gap:6px}
.stat b{font-size:18px;color:var(--redD)}
.bar{width:96px;height:12px;border:1.5px solid var(--ink2);border-radius:7px;overflow:hidden;background:#c9bb94}
.bar>span{display:block;height:100%;transition:width .3s}
.bar.hp>span{background:linear-gradient(90deg,#9c2b1a,#d4523b)}
.bar.qi>span{background:linear-gradient(90deg,#1f5c9c,#4aa3d8)}
.bar.en>span{background:linear-gradient(90deg,#7a5a1a,#c9a227)}
/* 抽牌堆 / 弃牌堆：自底栏上移，紧随顶栏「手牌」之后 */
#deckInfo{flex:0 0 auto;display:flex;gap:10px;align-items:center;font-size:12px;
  padding-left:12px;border-left:1px dashed var(--ink3)}
#deckInfo .pile{display:flex;align-items:center;gap:5px;white-space:nowrap}
#deckInfo .pl{color:var(--ink2);letter-spacing:1px}
/* 顶栏堆数：比底栏时期更秀气，方免压过血/气条 */
.miniPile{width:28px;height:34px;border:2px solid var(--ink2);border-radius:5px;display:flex;
  align-items:center;justify-content:center;font-size:16px;font-weight:bold;background:linear-gradient(135deg,#d8c79c,#c2ad7a)}
.miniPile.draw{color:var(--blue)} .miniPile.discard{color:var(--red)}
.miniPile.limit{color:var(--gold)}
/* ---- 顶栏图标按钮组：战报 + 图例 ---- */
#topBtns{flex:0 0 auto;display:flex;align-items:center;gap:8px}
#topBtns button{flex:0 0 auto;width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(180deg,#efe0bc,#cdb98a);color:var(--ink);transition:transform .1s,background .12s}
#topBtns button svg{width:23px;height:23px;display:block}
#topBtns button:hover{background:linear-gradient(180deg,#f7ecc8,#d8c496);transform:scale(1.08)}
#topBtns button:active{transform:scale(.94)}
#helpBtn.pulse{box-shadow:0 0 0 3px var(--goldL),0 0 14px var(--gold)}
/* 战报未读：右上角一点朱红，新消息不被埋没 */
#logBtn .dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:var(--redL);border:2px solid #261d12;opacity:0;transform:scale(.4);
  transition:opacity .18s,transform .18s}
#logBtn.unread .dot{opacity:1;transform:scale(1);animation:logDot 1.6s ease-in-out infinite}
@keyframes logDot{0%,100%{box-shadow:0 0 0 0 rgba(212,82,59,.7)}50%{box-shadow:0 0 0 5px rgba(212,82,59,0)}}
/* ---- 主区：两列栅格（棋盘列 1fr + 右栏 auto），省去原左图例栏，棋盘得以最大化 ---- */
#mainArea{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;
  grid-template-rows:minmax(0,1fr);   /* 行高恒为主区高度，绝不因内容（如战报）增长而撑开 */
  height:calc(var(--rows) * (var(--cell) + 2px) + 16px);min-height:0}
/* 棋盘列：居中且可收缩，宽度由栅格分配（minmax(0,1fr)），不因棋盘内容回撑，
   故 fitBoard() 量得的可用宽度稳定可信 */
#boardWrap{min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#grid{display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(10,var(--cell));
  gap:2px;background:#261d12;padding:5px;border:3px solid var(--ink);border-radius:6px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);position:relative}
.cell{background:linear-gradient(135deg,#efe3c6,#e1d2a8);border-radius:3px;display:flex;
  align-items:center;justify-content:center;font-size:calc(var(--cell) * 0.56);cursor:pointer;position:relative;
  transition:transform .07s,background .12s;line-height:1}
.cell:hover{transform:scale(1.05);z-index:2}
.cell .glyph{font-weight:bold;text-shadow:1px 1px 0 rgba(255,255,255,.35)}
/* 孤侠之字：更粗、更重，并作草书般的飘逸扰动——笔锋轻摇，人群中一眼可辨。
   三层动画叠加：整体微旋轻摆 + 墨色呼吸 + 笔锋虚影，合起来像字在纸上微微游走。 */
.cell.u-hero .glyph,.cell.u-hero.hero-glyph .glyph,
.hero-glyph{font-weight:900!important;position:relative;
  text-shadow:1px 1px 0 rgba(255,255,255,.45),0 0 6px rgba(168,52,31,.35),0 1px 2px rgba(0,0,0,.28);
  animation:heroDrift 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:transform}
/* 笔锋虚影：随本体一同摇曳，令扰动更像墨迹未干 */
.hero-glyph::after{content:"";position:absolute;inset:-8%;
  background:radial-gradient(ellipse at 50% 50%,rgba(168,52,31,.16),transparent 70%);
  border-radius:50%;pointer-events:none;
  animation:heroAura 3.6s ease-in-out infinite}
@keyframes heroDrift{
  0%  {transform:translate(0,0)      rotate(-1.6deg) scale(1)    skewX(0deg)}
  18% {transform:translate(.6px,-.9px) rotate(1.1deg)  scale(1.03) skewX(-1.4deg)}
  36% {transform:translate(-.7px,.4px) rotate(-1.3deg) scale(.99)  skewX(1.2deg)}
  54% {transform:translate(.5px,.8px)  rotate(1.5deg)  scale(1.02) skewX(-.9deg)}
  72% {transform:translate(-.4px,-.6px)rotate(-.8deg)  scale(1)    skewX(1.5deg)}
  100%{transform:translate(0,0)      rotate(-1.6deg) scale(1)    skewX(0deg)}}
@keyframes heroAura{
  0%,100%{opacity:.35;transform:scale(.94) translate(0,0)}
  50%    {opacity:.75;transform:scale(1.1) translate(1px,-1px)}}
/* 位移浮层里的侠字同款飘逸（sprite 复用 .cell 结构，故一并生效） */
.unit-sprite .hero-glyph{animation-duration:2.4s}
.cell .hpNum{position:absolute;bottom:-1px;right:1px;font-size:calc(var(--cell) * 0.24);color:#fff;
  background:rgba(40,20,10,.78);border-radius:8px;padding:0 4px;line-height:14px}
.cell .badge{position:absolute;top:-6px;left:-6px;font-size:calc(var(--cell) * 0.28);font-weight:bold;
  background:rgba(40,20,10,.85);color:var(--goldL);border-radius:9px;padding:0 5px;line-height:16px;border:1px solid var(--gold)}
.cell .intent{position:absolute;top:-7px;right:-7px;font-size:calc(var(--cell) * 0.3);font-weight:bold;
  width:calc(var(--cell) * 0.42);height:calc(var(--cell) * 0.42);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #261d12;color:#fff}
/* ---- 地形配色：每类地形专属底色 + 汉字色（.sw 供左侧图例色块复用） ---- */
/* 地形背景须写在 .cell.move/.atk 之前，方能被移动/攻击高亮正确覆盖 */
.cell.t-grass,.sw.t-grass{background:linear-gradient(135deg,#e0f0d2,#b7d39f)}   /* 草：浅绿底 */
.cell.t-tree, .sw.t-tree {background:linear-gradient(135deg,#d2e6c3,#a2c48d)}   /* 木：浅绿底 */
.cell.t-thorn,.sw.t-thorn{background:linear-gradient(135deg,#d9b45d,#a46a1a)}   /* 刺：土黄底 */
.cell.t-stone,.sw.t-stone{background:linear-gradient(135deg,#e0e4e5,#adb4b7)}   /* 石：青灰底 */
.cell.t-pot,  .sw.t-pot  {background:linear-gradient(135deg,#f4dcaa,#d9a13c)}   /* 罐：土黄底 */
.cell.t-abyss,.sw.t-abyss{background:linear-gradient(135deg,#2b2b33,#08080b)}   /* 渊：黑底 */
.cell.t-abyss{border:2px solid #4b525b!important}   /* 黑底近棋盘色，描边以示深渊之界 */
.cell.t-grass .glyph,.sw.t-grass{color:#2f6b32}   /* 深绿 */
.cell.t-tree  .glyph,.sw.t-tree {color:#8a6a1e}   /* 土黄 */
.cell.t-thorn .glyph,.sw.t-thorn{color:#8c1f10}   /* 深红 */
.cell.t-stone .glyph,.sw.t-stone{color:#17181a}   /* 黑 */
.cell.t-pot   .glyph,.sw.t-pot  {color:#5a3410}   /* 深棕 */
.cell.t-abyss .glyph,.sw.t-abyss{color:#a7aeb5}   /* 灰 */
/* 孤侠踏入「渊」的可移动格：仍高亮，但加红圈警示 */
.cell.move-risk{box-shadow:inset 0 0 0 3px var(--redL),inset 0 0 12px rgba(212,82,59,.55)}
.cell.move{background:linear-gradient(135deg,#b6d6e6,#7fb0cf)}
.cell.move:hover{background:linear-gradient(135deg,#9fcbe2,#5fa0c8)}
.cell.atk{background:linear-gradient(135deg,#e8b3ad,#cf6e63)}
.cell.atk:hover{background:linear-gradient(135deg,#e0938a,#bd5043)}
/* 「扫」的方向指示格：金橙虚线框，与单体攻击的实心红区分 */
.cell.atk-sweep{background:linear-gradient(135deg,#fbe3b6,#e8b45e);
  box-shadow:inset 0 0 0 2px rgba(184,144,31,.85)}
.cell.atk-sweep:hover{background:linear-gradient(135deg,#f6d293,#dda03c);
  box-shadow:inset 0 0 0 3px rgba(184,144,31,1)}
/* 鼠标所指方向 → 即将横扫的三格预览：赤红实框 + 外发光，落点一眼看清 */
.cell/* 选牌即铺出的范围提示：该招四向所及的全部格子（淡金虚线），未动指针也能看清 */
.aim-soft{box-shadow:inset 0 0 0 2px rgba(201,162,74,.55)!important;
  background-image:linear-gradient(rgba(255,215,100,.13),rgba(255,215,100,.13))!important}
/* 图例色块：方向类招式 */
.sw.c-thrust{border:1.5px solid #1f6fa8;color:#134a72;background:linear-gradient(160deg,#d5efff,#63b0ea)}
.sweep-aim{background:linear-gradient(135deg,#ffd9cf,#e5705c)!important;
  box-shadow:inset 0 0 0 3px #c2351a,0 0 14px rgba(194,53,26,.65)!important;
  z-index:4;animation:sweepPulse 1.1s ease-in-out infinite}
@keyframes sweepPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
/* 孤侠头顶的方向标：扫→右 */
.cell .sweep-dir{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:calc(var(--cell) * 0.26);font-weight:bold;line-height:15px;white-space:nowrap;
  background:#c2351a;color:#fff;border:1.5px solid #261d12;border-radius:9px;padding:0 5px;z-index:8}
/* 可击碎的「罐」：橙金高亮，区别于敌人红 */
.cell.atk-pot{background:linear-gradient(135deg,#f2d9a2,#d9a13c);box-shadow:0 0 0 2px var(--orange)}
.cell.atk-pot:hover{background:linear-gradient(135deg,#eec97f,#c98b28);box-shadow:0 0 0 3px var(--orange)}
/* 侠立于「木」上：伏击底纹 */
.cell.on-tree{background:linear-gradient(135deg,#cfe0c0,#a8c695)}
.cell.target{background:linear-gradient(135deg,#f0d68a,#e0b346)}
.cell.sel{box-shadow:0 0 0 3px var(--goldL),0 0 14px var(--gold);z-index:3}
/* 单位边框类型：区分种类 */
.u-hero{border:3px solid var(--gold)!important}
.u-bandit{border:2px solid var(--redL)!important}
.u-soldier{border:2px solid var(--red)!important}             /* 兵 · 单实线 */
/* 盾 · 双实线：外框实线加粗(4px)，内圈另以 outline 补一道细实线，
   不与状态光晕的 box-shadow 打架，故用 outline 而非再叠一层 shadow */
.u-shield{border:4px solid var(--redD)!important;
  outline:2px solid var(--redD)!important;outline-offset:-8px}
.u-archer{border:2px dotted var(--purple)!important}
/* 蛮 · 粗野立体框：ridge 紫框，与弓手的虚线紫框一眼可分 */
.u-brute{border:3px ridge #6b3f8a!important}
/* 巫 · 咒气缠身：深灰双线框，内里阴气隐隐 */
.u-witch{border:2px double #4a4a54!important;outline:1px dashed rgba(70,70,84,.6)!important;
  outline-offset:-6px}
/* ---- 单位汉字色：友方(侠)与各类敌方各异（.sw 供图例色块复用） ----
   须晚于地形配色定义，使单位立于地形之上时仍显示单位本色 */
.cell.u-hero   .glyph,.sw.u-hero   {color:#a8341f}  /* 侠 · 红 */
.cell.u-bandit .glyph,.sw.u-bandit {color:#7a2a12}  /* 匪 · 深红棕 */
.cell.u-soldier .glyph,.sw.u-soldier{color:#24506e} /* 兵 · 靛蓝 */
.cell.u-shield .glyph,.sw.u-shield {color:#574c3a}  /* 盾 · 深灰褐 */
.cell.u-archer .glyph,.sw.u-archer {color:#6b7a1e}  /* 弓 · 深黄绿 */
.cell.u-brute  .glyph,.sw.u-brute  {color:#4a2a62}  /* 蛮 · 深紫 */
.cell.u-witch  .glyph,.sw.u-witch  {color:#33333d}  /* 巫 · 近墨 */
/* 飞行的箭 */
.arrow{position:absolute;left:0;top:0;width:calc(var(--cell)*0.5);height:calc(var(--cell)*0.12);
  pointer-events:none;z-index:14;transform-origin:center center;   /* 高于单位浮层(9)，飞行中不致被遮 */
  background:linear-gradient(90deg,#3a2410,#8a5a26 70%,#b07a2c);border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.arrow::after{content:"";position:absolute;right:0;top:50%;transform:translate(55%,-50%);
  width:0;height:0;border-left:calc(var(--cell)*0.2) solid #6b4a22;
  border-top:calc(var(--cell)*0.1) solid transparent;border-bottom:calc(var(--cell)*0.1) solid transparent}
.arrow::before{content:"";position:absolute;left:-1px;top:50%;transform:translate(0,-50%);
  width:calc(var(--cell)*0.08);height:calc(var(--cell)*0.16);background:#c9a227;border-radius:2px;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* 巫所掷黑球：墨黑球体，中嵌白「咒」字，边渗深灰咒气 */
.orb{position:absolute;left:0;top:0;width:calc(var(--cell)*0.44);height:calc(var(--cell)*0.44);
  margin:calc(var(--cell)*-0.22) 0 0 calc(var(--cell)*-0.22);
  pointer-events:none;z-index:14;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#4c4c58 0%,#22222a 42%,#0b0b0f 100%);
  box-shadow:0 0 10px rgba(30,30,40,.85),inset 0 0 8px rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;
  animation:orbSpin 1.1s linear infinite}
.orb-ch{font-size:calc(var(--cell)*0.24);line-height:1;color:#fff;font-weight:bold;
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(200,200,220,.7)}
.orb::after{content:"";position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(90,90,104,.5) 0%,rgba(60,60,72,.18) 45%,transparent 70%);
  animation:orbPuff 1.3s ease-in-out infinite}
@keyframes orbSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes orbPuff{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.18)}}
/* 单位位移浮层：移动时覆盖在格子上，逐格 transition 飞行 */
.unit-sprite{position:absolute;z-index:9;pointer-events:none;display:flex;align-items:center;justify-content:center;
  border-radius:3px;font-size:calc(var(--cell) * 0.56);line-height:1;will-change:left,top;
  transform-origin:center center}
/* 特效层：容纳所有动画浮层，恒为 #grid 最后一个子节点；重绘后由 JS 重新挂回，
   故动画中的单位不会被 renderGrid 的 innerHTML 清空打断 */
#fxLayer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:12}
/* ---- 打击感 · 攻击动作 ---- */
/* 近战冲刺 / 远程张弓的浮层：抬高层级，扑击途中不被别的单位盖住 */
.unit-sprite.strike-sprite,.unit-sprite.shoot-sprite{z-index:11;will-change:transform}
.unit-sprite.strike-sprite{box-shadow:0 6px 18px rgba(0,0,0,.38)}
/* 命中冲击：一团白光炸开 + 一圈冲击环 + 一道横向星芒（纯装饰） */
.hit-burst{position:absolute;pointer-events:none;z-index:16;border-radius:8px;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,238,196,.75) 36%,rgba(255,182,96,.28) 62%,transparent 74%);
  animation:hitBurst 400ms cubic-bezier(.2,.7,.3,1) forwards}
.hit-burst::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;border-radius:50%;border:3px solid rgba(255,248,225,.95);
  box-shadow:0 0 16px rgba(255,220,150,.9);animation:hitRing 400ms cubic-bezier(.2,.7,.3,1) forwards}
.hit-burst::after{content:"";position:absolute;left:50%;top:50%;width:200%;height:20%;
  margin:-10% 0 0 -100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  animation:hitStar 300ms ease-out forwards}
@keyframes hitBurst{0%{transform:scale(.35);opacity:0}15%{transform:scale(1.05);opacity:1}100%{transform:scale(1.75);opacity:0}}
@keyframes hitRing{0%{transform:scale(.3);opacity:0}20%{opacity:1}100%{transform:scale(2.1);opacity:0}}
@keyframes hitStar{0%{transform:scale(.2);opacity:0}30%{opacity:1}100%{transform:scale(1.35);opacity:0}}
/* 受击格白闪：与 shake 的抖动一并播（逗号并列两条动画，免得互相覆盖） */
.cell.hit-flash{animation:hitFlash .34s ease-out,shake .35s}
@keyframes hitFlash{0%{filter:brightness(2.6) saturate(.35)}100%{filter:none}}
/* 刀光：横扫时随挥砍扫过的一道弧，基准角由 JS 依所扫方向写入 --a0 */
.slash-arc{position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;
  border-radius:50%;border:3px solid transparent;border-top-color:rgba(255,255,255,.95);
  border-right-color:rgba(255,246,214,.8);border-left-color:rgba(255,214,140,.4);
  box-shadow:0 0 14px rgba(255,238,190,.9);pointer-events:none;
  animation:slashArc 460ms cubic-bezier(.2,.75,.3,1) forwards}
@keyframes slashArc{
  0%  {transform:rotate(calc(var(--a0,0deg) - 78deg)) scale(.5);opacity:0}
  22% {opacity:1}
  70% {opacity:.9}
  100%{transform:rotate(calc(var(--a0,0deg) + 96deg)) scale(1.35);opacity:0}}
/* ---- 孤侠显圣：心法紫光 / 疗愈绿光（同一套骨架，换色即换意） ---- */
.glow-cast{position:absolute;z-index:17;pointer-events:none;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * 0.56)}
/* 紫 · 心法：幽玄内敛，光芒上腾 */
.g-mental{--g0:#f4ecff;--g1:#d9bcff;--g2:#a273ff;--g3:rgba(150,90,255,.95);--g4:rgba(120,60,240,.6)}
/* 绿 · 疗愈：生机盎然，光点垂落 */
.g-heal  {--g0:#f2fff4;--g1:#a8f0b8;--g2:#43b463;--g3:rgba(60,200,95,.95);--g4:rgba(40,170,80,.6)}
/* 金 · 神：黑幕合拢，金辉冲天 */
.g-divine{--g0:#fff6d8;--g1:#ffd964;--g2:#e0a01c;--g3:rgba(255,200,60,.95);--g4:rgba(200,140,20,.7)}
/* 灰 · 咒：白惨惨的底，深灰气缭绕 */
.g-curse {--g0:#ffffff;--g1:#c8c8cc;--g2:#5a5a62;--g3:rgba(70,70,80,.9);--g4:rgba(40,40,48,.75)}
/* 神：脚下黑幕自四周合拢 */
.g-veil{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,transparent 72%);
  animation:gVeil 1.1s ease-out forwards}
@keyframes gVeil{0%{transform:scale(.3);opacity:0}22%{opacity:1}100%{transform:scale(1.5);opacity:0}}
/* 神：两道金柱自脚下升起 */
.g-beam{position:absolute;left:50%;bottom:0;width:26%;height:120%;margin-left:-13%;
  background:linear-gradient(0deg,rgba(255,215,100,.95),rgba(255,215,100,0));
  filter:blur(2px);animation:gBeam 1s ease-out forwards}
@keyframes gBeam{0%{transform:scaleY(.2);opacity:0}20%{opacity:.95}100%{transform:scaleY(1.5);opacity:0}}
/* 咒：深灰气自牌上腾起，绕身盘旋 */
.g-smoke{position:absolute;bottom:-6%;left:50%;display:block;width:.42em;height:.42em;margin-left:-.21em;
  border-radius:50%;background:radial-gradient(circle,rgba(90,90,98,.85),rgba(60,60,68,0) 70%);
  filter:blur(1px);animation:gSmoke 1.3s ease-out forwards}
@keyframes gSmoke{
  0%  {transform:translate(var(--x,0),0) scale(.4);opacity:0}
  22% {opacity:.9}
  100%{transform:translate(calc(var(--x,0) * 1.9),calc(var(--cell) * var(--d,.8) * -1)) scale(2.1);opacity:0}}
.glow-cast .glyph{font-weight:bold;line-height:1;color:var(--g0);
  text-shadow:0 0 8px var(--g1),0 0 20px var(--g2),0 0 40px var(--g3),0 0 70px var(--g4);
  animation:gGlyph 1.05s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes gGlyph{
  0%  {transform:scale(1);   opacity:0}
  12% {transform:scale(1.46);opacity:1}
  30% {transform:scale(1.12)}
  46% {transform:scale(1.3)}
  75% {transform:scale(1.06);opacity:1}
  100%{transform:scale(1);   opacity:0}}
/* 三重光环依次扩散 */
.g-ring{position:absolute;left:50%;top:50%;width:100%;height:100%;margin:-50% 0 0 -50%;border-radius:50%;
  border:3px solid var(--g1);
  box-shadow:0 0 18px var(--g3),inset 0 0 18px var(--g3);
  animation:gRing 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes gRing{0%{transform:scale(.35);opacity:0}18%{opacity:1}100%{transform:scale(2.15);opacity:0}}
/* 十点光芒放射（角度与射程由 JS 写入 --a / --d） */
.g-spark{position:absolute;left:50%;top:50%;display:block;width:.16em;height:.16em;margin:-.08em 0 0 -.08em;
  border-radius:50%;background:radial-gradient(circle,var(--g0) 10%,var(--g1) 55%,transparent 75%);
  animation:gSpark 1s ease-out forwards}
@keyframes gSpark{
  0%  {transform:rotate(var(--a,0deg)) translateY(0) scale(.4);opacity:0}
  18% {opacity:1}
  100%{transform:rotate(var(--a,0deg)) translateY(calc(var(--cell) * var(--d,.8) * -1)) scale(.15);opacity:0}}
/* 绿光专属：八点光雨自上方洒落，绕身一周徐徐下沉（--x 为横向偏移） */
.g-drop{position:absolute;top:-10%;left:50%;display:block;width:.14em;height:.34em;margin-left:-.07em;
  border-radius:999px;background:linear-gradient(180deg,var(--g0),var(--g2));
  box-shadow:0 0 8px var(--g3);animation:gDrop .9s ease-in forwards}
@keyframes gDrop{
  0%  {transform:translate(var(--x,0),0) scaleY(.6);opacity:0}
  20% {opacity:1}
  100%{transform:translate(var(--x,0),calc(var(--cell) * 1.05)) scaleY(1.3);opacity:0}}
/* ---- 位移过程：残影 / 落定尘环 / 受阻一顿 ---- */
/* 残影：位移途中身后渐隐的同形虚影，串起来即飞行轨迹 */
.dash-ghost{position:absolute;z-index:10;pointer-events:none;border-radius:3px;opacity:.55;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * 0.56);
  filter:blur(.6px);animation:dashGhost 320ms ease-out forwards}
.dash-ghost .glyph{font-weight:bold;line-height:1;opacity:.9}
@keyframes dashGhost{
  0%  {opacity:.62;transform:scale(1.02)}
  100%{opacity:0;  transform:scale(.72)}}
/* 落定尘环：停住时脚下荡开一圈尘土 */
.land-dust{position:absolute;z-index:11;pointer-events:none;border-radius:50%;
  border:2px solid rgba(196,170,120,.75);
  box-shadow:0 0 14px rgba(196,170,120,.5),inset 0 0 12px rgba(196,170,120,.35);
  animation:landDust 440ms cubic-bezier(.2,.7,.3,1) forwards}
.land-dust::after{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;
  margin:-75% 0 0 -75%;border-radius:50%;
  background:radial-gradient(circle,rgba(214,192,146,.5) 0%,transparent 68%);
  animation:landDust 440ms cubic-bezier(.2,.7,.3,1) forwards}
@keyframes landDust{0%{transform:scale(.42);opacity:0}20%{opacity:.95}100%{transform:scale(1.85);opacity:0}}
/* 冲刺者：扑出时拖一道向后的速度线，比普通击退更疾 */
.unit-sprite.lunge-sprite{box-shadow:0 8px 22px rgba(0,0,0,.42),0 0 0 2px rgba(184,144,31,.6)}
.unit-sprite.lunge-sprite::after{content:"";position:absolute;right:78%;top:50%;width:70%;height:12%;
  transform:translateY(-50%);border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.55));
  animation:lungeLine 380ms ease-out forwards}
@keyframes lungeLine{0%{opacity:0;width:20%}30%{opacity:.9}100%{opacity:0;width:85%}}
/* 被击退/拉近/冲刺的单位：红晕描边 + 投影，飞行中另由 JS 逐格施加缩放顿挫 */
.unit-sprite.shift-sprite{box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 0 2px rgba(168,52,31,.5)}
/* 坠渊死亡动画：一边旋转一边缩小，似被深渊吞没；时长由 JS 写入 ANIM.abyssFall */
.unit-sprite.abyss-fall{z-index:13;animation-name:abyssFall;animation-timing-function:cubic-bezier(.5,.05,.7,.3);
  animation-fill-mode:forwards}
@keyframes abyssFall{
  0%  {transform:translateY(0)    rotate(0deg)   scale(1);  opacity:1;  filter:brightness(1)}
  20% {transform:translateY(6%)   rotate(80deg)  scale(.94);opacity:1;  filter:brightness(.95)}
  55% {transform:translateY(26%)  rotate(300deg) scale(.5); opacity:.95;filter:brightness(.7) blur(.5px)}
  85% {transform:translateY(52%)  rotate(560deg) scale(.16);opacity:.6; filter:brightness(.35) blur(1.5px)}
  100%{transform:translateY(72%)  rotate(720deg) scale(.03);opacity:0;  filter:brightness(.1)  blur(3px)}
}
/* 深渊吞人：格口墨气翻涌 */
.cell.abyss-swallow{animation:abyssSwallow 900ms ease-out}
@keyframes abyssSwallow{
  0%  {box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}
  35% {box-shadow:inset 0 0 30px 10px rgba(4,4,8,.95),0 0 26px 8px rgba(92,106,126,.75)}
  100%{box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}
}
.t-grass{border:1px dashed var(--green)!important}
.t-tree{border:3px double var(--brown)!important}
/* 刺 · 锯齿边框：以 SVG 描边铺满四边，形如荆棘尖刺（不支持时退化为实线） */
/* .cell.t-thorn{border:6px solid var(--gray)!important;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 0 L4 6 L8 0 L12 6 L16 0 L20 6 L24 0 L18 4 L24 8 L18 12 L24 16 L18 20 L24 24 L20 18 L16 24 L12 18 L8 24 L4 18 L0 24 L6 20 L0 16 L6 12 L0 8 L6 4 L0 0 Z' fill='none' stroke='%23564f42' stroke-width='2.2'/%3E%3C/svg%3E")
  8 / 6px / 0 repeat!important}
.sw.t-thorn{border:3px solid var(--gray)!important;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 0 L4 6 L8 0 L12 6 L16 0 L20 6 L24 0 L18 4 L24 8 L18 12 L24 16 L18 20 L24 24 L20 18 L16 24 L12 18 L8 24 L4 18 L0 24 L6 20 L0 16 L6 12 L0 8 L6 4 L0 0 Z' fill='none' stroke='%23564f42' stroke-width='3.5'/%3E%3C/svg%3E")
  8 / 3px / 0 repeat!important} */
  /* 刺 · 目前还是使用虚线边框*/
.t-thorn{border:2px dashed var(--redD)!important}
.t-stone{border:2px solid var(--gray)!important}
.t-pot{border:2px solid var(--orange)!important}
/* 炉：赤铜色描边 + 内里火光，一眼与「罐」区分；击碎后可熔去牌池中一张牌 */
.t-furnace{border:2px solid #b4531b!important;
  background:radial-gradient(circle at 50% 62%,rgba(255,150,60,.55) 0%,rgba(190,80,25,.28) 45%,transparent 72%)!important;
  box-shadow:inset 0 0 12px rgba(255,140,50,.55)}
.t-furnace .glyph{color:#7a2d08;text-shadow:0 0 8px rgba(255,170,80,.9)}
/* 碑：深灰石身，金字幽幽生光 */
.t-stele{border:2px solid #55555f!important;
  background:linear-gradient(160deg,#6e6e78,#3a3a44 55%,#232329)!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.t-stele .glyph{color:#ffd964;text-shadow:0 0 6px rgba(255,215,100,.95),0 0 16px rgba(230,180,50,.75);
  animation:steleGlow 2.6s ease-in-out infinite}
@keyframes steleGlow{
  0%,100%{text-shadow:0 0 5px rgba(255,215,100,.8),0 0 14px rgba(230,180,50,.55)}
  50%    {text-shadow:0 0 11px rgba(255,235,150,1),0 0 26px rgba(240,190,60,.9)}}
/* 龛：青灰石身，金线盘绕，内里幽光吞吐 */
.t-shrine{border:2px solid #7d8a80!important;
  background:linear-gradient(160deg,#8e9a90,#4e5a52 55%,#2c332e)!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.66)}
.t-shrine .glyph{color:#ffd964;text-shadow:0 0 6px rgba(255,215,100,.9),0 0 18px rgba(230,180,50,.6);
  animation:shrineGlow 3s ease-in-out infinite}
@keyframes shrineGlow{
  0%,100%{text-shadow:0 0 5px rgba(255,215,100,.75),0 0 14px rgba(230,180,50,.45)}
  50%    {text-shadow:0 0 12px rgba(255,235,150,1),0 0 28px rgba(240,190,60,.85)}}
.t-broken{border:1px dotted var(--grayL)!important;opacity:.5}
/* 状态晕染 */
.s-fu{box-shadow:inset 0 0 0 2px var(--greenL),inset 0 0 12px rgba(60,140,80,.5)!important}
/* 劫：负咒待偿，暗红晕染，受击即散 */
.s-jie{box-shadow:inset 0 0 0 2px #8d2110,inset 0 0 12px rgba(141,33,16,.45)!important}
/* 化：凝化解之印，待转伤为愈（青蓝晕染） */
.s-hua{box-shadow:inset 0 0 0 2px #1f6fa8,inset 0 0 12px rgba(31,111,168,.45)!important}
.s-ni{box-shadow:inset 0 0 0 2px #555,inset 0 0 14px rgba(40,40,40,.55)!important;filter:brightness(.9)}
.s-xu{box-shadow:0 0 0 2px var(--goldL),0 0 10px rgba(232,196,82,.7)!important}
.s-fang{box-shadow:0 0 0 2px var(--blue),0 0 10px rgba(44,93,122,.7)!important}
.s-nu{box-shadow:0 0 0 2px var(--redL),0 0 12px rgba(212,82,59,.7)!important}
.s-jing{box-shadow:0 0 0 2px #6fa8c8,0 0 10px rgba(111,168,200,.6)!important}
.s-chan{box-shadow:0 0 0 2px var(--purple),0 0 10px rgba(90,58,114,.6)!important}
.s-yu{box-shadow:0 0 0 3px var(--cyan),0 0 14px rgba(47,138,138,.65)!important}
/* ---- 侧栏（仅右侧一栏：图例与战报皆已迁入顶栏弹窗） ---- */
#sidePanel{width:300px;max-width:38vw;justify-self:start;align-self:start;min-width:0;display:flex;
  flex-direction:column;gap:6px;min-height:0;overflow:hidden}
/* 只剩「选中单位 / 敌方意图」两块：按内容自然高度，内容过多则面板内部滚动，
   绝不再撑开主区（主区高度恒由棋盘算出） */
#sidePanel>.panel{flex:0 1 auto;max-height:calc(50% - 3px);overflow-y:auto}
#sidePanel>#selectedInfo{max-height:none}
.panel{background:linear-gradient(180deg,rgba(255,250,235,.8),rgba(220,203,161,.55));
  border:2px solid var(--ink2);border-radius:8px;padding:8px 10px;font-size:14px}
.panel h3{font-size:15px;color:var(--red);margin-bottom:6px;letter-spacing:2px;border-bottom:1px dashed var(--ink3);padding-bottom:3px}
/* 角色属性：恒为左右两栏并排，行数减半 —— 面板高度腰斩，棋盘上方更透气。
   固定两列（而非 auto-fit）：不论宽屏窄屏都并排两栏，不会因面板变宽而摊成一行长条；
   minmax(0,1fr) 令列可收缩，极窄时键名省略号收尾，绝不撑破面板。 */
#selectedInfo .stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px 10px;align-items:start}
#selectedInfo .row{display:flex;justify-content:space-between;gap:5px;margin:2px 0;
  font-size:13px;min-width:0;border-bottom:1px dotted rgba(90,74,47,.25)}
#selectedInfo .row b{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#selectedInfo .row>span{color:var(--ink2);white-space:nowrap;flex:0 0 auto}
/* 攻击力增减：正为绿、负为红，随 buff 实时变色 */
.delta{font-style:normal;font-weight:bold;margin-left:3px;font-size:.92em}
/* 侠的「攻」：数值本身即加成结果，故以绿/红整枚着色，不再缀「±N」 */
#selectedInfo .row b>.delta{margin-left:0;font-size:1.05em}
.delta.up{color:#1e8a3c;text-shadow:0 0 6px rgba(30,180,70,.35)}
.delta.down{color:#c2351a;text-shadow:0 0 6px rgba(200,50,25,.35)}
/* 较长的条目（如「特性·踏刺无伤 · 踢退孤侠」）独占整行，免得挤在一栏里折断 */
#selectedInfo .row.wide{grid-column:1 / -1}
/* 窄屏：面板独占整行、比宽屏时更宽，两栏自不在话下；
   只把字号与列距略收，一条「键·值」仍能完整落在一栏内 */
@media(max-width:900px){
  #selectedInfo .stat-grid{gap:1px 8px}
  #selectedInfo .row{font-size:12.5px}
}
#enemyIntents .ei{display:flex;justify-content:space-between;align-items:center;margin:3px 0;
  padding:2px 6px;border-radius:4px;background:rgba(168,52,31,.08)}
#enemyIntents .ei .ic{font-weight:bold;font-size:16px}
/* 战报正文：已在弹窗内，故自成一格滚动区（不再受侧栏高度牵制） */
#logBox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink3) rgba(90,74,47,.12);
  font-size:13.5px;line-height:1.6;padding:8px 12px;
  background:rgba(255,250,235,.45);border-radius:6px}
#logBox::-webkit-scrollbar{width:8px}
#logBox::-webkit-scrollbar-track{background:rgba(90,74,47,.12);border-radius:4px}
#logBox::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
#logBox::-webkit-scrollbar-thumb:hover{background:var(--ink2)}
#logBox div{padding:1px 0;border-bottom:1px dotted rgba(90,74,47,.25);word-break:break-word}
#logBox .combo{color:var(--gold);font-weight:bold}
#logBox .dmg{color:var(--red);font-weight:bold}
#logBox .heal{color:var(--green);font-weight:bold}
#logBox .sys{color:var(--ink2);font-style:italic}
/* ---- 弃牌阶段 ---- */
.hidden{display:none!important}
#turnInfo .who.dis{color:var(--red)}
#moveChip.discard{background:linear-gradient(180deg,#e8c9a0,#c99a55);border-style:solid;border-color:var(--red)}
#discardTip{flex:0 1 auto;max-width:250px;max-height:100%;overflow-y:auto;font-size:13px;line-height:1.6;color:var(--ink);
  background:linear-gradient(180deg,#f6ecd0,#e5d3a5);border:2px solid var(--red);border-radius:8px;padding:6px 10px;text-align:center}
#discardTip b{color:var(--red);font-size:15px}
#hand.picking-phase{padding:4px;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(168,52,31,.35)}
.card.picking{cursor:pointer}
.card.picking:hover{transform:translateY(-8px) scale(1.04)}
.card.pick{box-shadow:0 0 0 3px var(--red),0 6px 16px rgba(0,0,0,.32);transform:translateY(-8px)}
.card .c-tick{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--red);color:#fff;font-size:14px;font-weight:bold;display:flex;align-items:center;
  justify-content:center;border:2px solid #261d12}
#confirmDiscardBtn{background:linear-gradient(180deg,#d4523b,#a8341f);color:#fff;border-color:var(--ink)}
#confirmDiscardBtn:hover{background:linear-gradient(180deg,#e0654e,#bb3c25)}
#confirmDiscardBtn:disabled{opacity:.45;cursor:not-allowed}
/* ---- 底栏：高度恒定（随牌面尺寸联动），绝不因手牌张数起伏而抖动 ---- */
#bottomBar{flex:0 0 auto;height:calc(var(--cardH) + 44px);min-height:0;
  display:flex;flex-direction:row;gap:12px;align-items:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(220,203,161,.6),rgba(255,250,235,.8));
  border:2px solid var(--ink2);border-radius:8px;padding:6px 12px}
/* 手牌列：宽度吃满显示设备余量，牌面尺寸由 fitHand() 依「栏宽 ÷ 牌数」写入，
   尽量一行尽显；实在排不下才横向滚动（滚动条细窄，不夺版面） */
#hand{flex:1 1 auto;min-width:0;display:flex;gap:var(--cardGap,8px);align-items:flex-start;justify-content:flex-start;
  overflow-x:auto;overflow-y:hidden;height:calc(var(--cardH) + 20px);
  padding:12px 4px 8px;scrollbar-width:thin;scrollbar-color:var(--ink3) rgba(90,74,47,.12)}
#hand::-webkit-scrollbar{height:7px}
#hand::-webkit-scrollbar-track{background:rgba(90,74,47,.12);border-radius:4px}
#hand::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
#hand::-webkit-scrollbar-thumb:hover{background:var(--ink2)}
/* 牌少时居中、牌多（需滚动）时靠左：justify-content 由 JS 视是否溢出切换，见 renderHand */
#hand.wrap-center{justify-content:center}
.card{flex:0 0 auto;width:var(--cardW);height:var(--cardH);border:2px solid var(--ink);border-radius:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4px 3px;
  position:relative;transition:transform .1s,box-shadow .1s;background:linear-gradient(160deg,#fdf3dc,#e6cf9c)}
.card:hover{transform:translateY(-6px) scale(1.03);z-index:5}
.card.sel{box-shadow:0 0 0 3px var(--goldL),0 6px 16px rgba(0,0,0,.3);transform:translateY(-6px)}
/* 三系卡面：提高饱和度，attack 赤橙 / skill 靛蓝 / mental 紫，边框与汉字同系更深 */
.card.c-attack{border-color:#c2351a;background:linear-gradient(160deg,#ffe3c2,#f7905f)}
.card.c-skill{border-color:#1f6fa8;background:linear-gradient(160deg,#d5efff,#63b0ea)}
.card.c-mental{border-color:#7a3f9e;background:linear-gradient(160deg,#f2daff,#a476d8)}
.card.c-attack .c-char{color:#8d2110}
.card.c-skill .c-char{color:#134a72}
.card.c-mental .c-char{color:#492768}
/* 神：墨底金纹，牌名闪闪生辉 */
.card.c-divine{border-color:#3a2c10;background:
  radial-gradient(circle at 50% 42%,#3a3226 0%,#141210 55%,#0a0908 100%)}
.card.c-divine .c-char{color:#ffd964;
  text-shadow:0 0 6px rgba(255,215,100,.95),0 0 16px rgba(255,190,50,.8),0 0 34px rgba(220,150,20,.6);
  animation:divineShine 2.4s ease-in-out infinite}
.card.c-divine .c-type{color:#c9a24a}
.card.c-divine .c-desc{color:#e8dcc0}
.card.c-divine::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,rgba(255,215,100,.16),transparent 62%)}
@keyframes divineShine{
  0%,100%{text-shadow:0 0 6px rgba(255,215,100,.9),0 0 16px rgba(255,190,50,.7),0 0 30px rgba(220,150,20,.45)}
  50%    {text-shadow:0 0 10px rgba(255,235,160,1),0 0 26px rgba(255,200,70,.95),0 0 52px rgba(230,160,30,.7)}}
/* 咒：惨白底、墨黑字，深灰气自牌缘渗出 */
.card.c-curse{border-color:#6e6e76;background:linear-gradient(160deg,#ffffff,#e8e8ec)}
.card.c-curse .c-char{color:#1a1a1e}
.card.c-curse .c-type{color:#6a6a72}
.card.c-curse .c-desc{color:#3a3a42}
.card.c-curse::after{content:"";position:absolute;inset:-2px;border-radius:8px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 108%,rgba(70,70,80,.42),transparent 66%);
  animation:curseSmoke 3.2s ease-in-out infinite}
@keyframes curseSmoke{
  0%,100%{opacity:.45;transform:translateY(1px) scale(1)}
  50%    {opacity:.85;transform:translateY(-2px) scale(1.05)}}
/* 牌面文字随 --cardW 等比缩放：牌收窄时汉字与说明同步变小，始终不出框 */
.card .c-char{font-size:calc(var(--cardW) * 0.54);font-weight:bold;line-height:1;text-shadow:1px 1px 0 rgba(255,255,255,.45)}
.card .c-type{font-size:calc(var(--cardW) * 0.15);color:var(--ink2);letter-spacing:1px}
.card .c-cost{position:absolute;top:-7px;right:-7px;width:calc(var(--cardW) * 0.3);height:calc(var(--cardW) * 0.3);
  min-width:20px;min-height:20px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:calc(var(--cardW) * 0.2);font-weight:bold;display:flex;align-items:center;
  justify-content:center;border:2px solid #261d12}
.card .c-desc{font-size:calc(var(--cardW) * 0.135);line-height:1.25;text-align:center;margin-top:2px;color:var(--ink);
  overflow:hidden}
/* 描述中被改写的伤害数字：增绿减红，皆加粗（伤害只改在牌面文字里，不再另出角标） */
.card .c-desc b.dmg-up{color:#1e8a3c;font-weight:bold;font-size:1.15em}
.card .c-desc b.dmg-down{color:#c2351a;font-weight:bold;font-size:1.15em}
.card .c-tick{width:calc(var(--cardW) * 0.32);height:calc(var(--cardW) * 0.32);min-width:22px;min-height:22px;
  font-size:calc(var(--cardW) * 0.19)}
.card.combo-flash{animation:cpop .5s}
@keyframes cpop{0%{box-shadow:0 0 0 0 var(--goldL)}50%{box-shadow:0 0 0 6px var(--goldL),0 0 18px var(--gold)}100%{box-shadow:0 0 0 0 var(--goldL)}}
#hand .empty-note{color:var(--ink3);font-style:italic;font-size:14px}
#actions{flex:0 0 auto;display:flex;gap:10px;align-items:center}
button{font-family:inherit;font-size:15px;font-weight:bold;letter-spacing:2px;padding:8px 18px;
  border:2px solid var(--ink);border-radius:7px;cursor:pointer;background:linear-gradient(180deg,#efe0bc,#cdb98a);
  color:var(--ink);transition:transform .08s,background .12s}
button:hover{transform:translateY(-1px);background:linear-gradient(180deg,#f7ecc8,#d8c496)}
button:active{transform:translateY(1px)}
#endTurnBtn{background:linear-gradient(180deg,#e0b346,#b8901f);color:#fff;border-color:var(--ink)}
#endTurnBtn:hover{background:linear-gradient(180deg,#ecc45a,#c89a25)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
#moveChip{font-size:13px;padding:6px 10px;border:2px dashed var(--ink2);border-radius:7px;background:rgba(255,250,235,.6)}
#moveChip.on{background:linear-gradient(180deg,#bcd9e6,#8fc0d8);border-style:solid}
/* ---- 弹层 ---- */
#overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,14,6,.7);z-index:50}
#overlay.show{display:flex}
.modal{background:linear-gradient(160deg,#f6eed6,#dccba1);border:3px solid var(--ink);border-radius:12px;
  padding:30px 40px;text-align:center;max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.modal h2{font-size:30px;letter-spacing:8px;margin-bottom:10px}
.modal.win h2{color:var(--gold)} .modal.lose h2{color:var(--red)}
.modal p{font-size:15px;color:var(--ink2);margin:6px 0}
/* 关卡开场弹窗 */
.modal.level{border-color:var(--gold);max-width:460px}
.modal.level h2{color:var(--ink);font-size:26px;letter-spacing:6px;margin:4px 0 6px}
.modal.level .lv-tag{display:inline-block;font-size:13px;letter-spacing:3px;color:#fff;
  background:linear-gradient(180deg,#d4523b,#a8341f);border:2px solid var(--ink);border-radius:20px;padding:2px 14px}
.modal.level .lv-meta{font-size:14px;color:var(--ink2);letter-spacing:1px;margin:4px 0}
.modal.level .lv-kind{font-size:16px;font-weight:bold;color:var(--red);letter-spacing:2px;margin:2px 0 8px}
.modal.level .lv-desc{font-size:15px;line-height:1.75;color:var(--ink);text-align:left;
  border-top:1px dashed var(--ink3);border-bottom:1px dashed var(--ink3);padding:9px 2px}
.modal.level .lv-tip{font-size:13px;color:var(--green);text-align:left;line-height:1.6}
.modal button{margin:6px 5px 0}
.modal button.ghost{background:linear-gradient(180deg,#efe0bc,#cdb98a);color:var(--ink)}
/* ---- 组词 COMBO 特效：左侧滑入 → 定住 2 秒 → 右侧滑出 ----
   时长与 index.html 中 ANIM.combo（3400ms）保持一致 */
#comboPop{position:fixed;left:0;right:0;top:24%;z-index:60;height:170px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;  /* 幕布外部分裁掉，不撑出滚动条 */
  pointer-events:none;opacity:0}
#comboPop.show{opacity:1;animation:comboCurtain 3.4s linear forwards}
@keyframes comboCurtain{0%,96%{opacity:1}100%{opacity:0}}
.combo-band{position:relative;display:flex;flex-direction:column;align-items:center;
  animation:comboSlide 3.4s cubic-bezier(.16,.84,.28,1) forwards}
/* 位移一律用 vw：元素居中于视口，±100vw 必定完全移出画面，与横幅自身宽度无关 */
@keyframes comboSlide{
  0%  {transform:translateX(-100vw) scale(.72) rotate(-7deg);opacity:0}   /* 幕布左外 */
  10% {opacity:1}
  13% {transform:translateX(1.6vw)  scale(1.16) rotate(2deg);opacity:1}   /* 冲入并过冲 */
  18% {transform:translateX(-0.6vw) scale(.98) rotate(-1deg)}
  22% {transform:translateX(0)      scale(1.02) rotate(0)}
  26% {transform:translateX(0)      scale(1) rotate(0)}                   /* 落定 */
  74% {transform:translateX(0)      scale(1) rotate(0);opacity:1}         /* 定住约 2 秒 */
  88% {transform:translateX(52vw)   scale(1.04) rotate(3deg);opacity:1}
  100%{transform:translateX(100vw)  scale(.92) rotate(5deg);opacity:0}    /* 自右滑出 */
}
/* 炸裂冲击波：随横幅落定瞬间炸开一圈金环 */
.combo-burst{position:absolute;top:50%;left:50%;
  width:clamp(150px,26vw,320px);height:clamp(150px,26vw,320px);
  border-radius:50%;border:6px solid rgba(240,214,138,.95);
  box-shadow:0 0 40px rgba(232,196,82,.9),inset 0 0 40px rgba(232,196,82,.6);
  opacity:0;animation:comboBurst 1s ease-out .42s forwards}
@keyframes comboBurst{
  0%  {transform:translate(-50%,-50%) scale(.2);opacity:0}
  18% {transform:translate(-50%,-50%) scale(.75);opacity:1}
  100%{transform:translate(-50%,-50%) scale(2.3);opacity:0}
}
.combo-word{display:flex;align-items:baseline;gap:14px;white-space:nowrap;
  font-size:clamp(38px,7.4vw,92px);font-weight:bold;letter-spacing:8px;line-height:1.05;
  background:linear-gradient(180deg,#fffbe8 8%,#f6dc95 38%,#d9a53a 62%,#a9761a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(232,196,82,.95)) drop-shadow(3px 4px 0 #3d2205) drop-shadow(-2px -1px 0 #7a4a06);
  animation:comboWordFlash 3.4s linear forwards}
@keyframes comboWordFlash{0%,12%{filter:drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(3px 4px 0 #3d2205)}
  15%{filter:drop-shadow(0 0 46px #fff8d8) drop-shadow(0 0 26px var(--goldL)) drop-shadow(3px 4px 0 #3d2205)}
  40%{filter:drop-shadow(0 0 16px rgba(232,196,82,.95)) drop-shadow(3px 4px 0 #3d2205) drop-shadow(-2px -1px 0 #7a4a06)}
  100%{filter:drop-shadow(0 0 16px rgba(232,196,82,.95)) drop-shadow(3px 4px 0 #3d2205)}}
.combo-word .cw-tag{font-size:.42em;letter-spacing:6px;
  -webkit-text-fill-color:var(--redL);color:var(--redL);
  background:none;filter:drop-shadow(2px 2px 0 #2b1206)}
.combo-desc{margin-top:6px;font-size:clamp(12px,1.5vw,19px);letter-spacing:3px;color:#fff3d0;
  text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 14px rgba(212,130,40,.9)}
/* 棋盘随之金光暴起 */
#grid{transition:box-shadow .3s ease-out}
#grid.combo-glow{box-shadow:0 0 0 3px var(--goldL),0 0 40px 10px rgba(232,196,82,.7),0 8px 22px rgba(0,0,0,.28)}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-3px,1px)}}
/* ---- 窄屏：右栏折到棋盘之下，整页可滚动，棋盘按可视宽度最大化 ---- */
@media(max-width:900px){
  #app{height:auto;min-height:100vh;overflow:visible}
  #mainArea{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;gap:8px}
  #sidePanel{width:100%;max-width:none;flex-direction:row;flex-wrap:wrap;overflow:visible}
  #sidePanel>.panel{flex:1 1 240px;max-height:none}
  /* 窄屏：屏幕寸土寸金，「敌方意图」暂隐（内容仍可在选中单位处逐一查看） */
  #enemyIntents{display:none}
  #boardWrap{width:100%}
  /* 底栏只留手牌：按钮与弃牌提示一并移出，手牌方能铺满整条栏宽 */
  #bottomBar{padding:6px 8px}
  #discardTip{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(var(--cardH) + 54px);z-index:29;width:min(420px,92vw);max-width:none;
    box-shadow:0 6px 18px rgba(0,0,0,.35)}
  /* 行动按钮：竖排悬浮于地图右下方，随页面滚动而动，不占底栏一寸宽度 */
  #actions{position:fixed;right:10px;bottom:calc(var(--cardH) + 54px);z-index:30;
    flex-direction:column;align-items:stretch;gap:8px}
  #actions>button,#actions>#moveChip{width:96px;text-align:center;letter-spacing:2px;
    box-shadow:0 6px 16px rgba(0,0,0,.35)}
  #moveChip{font-size:12px;padding:7px 4px}
  /* 顶栏：让位给两个图标按钮，字号与间距一并收紧 */
  #topbar{gap:8px;padding:6px 10px}
  .title{font-size:17px;letter-spacing:3px}
  .title small{display:none}
  #levelInfo{font-size:13px}
  #turnInfo{font-size:14px;min-width:auto}
  #heroStats{gap:10px;font-size:13px}
  #heroStats .bar{width:64px}
  #deckInfo{gap:7px;padding-left:8px;font-size:11px}
  .miniPile{width:24px;height:30px;font-size:14px}
}
/* 极窄屏（手机竖屏）：进一步压缩，图标按钮缩到 32px，牌面下限更低（见 fitHand） */
@media(max-width:560px){
  :root{--cardHMin:86px}
  #topbar{gap:6px;padding:5px 8px}
  .title{font-size:15px;letter-spacing:2px}
  #levelInfo .lvname{display:none}
  #turnInfo{font-size:13px}
  #heroStats{gap:8px;font-size:12px}
  #heroStats .bar{width:48px}
  #deckInfo .pl{display:none}
  #topBtns{gap:6px}
  #topBtns button{width:32px;height:32px}
  #topBtns button svg{width:19px;height:19px}
  #actions>button,#actions>#moveChip{width:82px}
}
/* ---- 过关 · 卡牌三选一 ---- */
.modal.pick{border-color:var(--gold);max-width:560px;width:min(560px,94vw)}
.modal.pick.stele{border-color:#55555f;background:
  radial-gradient(circle at 50% 30%,#3a3a44 0%,#1c1c22 60%,#101014 100%)}
.modal.pick.stele h2{color:#ffd964;text-shadow:0 0 14px rgba(255,215,100,.75),0 0 34px rgba(230,180,50,.5)}
.modal.pick.stele .pick-sub{color:#b9b4a4}
.modal.pick.stele .pick-lead{color:#e8dcc0}
.modal.pick h2{color:var(--gold);font-size:26px;letter-spacing:6px;margin:4px 0 2px}
.pick-sub{font-size:13px;color:var(--ink2);letter-spacing:1px;margin-bottom:8px}
.pick-lead{font-size:15px;font-weight:bold;color:var(--ink);letter-spacing:2px;margin:6px 0 10px}
.pick-note{font-size:13px;color:var(--red);margin:8px 0}
.pick-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px}
.pick-card{width:96px;min-height:132px;border:2px solid var(--ink);border-radius:8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;padding:8px 5px;position:relative;
  transition:transform .12s,box-shadow .12s;background:linear-gradient(160deg,#fdf3dc,#e6cf9c)}
.pick-card:hover{transform:translateY(-6px) scale(1.04)}
.pick-card.sel{box-shadow:0 0 0 3px var(--goldL),0 8px 20px rgba(0,0,0,.35);transform:translateY(-6px)}
.pick-card .c-char{font-size:44px;font-weight:bold;line-height:1;text-shadow:1px 1px 0 rgba(255,255,255,.45)}
.pick-card .c-type{font-size:11px;color:var(--ink2);letter-spacing:1px}
.pick-card .c-desc{font-size:10px;line-height:1.3;text-align:center;margin-top:4px;color:var(--ink)}
.pick-card .c-cost{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:13px;font-weight:bold;display:flex;align-items:center;
  justify-content:center;border:2px solid #261d12}
.pick-card.c-attack{border-color:#c2351a;background:linear-gradient(160deg,#ffe3c2,#f7905f)}
.pick-card.c-skill{border-color:#1f6fa8;background:linear-gradient(160deg,#d5efff,#63b0ea)}
.pick-card.c-mental{border-color:#7a3f9e;background:linear-gradient(160deg,#f2daff,#a476d8)}
.pick-card.c-attack .c-char{color:#8d2110}
.pick-card.c-skill .c-char{color:#134a72}
.pick-card.c-mental .c-char{color:#492768}
.pick-card.c-divine{border-color:#3a2c10;background:radial-gradient(circle at 50% 42%,#3a3226 0%,#141210 55%,#0a0908 100%)}
.pick-card.c-divine .c-char{color:#ffd964;animation:divineShine 2.4s ease-in-out infinite}
.pick-card.c-divine .c-type{color:#c9a24a}.pick-card.c-divine .c-desc{color:#e8dcc0}
.pick-card.c-curse{border-color:#6e6e76;background:linear-gradient(160deg,#ffffff,#e8e8ec)}
.pick-card.c-curse .c-char{color:#1a1a1e}.pick-card.c-curse .c-type{color:#6a6a72}.pick-card.c-curse .c-desc{color:#3a3a42}
.pick-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.pick-btns button{font-size:14px;letter-spacing:1px;padding:9px 16px}
/* ---- 熔牌炉 · 择一张牌熔去 ---- */
.modal.forge{border-color:#b4531b;max-width:520px;width:min(520px,94vw)}
.modal.forge h2{color:#b4531b;font-size:26px;letter-spacing:6px;margin:4px 0 2px;
  text-shadow:0 0 14px rgba(255,150,60,.55)}
.forge-lead{font-size:13px;color:var(--ink2);margin:8px 0 6px}
.forge-list{max-height:min(46vh,340px);overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px;padding:6px 2px;
  scrollbar-width:thin;scrollbar-color:var(--ink3) rgba(90,74,47,.12)}
.forge-list::-webkit-scrollbar{width:8px}
.forge-list::-webkit-scrollbar-track{background:rgba(90,74,47,.12);border-radius:4px}
.forge-list::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
.forge-list.disabled{opacity:.55;pointer-events:none;filter:grayscale(.4)}
.forge-item{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--ink3);background:linear-gradient(160deg,#fdf3dc,#e6cf9c);font-size:12px;
  transition:transform .1s,box-shadow .1s}
.forge-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.28)}
.forge-item .fw{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:bold;border:1.5px solid var(--ink);border-radius:4px}
.forge-item .fn{font-weight:bold;color:var(--ink);flex:0 0 auto}
.forge-item .ft{color:var(--ink2);flex:1 1 auto;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.forge-item .fq{color:var(--red);font-weight:bold;flex:0 0 auto}
.forge-item.c-attack{border-color:#c2351a;background:linear-gradient(160deg,#ffe3c2,#f7905f)}
.forge-item.c-skill{border-color:#1f6fa8;background:linear-gradient(160deg,#d5efff,#63b0ea)}
.forge-item.c-mental{border-color:#7a3f9e;background:linear-gradient(160deg,#f2daff,#a476d8)}
.forge-item.c-attack .fw{background:linear-gradient(160deg,#ffe3c2,#f7905f);color:#8d2110;border-color:#8d2110}
.forge-item.c-skill .fw{background:linear-gradient(160deg,#d5efff,#63b0ea);color:#134a72;border-color:#134a72}
.forge-item.c-mental .fw{background:linear-gradient(160deg,#f2daff,#a476d8);color:#492768;border-color:#492768}
.forge-item.c-divine{border-color:#3a2c10;background:radial-gradient(circle at 50% 42%,#3a3226,#0d0c0b)}
.forge-item.c-divine .fw{background:#141210;color:#ffd964;border-color:#c9a24a}
.forge-item.c-divine .fn,.forge-item.c-divine .ft{color:#e8dcc0}
.forge-item.c-curse{border-color:#6e6e76;background:linear-gradient(160deg,#ffffff,#e8e8ec)}
.forge-item.c-curse .fw{background:#f2f2f4;color:#1a1a1e;border-color:#6a6a72}
.forge-item.c-curse .fn{color:#1a1a1e}.forge-item.c-curse .ft{color:#5a5a62}
/* 选中态：金圈高亮，一眼看出「要熔的是这张」 */
.forge-item.sel{box-shadow:0 0 0 3px var(--goldL),0 6px 16px rgba(0,0,0,.3);
  border-color:var(--ink);transform:translateY(-2px)}
.forge-item.sel .fn{color:var(--red)}
/* 二次确认条：选中后显示「将熔去 X → 熔后剩 N 张」，未选中时是灰字提示 */
.forge-confirm{margin:8px 0 2px;min-height:22px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:13px;line-height:1.5;color:var(--ink);
  padding:5px 10px;border-radius:6px;background:rgba(255,250,235,.5)}
.forge-confirm .fc-txt{color:var(--ink3);font-size:12.5px}
.forge-confirm .fc-name{font-size:17px;color:var(--red);margin:0 4px;font-weight:bold}
.forge-confirm b{color:var(--red)}
/* 窄屏：三选一与熔牌列表都随屏收窄 */
@media(max-width:560px){
  .pick-card{width:86px;min-height:120px}
  .pick-card .c-char{font-size:38px}
  .forge-list{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .pick-btns button{font-size:13px;padding:8px 12px}
}
/* ---- 牌池弹窗 ---- */
#poolOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(20,14,6,.72);z-index:68;padding:18px}
#poolOverlay.show{display:flex}
.pool-card{width:min(640px,94vw);max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#f8f1de,#ddcb9f);border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 14px 46px rgba(0,0,0,.55);overflow:hidden}
.pool-sub{flex:0 0 auto;font-size:13px;color:var(--ink2);padding:4px 16px 8px;text-align:center}
.pool-sub b{color:var(--red);font-size:15px}
#poolBox{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 14px 10px;
  scrollbar-width:thin;scrollbar-color:var(--ink3) rgba(90,74,47,.12)}
#poolBox::-webkit-scrollbar{width:8px}
#poolBox::-webkit-scrollbar-track{background:rgba(90,74,47,.12);border-radius:4px}
#poolBox::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
.pool-grp{font-size:12px;color:var(--ink2);letter-spacing:4px;margin:8px 0 4px;
  border-bottom:1px dashed var(--ink3);padding-bottom:2px}
.pool-grp::before{content:"";display:inline-block;width:4px;height:10px;margin-right:5px;
  background:var(--gold);border-radius:2px;vertical-align:-1px}
.pool-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:5px}
.pool-item{display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:6px;font-size:12px;
  border:1.5px solid var(--ink3);background:linear-gradient(160deg,#fdf3dc,#e6cf9c)}
.pool-item .pw{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:bold;border:1.5px solid var(--ink);border-radius:4px}
.pool-item .pn{font-weight:bold;color:var(--ink);flex:0 0 auto}
.pool-item .pd{flex:1 1 auto;min-width:0;color:var(--ink2);font-size:10.5px;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pool-item .pc{flex:0 0 auto;color:var(--blue);font-weight:bold}
.pool-item .pq{flex:0 0 auto;color:var(--red);font-weight:bold}
.pool-item .pdist{flex:0 0 auto;font-size:10px;color:var(--ink3);white-space:nowrap}
.pool-item.c-attack{border-color:#c2351a;background:linear-gradient(160deg,#ffe3c2,#f7905f)}
.pool-item.c-skill{border-color:#1f6fa8;background:linear-gradient(160deg,#d5efff,#63b0ea)}
.pool-item.c-mental{border-color:#7a3f9e;background:linear-gradient(160deg,#f2daff,#a476d8)}
.pool-item.c-attack .pw{background:linear-gradient(160deg,#ffe3c2,#f7905f);color:#8d2110;border-color:#8d2110}
.pool-item.c-skill .pw{background:linear-gradient(160deg,#d5efff,#63b0ea);color:#134a72;border-color:#134a72}
.pool-item.c-mental .pw{background:linear-gradient(160deg,#f2daff,#a476d8);color:#492768;border-color:#492768}
.pool-item.c-divine{border-color:#3a2c10;background:radial-gradient(circle at 50% 42%,#3a3226,#0d0c0b)}
.pool-item.c-divine .pw{background:#141210;color:#ffd964;border-color:#c9a24a}
.pool-item.c-divine .pn{color:#ffd964}.pool-item.c-divine .pd,.pool-item.c-divine .pdist{color:#c9a24a}
.pool-item.c-divine .pc{color:#e0a01c}
.pool-item.c-curse{border-color:#6e6e76;background:linear-gradient(160deg,#ffffff,#e8e8ec)}
.pool-item.c-curse .pw{background:#f2f2f4;color:#1a1a1e;border-color:#6a6a72}
.pool-item.c-curse .pn{color:#1a1a1e}.pool-item.c-curse .pd{color:#5a5a62}
.pool-empty{text-align:center;color:var(--ink3);padding:24px 0;font-size:14px}
/* ---- 石龛献祭：与熔牌同构，青灰石调，逐条标出「献之何报」 ---- */
.modal.forge.shrine{border-color:#7d8a80;background:
  linear-gradient(180deg,#f4f7f2 0%,#e2e8e1 100%)}
.modal.forge.shrine h2{color:#3d4a42}
.modal.forge.shrine .forge-sub{color:#5a6a5e}
.forge-item .fgain{flex:0 0 auto;font-size:10px;padding:1px 5px;border-radius:999px;
  background:rgba(61,74,66,.12);color:#3d4a42;border:1px solid rgba(61,74,66,.3);white-space:nowrap}
.forge-item.c-attack .fgain{background:rgba(194,53,26,.14);color:#8d2110;border-color:#c2351a}
.forge-item.c-skill  .fgain{background:rgba(31,111,168,.14);color:#134a72;border-color:#1f6fa8}
.forge-item.c-mental .fgain{background:rgba(122,63,158,.14);color:#492768;border-color:#7a3f9e}
.forge-item.c-divine .fgain{background:rgba(201,162,74,.18);color:#8a6a1e;border-color:#c9a24a}
.forge-item.c-curse  .fgain{background:rgba(70,70,80,.14);color:#33333d;border-color:#6e6e76}
.fc-gain{color:#3d4a42;font-weight:bold}
/* 「渡」的斩魂数：牌面右下小记，见其累积之威 */
.card .c-kill{position:absolute;top:-6px;left:-6px;padding:0 4px;line-height:1.5;
  font-size:calc(var(--cardW) * 0.16);font-weight:bold;border-radius:999px;
  background:radial-gradient(circle at 40% 35%,#3a3226,#0d0c0b);color:#ffd964;
  border:1px solid #c9a24a;box-shadow:0 1px 4px rgba(0,0,0,.5)}
/* 条目选中：金圈高亮，提示「详情已展开在下方」 */
.pool-item.sel{box-shadow:0 0 0 2px var(--goldL);border-color:var(--ink)}
/* ---- 牌池详情：点击条目后于对话框下方展开该牌的原始全部信息 ---- */
#poolDetail{display:none;flex:0 0 auto;max-height:38vh;overflow-y:auto;
  margin:0 10px 10px;padding:8px 12px 10px;border-radius:8px;
  background:linear-gradient(180deg,rgba(255,250,235,.92),rgba(238,224,190,.92));
  border:2px solid var(--ink3);scrollbar-width:thin;scrollbar-color:var(--ink3) rgba(90,74,47,.12)}
#poolDetail.show{display:block}
.pd-head{display:flex;align-items:center;gap:8px;padding-bottom:5px;
  border-bottom:1px dashed var(--ink3);margin-bottom:5px}
.pd-w{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:bold;border:2px solid var(--ink);border-radius:5px;
  background:linear-gradient(160deg,#fdf3dc,#e6cf9c)}
.pd-w.c-attack{border-color:#c2351a;background:linear-gradient(160deg,#ffe3c2,#f7905f);color:#8d2110}
.pd-w.c-skill{border-color:#1f6fa8;background:linear-gradient(160deg,#d5efff,#63b0ea);color:#134a72}
.pd-w.c-mental{border-color:#7a3f9e;background:linear-gradient(160deg,#f2daff,#a476d8);color:#492768}
.pd-w.c-divine{border-color:#3a2c10;background:radial-gradient(circle at 50% 42%,#3a3226,#0d0c0b);color:#ffd964}
.pd-w.c-curse{border-color:#6e6e76;background:linear-gradient(160deg,#ffffff,#e8e8ec);color:#1a1a1e}
.pd-n{flex:1 1 auto;font-size:15px;font-weight:bold;color:var(--ink);letter-spacing:1px}
.pd-x{flex:0 0 auto;cursor:pointer;font-size:15px;color:var(--ink2);padding:2px 5px;border-radius:4px}
.pd-x:hover{background:var(--redL);color:#fff}
.pd-desc{font-size:12.5px;line-height:1.5;color:var(--ink2);margin-bottom:6px}
.pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 12px}
.pd-row{display:flex;justify-content:space-between;gap:6px;font-size:12px;min-width:0;
  border-bottom:1px dotted rgba(90,74,47,.25);padding:1px 0}
.pd-row>span{color:var(--ink3);white-space:nowrap;flex:0 0 auto}
.pd-row>b{color:var(--ink);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.pd-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .pool-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .pool-item .pd{display:none}
}
/* ---- 战报弹窗（原右栏战报面板迁入） ---- */
#logOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(20,14,6,.72);z-index:68;padding:18px}
#logOverlay.show{display:flex}
.log-card{width:min(620px,94vw);max-height:84vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#f8f1de,#ddcb9f);border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 14px 46px rgba(0,0,0,.55);overflow:hidden}
.log-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;border-bottom:2px solid var(--ink2);
  background:linear-gradient(180deg,rgba(255,250,235,.9),rgba(220,203,161,.5))}
.log-head h2{font-size:22px;letter-spacing:8px;color:var(--red);font-weight:bold}
.log-foot{flex:0 0 auto;display:flex;justify-content:center;padding:8px 16px 12px}
.log-foot button{letter-spacing:4px}
/* ---- 图例信息弹窗（原左侧图例面板迁入） ---- */
#helpOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(20,14,6,.72);z-index:70;padding:18px}
#helpOverlay.show{display:flex}
.help-card{width:min(1040px,96vw);max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#f8f1de,#ddcb9f);border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 14px 46px rgba(0,0,0,.55);overflow:hidden}
.help-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 18px;border-bottom:2px solid var(--ink2);
  background:linear-gradient(180deg,rgba(255,250,235,.9),rgba(220,203,161,.5))}
.help-head h2{font-size:24px;letter-spacing:8px;color:var(--red);font-weight:bold}
.help-x{width:34px;height:34px;padding:0;border-radius:50%;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#efe0bc,#cdb98a)}
.help-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;gap:6px 22px;padding:12px 18px 6px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start;
  scrollbar-width:thin;scrollbar-color:var(--ink3) rgba(90,74,47,.12)}
.help-body::-webkit-scrollbar{width:8px}
.help-body::-webkit-scrollbar-track{background:rgba(90,74,47,.12);border-radius:4px}
.help-body::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px}
.help-col{min-width:0}
.help-foot{flex:0 0 auto;display:flex;justify-content:center;padding:8px 18px 14px}
.help-foot button{letter-spacing:4px}
/* 图例本体 */
.help-body .leg{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:12.5px;margin-top:3px}
.help-body .leg-sub{font-size:12.5px;color:var(--ink2);margin-top:8px;border-bottom:1px dotted var(--ink3);
  padding-bottom:2px;letter-spacing:1px}
.help-body .leg-note{font-size:12.5px;color:var(--ink);line-height:1.65;margin-top:5px;padding:4px 7px;
  background:rgba(168,52,31,.07);border-left:3px solid var(--red);border-radius:0 4px 4px 0}
.help-body .leg-note b{color:var(--red)}
.leg-row{display:flex;align-items:center;gap:5px;line-height:1.35}
.leg-row>span:last-child{color:var(--ink2)}
.sw{width:25px;height:25px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;
  background:linear-gradient(135deg,#efe3c6,#e1d2a8);border-radius:3px;flex:0 0 auto;text-shadow:1px 1px 0 rgba(255,255,255,.35)}
.ic2{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;
  font-weight:bold;color:#fff;border:2px solid #261d12;flex:0 0 auto}
/* 图例 · 组词 COMBO 一览：单列排布，卡牌小方块沿用卡面配色 */
#comboLegend{grid-template-columns:1fr;gap:2px}
.leg-combo{display:flex;align-items:center;gap:4px;font-size:12px;line-height:1.45;
  padding:1px 2px;border-radius:4px}
.leg-combo:hover{background:rgba(232,196,82,.22)}
.cw{width:20px;height:20px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:bold;border:1.5px solid var(--ink);border-radius:4px;
  background:linear-gradient(160deg,#f6eed6,#e3d4ab)}
.cw.c-attack{border-color:#c2351a;background:linear-gradient(160deg,#ffe3c2,#f7905f);color:#8d2110}
.cw.c-skill{border-color:#1f6fa8;background:linear-gradient(160deg,#d5efff,#63b0ea);color:#134a72}
.cw.c-mental{border-color:#7a3f9e;background:linear-gradient(160deg,#f2daff,#a476d8);color:#492768}
.cw.c-divine{border-color:#3a2c10;background:radial-gradient(circle at 50% 42%,#3a3226,#0d0c0b);color:#ffd964}
.cw.c-curse{border-color:#6e6e76;background:linear-gradient(160deg,#ffffff,#e8e8ec);color:#1a1a1e}
.cw-plus{color:var(--ink3);flex:0 0 auto;font-size:11px}
.cw-arrow{color:var(--red);font-weight:bold;flex:0 0 auto}
.leg-combo .cw-name{color:var(--ink);font-weight:bold;letter-spacing:1px;flex:0 0 auto}
.leg-combo .cw-desc{color:var(--ink2);font-size:11px;flex:1 1 auto;min-width:0}