/* ══ 启元 · 界面语言 v2「墨与电」══
   平面、锐角、单一强调色（电蓝）、大字排版。
   禁：渐变字、凸起/高光按钮、球形徽章、emoji、blur。
   切角靠 clip-path；"描边"靠两层叠出来（外层=线色，内层内缩 1px=面板色），因为 clip-path 会把 border 一起切掉。 */
:root{
  --bg:#050608; --bg-2:#0a0c11; --panel:#0e1117; --panel-2:#131722;
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.24); --line-3:rgba(255,255,255,.45);
  --acc:#3ddcff; --acc-2:#0e6f86; --acc-ink:#07202a;
  --gold:#e6b64a; --red:#ff3b5c; --green:#5ee08a; --violet:#b48cff;
  --text:#f4f6f8; --text-sub:#a3adb8; --text-dim:#5a6470;
  --font:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cut:12px;
  --chamfer:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --f-acid:#9ccc65; --f-alkali:#b48cff; --f-oxid:#ff6a3d; --f-reduce:#3ddcff; --f-salt:#7fe0ea; --f-cat:#e6b64a; --f-carbon:#5ee08a; --f-inert:#e8e8ec;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body.cg{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased;}
body.cg a{color:inherit;text-decoration:none;}
::selection{background:var(--acc);color:#000;}

/* 背景：纯黑 + 极淡网格 + 一道斜切光带。全是渐变，无图 */
.cg-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg);}
.cg-bg::before{content:'';position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 85%);mask-image:linear-gradient(180deg,#000 0,transparent 85%);}
.cg-bg::after{content:'';position:absolute;left:-20%;top:-30%;width:70%;height:180%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(61,220,255,.04) 45%,rgba(61,220,255,.08) 50%,rgba(61,220,255,.04) 55%,transparent);}
.cg-main{position:relative;z-index:1;}

/* 切角面板 */
.cg-panel{position:relative;padding:18px 20px;clip-path:var(--chamfer);background:var(--line);isolation:isolate;}
.cg-panel::before{content:'';position:absolute;inset:1px;background:var(--panel);clip-path:var(--chamfer);z-index:-1;}
.cg-panel.acc{background:var(--acc);}
.cg-cut{position:relative;clip-path:var(--chamfer);background:var(--line-2);isolation:isolate;}
.cg-cut::before{content:'';position:absolute;inset:1px;background:var(--panel);clip-path:var(--chamfer);z-index:-1;}

/* 标签 / 标题 */
.cg-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--text-dim);margin:0 0 12px;}
.cg-label::before{content:'';width:18px;height:1px;background:var(--acc);flex:0 0 auto;}
.cg-label b{color:var(--acc);font-weight:600;}
.cg-label small{margin-left:auto;letter-spacing:.1em;color:var(--text-dim);font-size:11px;}
.cg-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--acc);}
.cg-h1{margin:0;font-weight:900;line-height:1;letter-spacing:.22em;text-indent:.22em;color:#fff;}
.cg-h1.is-art{letter-spacing:0;text-indent:0;display:flex;}
.cg-h1.is-art canvas,.is-art canvas{display:block;}

/* 按钮：平面切角。默认=描边；primary=白底黑字；acc=电蓝底黑字；danger=红描边 */
.cg-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 22px;min-height:42px;
  --cut:10px;clip-path:var(--chamfer);background:var(--line-3);color:#fff;font:inherit;font-size:.9rem;font-weight:800;
  letter-spacing:.22em;text-indent:.22em;cursor:pointer;white-space:nowrap;user-select:none;border:0;isolation:isolate;transition:transform .12s;}
.cg-btn::before{content:'';position:absolute;inset:1px;background:var(--bg-2);clip-path:var(--chamfer);z-index:-1;transition:background .15s;}
.cg-btn:hover::before{background:#161b26;}
.cg-btn:active{transform:translateY(1px);}
.cg-btn:disabled{opacity:.35;cursor:default;}
.cg-btn.primary{background:#fff;color:#000;}
.cg-btn.primary::before{background:#fff;}
.cg-btn.primary:hover{background:var(--acc);}
.cg-btn.primary:hover::before{background:var(--acc);}
.cg-btn.acc{background:var(--acc);color:#000;}
.cg-btn.acc::before{background:var(--acc);}
.cg-btn.acc:hover::before{background:#7ae8ff;}
.cg-btn.danger{background:var(--red);color:#fff;}
.cg-btn.danger::before{background:var(--bg-2);}
.cg-btn.danger:hover::before{background:#2a0b12;}
.cg-btn.big{padding:16px 40px;min-height:56px;font-size:1.05rem;letter-spacing:.35em;text-indent:.35em;--cut:14px;}
.cg-btn.sm{padding:7px 14px;min-height:32px;font-size:.78rem;letter-spacing:.12em;text-indent:.12em;--cut:8px;}
.cg-btn.wide{width:100%;}

/* 顶栏 */
.cg-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;padding:0 22px;height:52px;
  background:rgba(5,6,8,.94);border-bottom:1px solid var(--line);}
.cg-topbar .brand{font-weight:900;letter-spacing:.3em;font-size:.95rem;color:#fff;white-space:nowrap;}
.cg-topbar .brand em{font-style:normal;font-weight:500;letter-spacing:.15em;color:var(--text-sub);margin-left:6px;}
.cg-topbar .links{display:flex;gap:18px;margin-left:auto;}
.cg-topbar .links a{font-size:.82rem;letter-spacing:.12em;color:var(--text-sub);padding:16px 0 14px;border-bottom:2px solid transparent;white-space:nowrap;}
.cg-topbar .links a:hover,.cg-topbar .links a.on{color:#fff;border-bottom-color:var(--acc);}
@media (max-width:700px){
  .cg-topbar{padding:0 12px;gap:12px;}
  .cg-topbar .brand em{display:none;}
  .cg-topbar .links{min-width:0;gap:14px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;}
  .cg-topbar .links::-webkit-scrollbar{display:none;}
  .wallet{min-width:0;gap:10px;}
}

/* 大砖：原画 + 平面文字 */
.cg-tile{position:relative;display:block;min-height:170px;--cut:16px;clip-path:var(--chamfer);background:var(--line-2);isolation:isolate;transition:transform .18s,background .18s;}
.cg-tile::before{content:'';position:absolute;inset:1px;background:var(--panel);clip-path:var(--chamfer);z-index:-3;}
.cg-tile .art{position:absolute;inset:1px;background-size:cover;background-position:center 20%;opacity:.5;clip-path:var(--chamfer);z-index:-2;transition:opacity .25s,transform .5s;}
.cg-tile .shade{position:absolute;inset:1px;z-index:-1;clip-path:var(--chamfer);background:linear-gradient(180deg,rgba(5,6,8,.05) 0%,rgba(5,6,8,.55) 50%,rgba(5,6,8,.97) 100%);}
.cg-tile .body{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;height:100%;padding:20px 22px 18px;}
.cg-tile .idx{position:absolute;left:22px;top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--acc);}
.cg-tile h2{margin:0 0 6px;font-size:1.3rem;font-weight:900;letter-spacing:.18em;color:#fff;}
.cg-tile p{margin:0;font-size:.84rem;line-height:1.7;color:var(--text-sub);max-width:520px;}
.cg-tile .tag{position:absolute;right:18px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#000;background:#fff;padding:3px 8px;}
@media (hover:hover){
  .cg-tile:hover{background:var(--acc);transform:translateY(-3px);}
  .cg-tile:hover .art{opacity:.75;transform:scale(1.04);}
  .cg-tile:hover .tag{background:var(--acc);}
}
.cg-tile:active{transform:translateY(1px);}
.cg-tile.hero{min-height:280px;}
.cg-tile.hero .body{min-height:280px;}
.cg-tile.hero h2{font-size:1.9rem;letter-spacing:.3em;}

/* 阵营徽记：平面描边圆 + 单字；素材图（assets/ui/emblem_*.png）到位就换图 */
.cg-emblem{width:64px;height:64px;border-radius:50%;position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--line-3);background:var(--bg-2);color:#fff;font-weight:900;font-size:1.15rem;--fc:var(--acc);}
.cg-emblem::after{content:'';position:absolute;left:50%;bottom:7px;width:16px;height:2px;margin-left:-8px;background:var(--fc);}
.cg-emblem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cg-emblem.has-img{border-color:transparent;}
.cg-emblem.has-img::after{display:none;}

/* 八隅体：平面点与线 */
.cg-octet{position:relative;width:120px;height:120px;}
.cg-octet .core{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;transform:rotate(45deg);}
.cg-octet .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-2);animation:cgSpin 18s linear infinite;}
.cg-octet .ring i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--acc);transform-origin:50% 64px;}
.cg-octet .ring i:nth-child(2){transform:rotate(45deg)}.cg-octet .ring i:nth-child(3){transform:rotate(90deg)}.cg-octet .ring i:nth-child(4){transform:rotate(135deg)}
.cg-octet .ring i:nth-child(5){transform:rotate(180deg)}.cg-octet .ring i:nth-child(6){transform:rotate(225deg)}.cg-octet .ring i:nth-child(7){transform:rotate(270deg)}.cg-octet .ring i:nth-child(8){transform:rotate(315deg)}
@keyframes cgSpin{to{transform:rotate(360deg)}}
.cg-octet .ring.r2{inset:16px;animation-direction:reverse;animation-duration:26s;border-color:var(--line);}
.cg-octet .ring.r2 i{transform-origin:50% 48px;background:#fff;width:5px;height:5px;margin-left:-2.5px;}

/* 列表行（模式选择这类"选一个"的场合） */
.cg-rows{display:flex;flex-direction:column;}
.cg-row{position:relative;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;align-items:center;padding:12px 14px 12px 16px;
  border-top:1px solid var(--line);cursor:pointer;color:var(--text-sub);transition:background .12s;}
.cg-row:last-child{border-bottom:1px solid var(--line);}
.cg-row .idx{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--text-dim);grid-row:span 2;}
.cg-row b{color:#fff;font-size:1rem;letter-spacing:.12em;font-weight:800;}
.cg-row small{font-size:.8rem;color:var(--text-dim);letter-spacing:.02em;line-height:1.5;}
.cg-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);transform:scaleY(0);transition:transform .15s;}
@media (hover:hover){.cg-row:hover{background:#0f141b;}}
.cg-row.sel{background:var(--acc-ink);}
.cg-row.sel::before{transform:scaleY(1);}
.cg-row.sel b,.cg-row.sel .idx{color:var(--acc);}
.cg-row.sel small{color:var(--text-sub);}

/* 封面卡（选牌组） */
.cg-cover{position:relative;width:150px;height:96px;--cut:10px;clip-path:var(--chamfer);background:var(--line-2);isolation:isolate;cursor:pointer;flex:0 0 auto;transition:transform .15s,background .15s;}
.cg-cover::before{content:'';position:absolute;inset:1px;background:var(--panel);clip-path:var(--chamfer);z-index:-2;}
.cg-cover img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:cover;object-position:center 25%;opacity:.5;clip-path:var(--chamfer);z-index:-1;display:block;}
.cg-cover .bar{position:absolute;left:1px;right:1px;top:1px;height:3px;background:var(--fc,var(--acc));}
.cg-cover .name{position:absolute;left:12px;right:12px;bottom:10px;font-weight:800;letter-spacing:.08em;font-size:.86rem;color:#fff;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cg-cover .desc{display:none;}
@media (hover:hover){.cg-cover:hover{transform:translateY(-2px);} .cg-cover:hover img{opacity:.7;}}
.cg-cover.sel{background:var(--acc);}
.cg-cover.sel img{opacity:.85;}
.cg-cover.sel .name{color:#fff;}
.cg-cover.sel::after{content:'已选';position:absolute;right:9px;top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:#000;background:var(--acc);padding:1px 6px;}

/* 杂项 */
.cg-rule{height:1px;background:var(--line);margin:24px 0;}
.cg-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;border:1px solid var(--line-2);color:var(--text-sub);white-space:nowrap;}
.cg-num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){.cg-octet .ring{animation:none;}}

/* 前场招式：攻击阶段常驻在己方前场下方；动作抽屉仍保留其余场上操作。 */
#front-attack-panel{
  /* 贴状态栏上沿向上长，高度由 --ap-room 给（见 placeAttackPanel 的注释）。
     ⚠ 别再写 min(36vh, …)：36vh 在矮屏比 room 还小，等于又加了一道更紧的闸。 */
  position:fixed;z-index:34;display:none;width:min(760px,calc(100vw - 16px));
  max-height:var(--ap-room,240px);overflow:auto;overscroll-behavior:contain;
  padding:6px;background:#090c12;border:1px solid var(--line-2);color:var(--text);
  box-shadow:0 14px 34px rgba(0,0,0,.72);
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  scrollbar-width:thin;
}
#front-attack-panel.on{display:block;}
/* 招式横排。竖排时两招 + 过载折叠共 387px，横排后只剩一行的高度——
   竖向像素是这块最稀缺的资源，横向反而一直有富余（面板宽 760，两三招足够）。 */
#front-attack-panel .ap-track{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start;}
#front-attack-panel .ap-move{flex:1 1 240px;min-width:0;}
/* 侧停：牌旁边的空白区，竖向吃满 #my-side，招式改竖排（宽度只有 300 上下） */
#front-attack-panel.is-side .ap-track{flex-direction:column;flex-wrap:nowrap;}
#front-attack-panel.is-side .ap-move{flex:0 0 auto;width:100%;}
#front-attack-panel .ap-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:2px 6px 4px;border-bottom:1px solid #1c222b;margin-bottom:4px;
  font-size:.72rem;color:var(--text-sub);letter-spacing:.06em;}
#front-attack-panel .ap-head b{color:#3ddcff;font-weight:600;}
#front-attack-panel .ap-head .ap-hint{color:#ffce6b;}
#front-attack-panel .ap-move{position:relative;background:#10141c;border-left:2px solid var(--acc);}
#front-attack-panel .ap-move.is-disabled{border-left-color:#4a515b;background:#0d1015;}
#front-attack-panel .ap-main,
#front-attack-panel .ap-overload{
  display:block;width:100%;border:0;background:transparent;color:#f4f6f8;text-align:left;
  padding:7px 9px;font:inherit;cursor:pointer;
}
#front-attack-panel .ap-main:hover,
#front-attack-panel .ap-overload:hover{background:#17202a;}
#front-attack-panel .ap-main:focus-visible,
#front-attack-panel .ap-overload:focus-visible,
#front-attack-panel summary:focus-visible{outline:1px solid var(--acc);outline-offset:-2px;}
#front-attack-panel .ap-main:disabled{cursor:not-allowed;color:#8b939d;opacity:.7;}
#front-attack-panel .ap-reason{padding:0 9px 7px;color:#d69272;font-size:.72rem;line-height:1.5;}
#front-attack-panel .ap-overloads{border-top:1px solid #252b35;}
#front-attack-panel .ap-overloads summary{
  padding:1px 9px;color:#ffce6b;font-size:.68rem;line-height:1.35;cursor:pointer;list-style:none;
}
/* 过载三档压成一行横排：竖着排每档 86px，三档就是 260px，比两招正文还高。 */
#front-attack-panel .ap-overload-list{display:flex;flex-wrap:wrap;gap:4px;padding:4px 6px;}
#front-attack-panel .ap-overload{flex:1 1 auto;padding:4px 8px;border-bottom:0;
  border:1px solid #252b35;white-space:nowrap;font-size:.74rem;}
#front-attack-panel .ap-overloads summary::-webkit-details-marker{display:none;}
#front-attack-panel .ap-overloads summary::after{content:'＋';float:right;color:#7d8793;}
#front-attack-panel .ap-overloads[open] summary::after{content:'－';}
#front-attack-panel .ap-overload-list{border-top:1px solid #202630;}
#front-attack-panel .ap-ultimate{border-left-color:#3ddcff;background:#0c1820;}

/* 紧凑模式：牌底到状态栏放不下三行时用。每招压成一行，机制与化学并排、超出截断。
   完整内容看悬浮窗（鼠标停在牌上）或点开卡面。 */
#front-attack-panel.is-tight .ap-head{padding:1px 6px 2px;margin-bottom:3px;font-size:.68rem;}
#front-attack-panel.is-tight .ap-main,
#front-attack-panel.is-tight .ap-overload{padding:4px 8px;}
#front-attack-panel .ap-sub{
  margin-top:3px;font-size:.72rem;line-height:1.45;color:#9fb3c4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#front-attack-panel.is-tight .ap-sub{margin-top:1px;font-size:.68rem;line-height:1.35;}
/* 最后一档：只留「招式名 伤害 费用」。机制、化学式、过载档位都收进悬浮窗与卡面详情。
   宁可明摆着少印，也不要静默裁掉半行——裁掉的那半行玩家根本不知道自己没看见。 */
#front-attack-panel.is-tighter .ap-sub{display:none;}
#front-attack-panel.is-tighter .ap-overloads summary{padding:0 9px;font-size:.64rem;}
#front-attack-panel.is-tighter .ap-main{padding:3px 8px;}
/* 最后一档：过载摘要不再单占一行，并到招式行右端。省下每招约 18px，
   同时保住过载这条玩法入口——它是花电子换伤害的唯一途径，不能藏掉。 */
/* 最紧那一档连读数条也收起来——状态栏里本来就印着 e⁻池与俘获，
   这里那一份是「顺手再印一次」，不是唯一来源，最挤的时候第一个让位。 */
#front-attack-panel.is-flat .ap-head{display:none;}
#front-attack-panel.is-flat .ap-move{display:flex;align-items:stretch;}
#front-attack-panel.is-flat .ap-main{flex:1 1 auto;min-width:0;}
#front-attack-panel.is-flat .ap-overloads{border-top:0;border-left:1px solid #252b35;flex:0 0 auto;}
#front-attack-panel.is-flat .ap-overloads summary{height:100%;display:flex;align-items:center;padding:0 7px;}
#front-attack-panel.is-flat .ap-overloads[open]{position:relative;}
#front-attack-panel.is-flat .ap-overload-list{position:absolute;right:0;bottom:100%;z-index:2;
  background:#0d1117;border:1px solid #252b35;min-width:150px;}
#front-attack-panel.is-tight{padding:4px;}
#front-attack-panel.is-tight .ap-track{gap:4px;}
#front-attack-panel.is-tight .ap-reason{padding:0 8px 4px;font-size:.68rem;}
#front-attack-panel.is-tight .ap-overloads summary{padding:2px 8px;}

/* 攻击阶段把我方牌行顶到上沿：牌本来垂直居中，坐在 #my-side 中间，
   牌底到状态栏只剩 80 来像素，面板再压缩也放不下。顶上去就能腾出一两百像素。
   ⚠ 只动 align-items，不动 flex 比例——实测把 .65/1.35 改成 .72/1.28 在矮屏是净亏
   （1366×768 可用高 183→166、1280×720 151→135），高屏那点收益换不回来。 */
#field-zone.attack-panel-open #my-side{align-items:flex-start;}
@media (max-height:780px){
  #field-zone.attack-panel-open #opp-side{flex:.65;}
  #field-zone.attack-panel-open #my-side{flex:1.35;}
}

@media (max-width:560px){
  #field-zone.attack-panel-open #opp-side{flex:.65;}
  #field-zone.attack-panel-open #my-side{flex:1.35;align-items:flex-start;}
  /* ⚠ 上限只认 --ap-room（placeAttackPanel 实测的「前场牌下沿到状态栏」那一段），
     不要再叠一个 22svh。那个数字是手牌还占着 90–110px 时留下的，攻击阶段把手牌
     收起来之后空间变多了，它却继续按老数字裁——实测 360×780 内容 184px 被裁成 172。
     不遮前场牌、不压状态栏这两件事 room 本身就保证了，svh 那一层是多余的第二把刀。 */
  #front-attack-panel{
    width:calc(100vw - 8px);max-height:var(--ap-room,30svh);
    overflow-x:hidden;overflow-y:auto;padding:5px;
  }
  /* 竖排：招式一条一条，全部铺满面板宽度。
     ⚠ 基础规则里 .ap-track 是 align-items:flex-start，竖排下会让每条按内容收窄
       （实测只占面板 65%，三条还宽窄不一）；必须跟 is-side 一样显式铺满。 */
  #front-attack-panel .ap-track{width:auto;max-width:none;flex-direction:column;
    flex-wrap:nowrap;align-items:stretch;gap:5px;}
  /* ⚠ 招式卡别再写 max-height:calc(room - 12px)：那个 12 只算了面板自己的内边距，
     没算读数条那 27px，展开过载后多出来的十几像素会被 overflow-y:hidden 静默切掉
     ——切掉的正是玩家刚点开要看的三档过载。改成卡片按内容长、超出的由面板滚，
     再配合展开时重新量一次密度（见 battle.js 的 toggle 监听），一般根本滚不着。 */
  #front-attack-panel .ap-move{width:100%;flex:0 0 auto;}
  #front-attack-panel .ap-main,#front-attack-panel .ap-overload{padding:6px 8px;font-size:.76rem;}
  #front-attack-panel .ap-reason{padding:0 8px 6px;font-size:.68rem;}
  #front-attack-panel .ap-overloads summary{padding:4px 8px;font-size:.68rem;}

  /* 触控目标下限。原来过载那行「＋」只有 18–23px 高、过载档位 27–31px，
     手指点不中（用户原话「过载的加号也不容易点到」）。44px 是触控下限。
     ⚠ 给 min-height 而不是 padding：.is-tight/.is-tighter 那几档专门改 padding，
       改 padding 会被它们逐级改回去，改到最后又变回 20 来像素。
     ⚠ 下面三条必须连 .is-tight/.is-tighter 一起写死：那两个选择器多带一个类，
       比 `#front-attack-panel .ap-x` 更特殊，不重写就压不住。 */
  #front-attack-panel .ap-main{
    min-height:46px;display:flex;flex-direction:column;justify-content:center;}
  #front-attack-panel.is-tight .ap-main,
  #front-attack-panel.is-tighter .ap-main{min-height:46px;padding:5px 8px;}
  #front-attack-panel .ap-overloads summary{
    min-height:44px;display:flex;align-items:center;padding:0 10px;font-size:.72rem;}
  #front-attack-panel.is-tight .ap-overloads summary,
  #front-attack-panel.is-tighter .ap-overloads summary{
    min-height:44px;padding:0 10px;font-size:.72rem;}
  #front-attack-panel .ap-overloads summary::after{float:none;margin-left:auto;font-size:1.05rem;}
  #front-attack-panel .ap-overload{
    min-height:44px;display:flex;align-items:center;justify-content:center;
    padding:0 10px;font-size:.78rem;}
  #front-attack-panel.is-tight .ap-overload{min-height:44px;padding:0 10px;}
  #front-attack-panel .ap-overload-list{gap:6px;padding:6px;}
  /* 最紧那一档在手机上先撤读数条，别撤到 is-flat。ap-head 那行的 e⁻池/俘获
     状态栏里本来就印着，撤掉省 26px 正好让 320 宽停在 is-tighter；
     一旦掉进 is-flat，过载列表会变成绝对定位的浮层往面板外弹，
     而面板 overflow-y:hidden——点开「＋」什么也看不见。 */
  #front-attack-panel.is-tighter .ap-head{display:none;}
  /* is-flat 是给桌面矮窗设计的：把过载摘要并到招式行**右侧**，省一行高度。
     手机上稀缺的是宽度不是高度——并排之后招式名那栏只剩 125px，
     「黄绿獠牙　30　耗1e⁻」被挤成三行，一行反倒长到 80px，三条 273px，
     比不并排还高。所以手机上取消并排，只把招式行本身压到一行。 */
  #front-attack-panel.is-flat .ap-move{display:block;}
  #front-attack-panel.is-flat .ap-main{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-height:0;padding:12px 8px;}
  #front-attack-panel.is-flat .ap-reason{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px 6px;}
  #front-attack-panel.is-flat .ap-overloads{border-top:1px solid #252b35;border-left:0;flex:none;}
  #front-attack-panel.is-flat .ap-overloads summary{height:auto;min-height:44px;padding:0 10px;}
  /* 过载列表一律留在文档流里，别往面板外弹——面板会把它裁掉。 */
  #front-attack-panel.is-flat .ap-overload-list{
    position:static;flex-direction:column;min-width:0;border:0;}
  #front-attack-panel.is-flat .ap-overloads[open]{display:block;}
}