/* ============================================================================
   brand-page.css —— 品牌页 / 规则页 / 商城等二级页样式
   ----------------------------------------------------------------------------
   ⚠️ 2026-10-21 14:45 事故与恢复（务必知道）：
      一次打补丁时把 fs.writeFileSync(路径, 'utf8') 少传了内容参数，**整个文件被写成空**。
      恢复方式：拿 dist/assets/css/brand-page.css（上一次构建的压缩版）当底稿，
      按 { } ; 重新断行写回本文件 —— **语义 100% 一致**，只是格式从「手写排版」变成了
      「一条声明一行」。v7 新增的三条（ghost / ring / gap）补在文件末尾。
   ⚠️ 以后写文件：一律 fs.writeFileSync(路径, 内容, 'utf8')；改这个大文件前先 cp 备份。
   ============================================================================ */

.dc-mask {
  z-index:880
}
.dc-modal {
  width:min(760px,100%)
}
.dc-hd {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.dc-hd h3 {
  margin:0
}
.dc-sub {
  font-size:12.5px;
  margin:5px 0 0
}
.dc-x {
  flex:none;
  width:30px;
  height:30px;
  border-radius:8px;
  cursor:pointer;
  background:transparent;
  border:1px solid var(--ink-4);
  color:var(--text-2);
  font-size:14px;
  line-height:1;
  transition:.15s
}
.dc-x:hover {
  color: var(--on-accent);
  background:var(--gold);
  border-color:var(--gold)
}
.dc-code {
  width:100%;
  padding:12px 14px;
  font-size:13.5px;
  letter-spacing:.04em;
  color: var(--gold-ink);
  background:var(--ink);
  border:1px solid var(--brand-2);
  border-radius:8px;
  word-break:break-all;
  cursor:text
}
.dc-code:focus {
  outline:2px solid var(--gold);
  outline-offset:2px
}
.dc-meta {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:9px;
  font-size:12px;
  color:var(--text-3)
}
.dc-meta b {
  color: var(--gold-ink);
  font-weight:800
}
.dc-note {
  margin-top:10px;
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-2);
  background:rgba(255,224,0,.05);
  border:1px solid rgba(255,224,0,.22);
  border-radius:8px
}
.dc-note b {
  color: var(--gold-ink)
}
.dc-warn {
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-2);
  background:rgba(139,30,45,.14);
  border:1px solid var(--brick);
  border-left:3px solid var(--brick);
  border-radius:8px
}
.dc-warn b {
  color:#F3B6C2
}
.dc-chk-r {
  margin-top:3px;
  font-size:12px;
  line-height:1.7;
  color:var(--text-3)
}
.dc-chk-r:first-of-type {
  margin-top:6px
}
.dc-ft {
  align-items:center;
  gap:10px
}
.dc-align {
  margin-right:auto;
  font-size:12px
}
.dc-in {
  width:100%;
  min-height:92px;
  padding:11px 12px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text);
  background:var(--ink);
  border:1px solid var(--ink-4);
  border-radius:8px;
  resize:vertical
}
.dc-in:focus {
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-color:var(--brand-2)
}
.dc-res:empty {
  display:none
}
.dc-prev {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:10px 12px;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:10px
}
.dc-prev-img {
  flex:none;
  width:58px;
  height:80px;
  object-fit:cover;
  border-radius:6px
}
.dc-prev-i {
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12.5px;
  color:var(--text-2)
}
.dc-prev-i b {
  font-size:14px;
  color:var(--text)
}
.dc-prev-i .r {
  color:var(--red)
}
@media (max-width:680px) {
  .dc-ft {
    flex-wrap:wrap
  }
  .dc-align {
    width:100%;
    margin:0 0 4px
  }
}
.tool-panel {
  border:1px solid var(--ink-4);
  border-radius:16px;
  padding:16px;
  background:linear-gradient(160deg,#1B1B1B 0%,#151515 60%,#121212 100%)
}
.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.tool {
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
  padding:14px 16px;
  text-decoration:none;
  cursor:pointer;
  background:linear-gradient(150deg,#212121 0%,var(--ink-2) 55%,#171717 100%);
  border:1px solid var(--ink-4);
  border-radius:10px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease
}
.tool:hover {
  background:linear-gradient(150deg,#2A2A2A 0%,#232323 55%,#1B1B1B 100%);
  border-color:var(--brand-2);
  transform:translateY(-2px)
}
.tool b {
  font-size:14px;
  font-weight:800;
  color:var(--text)
}
.tool span {
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.55
}
.tool:hover span {
  color:var(--text-2)
}
@media (max-width:900px) {
  .tool-grid {
    grid-template-columns:1fr 1fr
  }
}
@media (max-width:600px) {
  /* 🔴 2026-10-21：这里原来退成 **1 列** —— 六格竖排 540px 高，
     手机首屏（844）只露得出 4 格，「常用入口」有一半要滚一下才看见，
     与「手机端也要显示完整信息」直接冲突（§3.6）。
     改回 2 列：每格约 168px，标题 4 字 + 图标放得下，描述自然折 2–3 行，
     总高 3 行 ≈ 330px → 首屏六格全露。
     内边距与字号各收一档，保证 360 宽的小屏也不挤（判据：phone-android 360×800）。 */
  .tool-grid {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .tool {
    padding:12px
  }
  .tool b {
    font-size:13.5px
  }
  .tool span {
    font-size:11.5px;
    line-height:1.45
  }
}
.bnav {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:12px;
  align-items:start
}
.bnav-cal {
  align-self:stretch
}
.bnav-t {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:15px 16px;
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-l1,10px);
  transition:border-color .18s ease,background .18s ease,transform .18s ease
}
.bnav-t:hover {
  background:var(--ink-3);
  border-color:var(--brand-2);
  transform:translateY(-1px)
}
.bnav-t.on {
  background:linear-gradient(180deg,rgba(255,224,0,.07),rgba(255,224,0,.02));
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,224,0,.18) inset
}
.bnav-cal {
  grid-column:1;
  grid-row:1 / span 2
}
.bnav-meta {
  grid-column:2;
  grid-row:1
}
.bnav-decks {
  grid-column:2;
  grid-row:2
}
.bnav-hd {
  display:flex;
  align-items:center;
  gap:11px
}
.bnav-i {
  flex:none;
  font-size:21px;
  line-height:1
}
.bnav-b {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px
}
.bnav-b b {
  font-size:15px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.01em
}
.bnav-b>span {
  font-size:12px;
  color:var(--text-3);
  line-height:1.5
}
.bnav-t:hover .bnav-b>span {
  color:var(--text-2)
}
.bnav-cur {
  position:absolute;
  top:9px;
  right:10px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  color: var(--gold-ink);
  background:rgba(255,224,0,.12);
  border:1px solid rgba(255,224,0,.32);
  border-radius:99px;
  padding:1px 7px
}
.bnav-pv {
  display:block;
  flex:1 1 auto;
  min-height:0
}
.bnav-pv-hd {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:12px;
  color:var(--text-3)
}
.bnav-pv-hd .num {
  color: var(--gold-ink);
  font-weight:800
}
.bnav-pv-hd .bnav-pv-sub {
  margin-left:auto;
  font-size:11.5px
}
.bnav-pv-hd .bnav-pv-none {
  color:var(--text-2)
}
.bnav-tiles {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  flex:1 1 auto
}
.bnav-cal .bnav-pv {
  display:flex;
  flex-direction:column;
  gap:8px
}
.bnav-tile {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  min-height:104px;
  border-radius:10px;
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.bnav-tile-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
  display:block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)
}
.bnav-tile:hover .bnav-tile-img {
  transform:scale(1.05)
}
.bnav-tile::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,0) 40%,rgba(20,20,20,.34) 62%,rgba(20,20,20,.78) 84%,rgba(20,20,20,.95) 100%)
}
.bnav-tile.now {
  border-color:var(--gold)
}
.bnav-tile-b {
  position:relative;
  z-index:1;
  padding:0 11px 10px;
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0
}
.bnav-tile-d {
  font:800 12px ui-monospace,Menlo,Consolas,monospace;
  color: var(--gold-ink);
  text-shadow:0 1px 3px rgba(0,0,0,.95)
}
.bnav-tile-t {
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.bnav-tile-k {
  position:absolute;
  z-index:2;
  top:8px;
  right:8px;
  padding:2px 7px;
  border-radius:6px;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px)
}
.bnav-bn {
  display:flex;
  flex-direction:column;
  gap:7px
}
.bnav-chip {
  position:absolute;
  z-index:2;
  top:8px;
  left:9px;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px)
}
.bnav-decks .bnav-pv,.bnav-meta .bnav-pv {
  flex:1 1 auto;
  min-height:0;
  overflow:hidden
}
.bnav-split {
  height:100%;
  min-height:0
}
.bnav-meta,.bnav-decks {
  height:178px;
  overflow:hidden
}
@media (max-width:820px) {
  .bnav-meta,.bnav-decks {
    height:auto
  }
}
.bnav-bn-img {
  position:relative;
  display:block;
  height:96px;
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-2)
}
.bnav-bn-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  display:block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)
}
.bnav-t:hover .bnav-bn-photo {
  transform:scale(1.05)
}
.bnav-bn-img::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,0) 42%,rgba(20,20,20,.38) 66%,rgba(20,20,20,.82) 86%,rgba(20,20,20,.96) 100%)
}
@media (max-width:820px) {
  .bnav-bn-img {
    height:84px
  }
}
.bnav-bn-img::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.38) 58%,rgba(10,10,10,.12) 100%)
}
.bnav-bn-t {
  position:absolute;
  z-index:1;
  left:10px;
  right:10px;
  bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}
.bnav-bn-t b {
  font-size:15px;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)
}
.bnav-bg {
  padding:1px 7px;
  border-radius:99px;
  font-size:10.5px;
  color:var(--text-2);
  background:rgba(20,20,20,.78);
  border:1px solid var(--ink-4)
}
.bnav-bg.gold {
  color: var(--gold-ink);
  background:rgba(255,224,0,.16);
  border-color:rgba(255,224,0,.42)
}
.bnav-bn-m {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:11.5px;
  color:var(--text-3)
}
.bnav-bn-m>span {
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.bnav-bn-m .mono {
  color:var(--text-2);
  margin-right:5px
}
.bnav-bn-m .num {
  color: var(--gold-ink);
  font-weight:700
}
.bnav-bn.empty .bnav-bn-img {
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 9px,transparent 9px 18px);
  border:1px dashed var(--ink-4)
}
.bnav-bn-plus {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:var(--text-3)
}
.bnav-pv-empty {
  display:block;
  font-size:12px;
  color:var(--text-3);
  line-height:1.7
}
@media (max-width:820px) {
  .bnav {
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:18px
  }
  .bnav-cal,.bnav-meta,.bnav-decks {
    grid-column:1;
    grid-row:auto
  }
  .bnav-t {
    padding:13px 14px
  }
  .bnav-i {
    font-size:19px
  }
  .bnav-pv-deck .th {
    width:46px;
    height:62px
  }
}
.rct-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.rct {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-l1,10px);
  transition:border-color .18s ease,background .18s ease
}
.rct:hover {
  background:var(--ink-3);
  border-color:var(--brand-2)
}
.rct-cov {
  flex:none;
  width:42px;
  height:42px;
  border-radius:8px;
  overflow:hidden;
  background:var(--ink-3)
}
.rct-cov img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.rct-i {
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px
}
.rct-i b {
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.rct-i span {
  font-size:11.5px;
  color:var(--text-3);
  display:flex;
  align-items:center;
  gap:4px
}
.rct-i .cls-ico {
  width:13px;
  height:13px;
  vertical-align:-2px
}
.rct-i .num {
  color: var(--gold-ink);
  font-weight:700
}
.rct-go {
  flex:none;
  font-size:11.5px;
  color:var(--text-3)
}
.rct:hover .rct-go {
  color: var(--gold-ink)
}
.rct-empty {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 18px;
  background:var(--ink-2);
  border:1px dashed var(--ink-4);
  border-radius:var(--r-l1,10px)
}
.rct-empty b {
  font-size:13.5px;
  color:var(--text-2)
}
.rct-empty span {
  flex:1 1 260px;
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.7
}
@media (max-width:900px) {
  .rct-strip {
    grid-template-columns:1fr 1fr
  }
}
@media (max-width:680px) {
  .rct-strip {
    grid-template-columns:1fr
  }
}
.rulespage .sec-hd {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap
}
.rulespage .sec-hd h2 {
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text)
}
.rulespage .sec-hd .sub {
  font-size:12.5px;
  color:var(--text-3)
}
.rulespage .sec-hd .more {
  margin-left:auto;
  font-size:12.5px;
  color:var(--text-3)
}
.rulespage .sec-hd .more:hover {
  color: var(--gold-ink)
}
.rulespage .note {
  padding:12px 16px;
  border-radius:var(--r-l1);
  font-size:12.5px;
  line-height:1.9;
  color:var(--text-3);
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--blue)
}
.rulespage .note b {
  color:var(--blue)
}
.rulespage .wh-hint {
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.7;
  margin-top:12px
}
.rguide-hd {
  font-size:14.5px;
  color:var(--text);
  font-weight:600;
  margin:0 0 10px
}
.rguide-hd span {
  font-size:12px;
  color:var(--text-3);
  font-weight:400;
  margin-left:8px
}
.rguide {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:11px;
  margin:0 0 18px
}
.rgi {
  padding:13px 15px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2);
  display:flex;
  flex-direction:column
}
.rgi .rg-i {
  font-size:18px;
  line-height:1;
  margin-bottom:8px
}
.rgi>b {
  display:block;
  font-size:14px;
  color:var(--text);
  line-height:1.5;
  margin-bottom:6px
}
.rgi>p {
  margin:0;
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.75;
  flex:1 1 auto
}
.rg-goes {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px
}
.rg-go {
  font:inherit;
  font-size:12px;
  line-height:1.5;
  color: var(--gold-ink);
  padding:5px 12px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
  background:rgba(255,224,0,.14);
  border:1px solid rgba(255,224,0,.42);
  cursor:pointer
}
.rg-go:hover {
  background:rgba(255,224,0,.28);
  border-color:var(--gold)
}
.rpg-hd {
  font-size:14.5px;
  color:var(--text);
  font-weight:600;
  margin:22px 0 11px
}
.rpg-hd span {
  font-size:12px;
  color:var(--text-3);
  font-weight:400;
  margin-left:8px
}
.rpgs {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  gap:11px
}
.rpg {
  display:flex;
  flex-direction:column;
  padding:14px 16px;
  border-radius:var(--r-panel);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2);
  text-decoration:none;
  transition:border-color .15s,transform .15s
}
.rpg:hover {
  border-color:var(--gold);
  transform:translateY(-1px)
}
.rpg-i {
  font-size:20px;
  line-height:1;
  margin-bottom:8px
}
.rpg>b {
  display:block;
  font-size:15px;
  color:var(--text);
  line-height:1.4;
  margin-bottom:6px
}
.rpg>p {
  margin:0;
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.75;
  flex:1 1 auto
}
.rpg-secs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px
}
.rpg-secs i {
  font-style:normal;
  font-size:11.5px;
  color:var(--text-2);
  padding:3px 9px;
  border-radius:999px;
  background:var(--ink-4)
}
.rpg-go {
  display:block;
  margin-top:11px;
  font-size:12px;
  color: var(--gold-ink);
  font-weight:600
}
.rpnav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:22px
}
.rpnav-a {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:13px 16px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  text-decoration:none;
  transition:border-color .15s
}
.rpnav-a:hover {
  border-color:var(--gold)
}
.rpnav-a span {
  font-size:11.5px;
  color:var(--text-3)
}
.rpnav-a b {
  font-size:13.5px;
  color:var(--text)
}
.rpnav-a.next {
  text-align:right;
  align-items:flex-end
}
.rpnav-a.off {
  border:0;
  background:transparent
}
.rulespage .toc {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 4px
}
.rulespage .toc button {
  font-size:12.5px;
  color:var(--text-2);
  padding:5px 12px;
  border-radius:999px;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  cursor:pointer;
  font-family:inherit
}
.rulespage .toc button:hover {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.rkeys {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:11px
}
.rkey {
  padding:13px 15px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--gold)
}
.rkey>b {
  display:block;
  font-size:21px;
  font-weight:600;
  color: var(--gold-ink);
  line-height:1.25
}
.rkey>span {
  display:block;
  font-size:12.5px;
  color:var(--text-3);
  line-height:1.7;
  margin-top:4px
}
.rblk {
  margin-top:18px;
  border:1px solid var(--ink-4);
  border-radius:var(--r-panel);
  background:var(--ink-2);
  overflow:hidden
}
.rblk-hd {
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 18px;
  background:var(--ink-3);
  border-bottom:1px solid var(--ink-4)
}
.rblk-hd h3 {
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--text)
}
.rblk-hd .rsrc {
  font-size:11.5px;
  color:var(--text-3);
  margin-left:auto
}
.rblk-hd .rsrc b {
  color:var(--brand-2);
  font-weight:600
}
.rblk-bd {
  padding:16px 18px;
  font-size:13.5px;
  color:var(--text-2);
  line-height:2
}
.rblk-bd>p {
  margin:0 0 11px
}
.rblk-bd>p:last-child {
  margin-bottom:0
}
.rblk-bd b {
  color:var(--text)
}
.rblk-bd .wh-hint {
  font-size:12.5px;
  line-height:1.9
}
@keyframes rflash {
  0% {
    box-shadow:0 0 0 0 rgba(255,224,0,.55)
  }
  100% {
    box-shadow:0 0 0 6px rgba(255,224,0,0)
  }
}
.rblk.rflash {
  border-color:var(--gold);
  animation:rflash .9s ease-out 1
}
.rulespage .rtbl {
  width:100%;
  border-collapse:collapse;
  font-size:13.5px
}
.rulespage .rtbl th {
  text-align:left;
  font-weight:600;
  color:var(--text-3);
  font-size:12.5px;
  padding:9px 12px;
  border-bottom:1px solid var(--ink-4);
  white-space:nowrap
}
.rulespage .rtbl td {
  padding:11px 12px;
  border-bottom:1px solid var(--ink-3);
  vertical-align:top;
  line-height:1.85
}
.rulespage .rtbl tr:last-child td {
  border-bottom:0
}
.rulespage .rtbl td.lb {
  white-space:nowrap;
  color:var(--text-3);
  font-size:13px;
  width:96px
}
.rulespage .rktbl .kw-n {
  white-space:nowrap;
  color:var(--text);
  font-weight:600;
  font-size:13.5px;
  width:92px
}
.rulespage .rktbl .kw-o {
  white-space:nowrap;
  color:var(--brand-2);
  font-size:12.5px;
  width:146px
}
/* 2026-10-25 店主：「图片太大了！你可以缩小点，然后把解释性文字放在图片右边」。
   原来是 100% 通栏大图 + 图注压在下面：一张 16:9 的规则示意图铺满 1136，
   一屏只放得下一张图，说明文字还被挤到图外，读的时候视线要来回跳。
   现在：图固定占左侧（最宽 440），说明文字在右，垂直居中偏上。
   该改的是**版式**不是图片本身 —— 图仍是原文件，只是不再被拉满。 */
.rfig {
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin:0 0 18px;
  padding:14px;
  border:1px solid var(--ink-4);
  border-radius:14px;
  background:var(--ink-2);
}
.rfig img {
  display:block;
  flex:0 0 auto;
  width:min(42%, 440px);
  height:auto;
  border-radius:10px;
  border:1px solid var(--ink-4);
  background:var(--ink-3)
}
.rfig.narrow {
  display:flex;
  flex-direction:column;
  align-items:center
}
.rfig.narrow img { width:auto; max-width:300px; }
.rfig.narrow img {
  max-width:300px
}
.rfig.narrow figcaption {
  max-width:440px;
  text-align:center
}
.rfig figcaption {
  flex:1 1 auto;
  min-width:0;
  margin:0;                    /* 2026-10-25：改成右栏后不再需要上边距 */
  font-size:12.5px;
  line-height:1.9;
  color:var(--text-2)          /* 从 --text-3 提一档：它现在是正文位，不是小字注解 */
}
.rfig figcaption b {
  color:var(--text-2)
}
@media (max-width:720px) {
  /* 2026-10-25：窄屏回到「上图下文」（左右排会把两者都挤成一条） */
  .rfig { flex-direction:column; gap:10px; padding:10px; }
  .rfig img { width:100%; max-width:none; }
  .rfig img {
    border-radius:8px
  }
  .rfig.narrow img {
    max-width:240px
  }
}
.rlg {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin:16px 0 18px;
  padding:0;
  list-style:none
}
.rlg li {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px 11px;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:10px
}
.rlg-n {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:12px;
  font-weight:800;
  line-height:1;
  color: var(--on-accent);
  background:var(--gold)
}
.rlg-b {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto
}
.rlg-t {
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  color:var(--text)
}
.rlg-d {
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-2)
}
.rlg-d b {
  color:var(--text)
}
.rlg-c {
  flex:none;
  padding-top:1px;
  font-size:11px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums
}
@media (max-width:720px) {
  .rlg {
    grid-template-columns:1fr;
    gap:6px
  }
}
.rzones {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}
.rzone {
  padding:11px 13px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.rzone b {
  display:block;
  font-size:13.5px;
  margin-bottom:4px
}
.rzone span {
  font-size:12px;
  color:var(--text-3);
  line-height:1.75
}
.rtl {
  display:flex;
  flex-direction:column
}
.rtl-i {
  display:flex;
  gap:13px;
  padding-bottom:16px
}
.rtl-i:last-child {
  padding-bottom:0
}
.rtl-n {
  flex:0 0 auto;
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--gold);
  color: var(--on-accent);
  font-size:12.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px
}
.rtl-b {
  flex:1 1 auto;
  min-width:0
}
/* 🔴 2026-10-25 店主：「这些界面的文字这么乱？」——
   原来这条是 `.rtl-b>b`（**所有**直接子 b），它假设"rtl-b 里第一个 b 是步骤标题"。
   但「战斗与伤害」那四步的正文里满是强调用的 <b>（纵置（未行动）/ 对方主战者 / 已横置（已行动）…），
   于是每一个强调都变成 display:block 各占一行 —— 一句话被切成七八行，看着像乱码。
   改法：**只认带 .rtl-t 的标题**（data/rules.js 里那 4 处已加类），强调永远留在行内。 */
.rtl-b>b.rtl-t {
  display:block;
  font-size:14px;
  color:var(--text);
  margin-bottom:6px
}
/* 步骤正文本身：行高与上下间距统一（原来没有规则，靠浏览器默认，紧贴上一行） */
.rtl-b { font-size:13.5px; line-height:1.85; color:var(--text-2) }
.rtl-b b { color:var(--text) }
.rtl-b ul {
  margin:0;
  padding-left:18px
}
.rtl-b li {
  font-size:13px;
  color:var(--text-2);
  line-height:1.95
}
.rtl-b li b {
  color:var(--text)
}
.gsteps {
  display:flex;
  flex-direction:column;
  gap:13px
}
.gsteps-hint {
  margin:0 0 10px;
  font-size:12px;
  color:var(--text-3)
}
.gsteps-hint b {
  color: var(--gold-ink)
}
.gstep {
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  gap:0 13px;
  padding:14px 15px;
  border-radius:var(--r-l1);
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.gstep-n {
  grid-row:1 / span 3;
  width:26px;
  height:26px;
  margin-top:1px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12.5px;
  font-weight:800;
  line-height:1;
  color: var(--on-accent);
  background:var(--gold)
}
.gstep-hd {
  display:flex;
  align-items:baseline;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:8px
}
.gstep-hd>b {
  font-size:14.5px;
  font-weight:800;
  color:var(--text)
}
.gstep-c {
  font-size:10.5px;
  color:var(--text-3);
  padding:1px 7px;
  border-radius:999px;
  border:1px solid var(--ink-4);
  font-variant-numeric:tabular-nums
}
.gstep-bd {
  font-size:13px;
  line-height:1.9;
  color:var(--text-2)
}
.gstep-bd b {
  color:var(--text)
}
.gstep-bd>p {
  margin:0 0 9px
}
.gstep-bd>p:last-child {
  margin-bottom:0
}
.gfig {
  margin:0
}
.gfig-bd {
  max-width:880px;
  border-radius:10px;
  overflow:hidden;
  background:#0b111b;
  border:1px solid var(--ink-4);

  /* 🔴 图内文字一律按**深色主题**取色（2026-10-25，店主：「白色主题很多字看不清」）。
     这块的底是写死的卡垫深色 #0b111b，但里面的字用的是主题 token ——
     浅色主题下 `--text` 是近黑(43,40,35)，压上去只有 **1.29 对比度**，
     「主战者 ×1 / 决定职业 / 起手 4 张 / 胜负的 20→0 / 回合结束提示」全都看不见。
     全站扫描（图内逐元素算 WCAG）实测这一类共 **30 处**。
     在容器上把这几个 token 重置成深色主题的值，是**一处修完所有**的做法：
     逐个元素写 color 的话，以后新增一屏又会漏。
     ⚠️ 只重置"文字/语义色"，不碰 `--ink-*`（那是页面底色，图里不用它）；
        也不影响 `.gfig figcaption`（它在 `.gfig-bd` 之外，跟着页面主题走）。 */
  --text: #F5F5F0;
  --text-2: #C9C5BD;
  --text-3: #918C83;
  --gold-ink: #FFE000;
  --red: #E5484D;
  --green: #2EA860;
}
.gfig figcaption {
  margin-top:7px;
  font-size:11.5px;
  line-height:1.85;
  color:var(--text-3)
}
.gfig figcaption b {
  color:var(--text-2)
}

/* ══ 可播放示意图（2026-10-25「给每个窗口都加这个」）══════════════════════
   九个窗格全部可播放，结构：
     · `.gfig.gfig-anim[data-step="N"]` = 现在播到第 N 步（0 = 第 0 帧，什么都还没发生）；
     · 元素写 `data-reveal / data-draw / data-tap / data-untap / data-dim /
       data-ring-ok|bad = "第几步"`，到那一步 JS 给它加 `.is-shown`；
     · 收尾挂 `.is-done`（按钮变「重播」）。
   JS 只管时序，**视觉全在这个文件** —— 改时长/曲线不用碰脚本。
   判据：`_dev/_probe_guidefig_all.cjs`（九图逐步量，含"重播先归位"）+ 旧的单图版。 */

/* 播放条：按钮 + 当前步骤字幕 + 进度点 */
.gfig-bar {
  display: flex; align-items: center; gap: 10px;
  max-width: 880px; margin-top: 8px; padding: 7px 10px;
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: 10px;
}
.gfig-play {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 29px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--gold); background: rgba(255, 224, 0, .10);
  color: var(--gold-ink); font: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.gfig-play svg { width: 12px; height: 12px; flex: none; }
.gfig-play:hover { background: var(--gold); color: var(--on-accent); }
.gfig-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 当前步骤字幕（2026-10-25 店主：「字体还是不够明显」）
   原来 12.5px / 700 / 单行省略 —— 在一整块图下面显得像注释。
   现在 14.5px / 800 / 主文字色，并允许折两行：长句不再被省略号切掉关键词。 */
.gfig-cap {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; font-weight: 800; color: var(--text);
  line-height: 1.5; white-space: normal;
}
/* 步序 1/3：让人知道还有几步，也避免"播完没反应"的错觉 */
.gfig-step {
  flex: none; font-size: 12px; font-weight: 800; color: var(--text-3);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.gfig-step b { color: var(--gold-ink); font-weight: 900; }
.gfig-step i { font-style: normal; }

/* 手机（≤560）：播放条只有 ~290 宽，一行塞「按钮 + 字幕 + 1/3 + 三点」会把字幕挤成
   三行、每行五六个字。改成两行 —— 第一行按钮 + 步序 + 点，字幕独占第二行整宽。 */
@media (max-width: 560px) {
  .gfig-bar { flex-wrap: wrap; gap: 8px 10px; padding: 9px 11px; }
  .gfig-cap { order: 3; flex: 1 0 100%; font-size: 14px; line-height: 1.55; }
  .gfig-dots { margin-left: auto; }
  .gfig-play { height: 31px; }
}
.gfig-dots { flex: none; display: flex; gap: 5px; }
.gfig-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transition: background .2s; }
.gfig-dot.on { background: var(--gold); }

/* ── 分步动画的初始态 / 终态（2026-10-25 第三次，九个窗格通用）──────────
   元素在 HTML 里用 `data-reveal / data-draw / data-tap / data-untap / data-dim /
   data-ring-ok / data-ring-bad = "第几步"` 声明，JS 到那一步给它加 `.is-shown`。
   这样九个窗格**共用一套规则** —— 加一屏只写数据，不写 CSS。
   `--gd` 是同一步里多张卡的错峰延迟（`style="--gd:.12s"`）。 */

/* 出现：淡入 + 上浮 12px */
.gfig-anim [data-reveal] {
  opacity: 0;
  transition: opacity .42s ease var(--gd, 0s),
              transform .52s cubic-bezier(.22, .61, .36, 1) var(--gd, 0s);
}
/* ⚠️ `.gc-tag` 自己带 `translateX(-50%)`（居中）——
   它只做透明度，不动 transform，否则标签会偏半个身位。 */
.gfig-anim [data-reveal]:not(.gc-tag) { transform: translateY(12px) scale(.96); }
.gfig-anim [data-reveal].is-shown { opacity: 1; }
.gfig-anim [data-reveal]:not(.gc-tag).is-shown { transform: none; }

/* 箭头「画出来」：pathLength="1000" 见 guidefig.js 的 arrow() */
.gfig-anim .gm-ar[data-draw] {
  stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0;
  transition: stroke-dashoffset 1.05s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.gfig-anim .gm-ar[data-draw].is-shown { stroke-dashoffset: 0; opacity: 1; }

/* 横置 / 转回竖置：0.7s + ease-out，看得出"转"这个过程，不是啪一下 */
.gfig-anim .gcard[data-tap] { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.gfig-anim .gcard[data-tap].is-shown { transform: rotate(90deg) scale(.85); }
.gfig-anim .gcard[data-untap] {
  transform: rotate(90deg) scale(.85);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.gfig-anim .gcard[data-untap].is-shown { transform: none; }

/* 变灰：**只灰卡图**。压整个卡会把"被破坏"标签一起灰掉，那三个字要能读 */
.gfig-anim .gcard[data-dim] > img { transition: opacity .5s ease, filter .5s ease; }
.gfig-anim .gcard[data-dim].is-shown > img { opacity: .34; filter: grayscale(.9); }

/* 绿框 / 红框：第 N 步才出现（第 0 帧不该有框） */
.gfig-anim .gcard[data-ring-ok], .gfig-anim .gcard[data-ring-bad] { box-shadow: none; }
.gfig-anim .gcard[data-ring-ok].is-shown { box-shadow: 0 0 0 3px #3ddc84, 0 4px 12px rgba(61, 220, 132, .35); }
.gfig-anim .gcard[data-ring-bad].is-shown { box-shadow: 0 0 0 3px #ff5d5d, 0 4px 12px rgba(255, 93, 93, .3); }

/* 兜底：示意图里万一还残留全站入场动画的 `mv-reveal`，一律放回可见 ——
   guidefig.js 的分步动画用 `data-reveal` + `.is-shown`，两套不要叠在同一个元素上。
   `:not([data-reveal])` 是关键：带 data-reveal 的卡归窗格管，别在这里抢。 */
.gfig .mv-reveal:not([data-reveal]) { opacity: 1 !important; transform: none !important; }

/* 站点总闸关掉动效时：全部瞬切（不要用 prefers-reduced-motion 判，
   店主那台 PC 系统就关着动画 —— 见 MEMORY 里那条反复踩过的坑） */
html.mv-off .gfig-anim [data-reveal],
html.mv-off .gfig-anim .gm-ar[data-draw],
html.mv-off .gfig-anim .gcard[data-tap],
html.mv-off .gfig-anim .gcard[data-untap],
html.mv-off .gfig-anim .gcard[data-dim] > img { transition: none !important; }
.gscene {
  display:flex;
  flex-direction:column
}
.gm-hand,.ghand-only {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  background:#0d1421
}
.gm-hand {
  position:absolute;
  left:0;
  top:70%;
  z-index:1;
  width:100%;
  padding:0 0 0 7%;
  background:transparent;
  gap:7px
}
.gm-tag {
  flex:none;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.5px;
  color:#93a4bd
}
.gm-slots {
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-height:20px
}
.gm-none {
  font-size:11px;
  color:var(--text-3)
}
.gm-mine {
  position:relative;
  aspect-ratio:5669 / 4333;
  background-size:100% 100%;
  background-repeat:no-repeat
}
.gm-foe,.gm-field {
  position:absolute;
  left:0;
  width:100%;
  padding-left:4%;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px
}
.gm-foe {
  top:1.5%
}
.gm-field {
  top:28%
}
.gm-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5
}
.gm-ar {
  fill:none;
  stroke:#ff6b6b;
  stroke-width:30;
  stroke-linecap:round;
  stroke-linejoin:round
}
.gm-ar.bad {
  stroke:#ff6b6b
}
.gm-ar.ok {
  stroke:#3ddc84
}
.gm-ar.gold {
  stroke:#ffd23f
}
.gm-ar.dash {
  stroke-dasharray:80 46
}
.gm-tag.foe,.gm-tag.mine,.gm-tag.hand {
  position:absolute;
  left:7%;
  font-size:10px;
  color:#9fb3cc
}
.gm-tag.foe {
  top:1.5%
}
.gm-tag.mine {
  top:25.5%
}
.gm-tag.hand {
  top:67.5%
}
.gm-pile {
  position:absolute;
  left:var(--px);
  top:var(--py);
  width:11.5%
}
.gm-pile-t {
  display:none
}
.gm-note {
  position:absolute;
  left:var(--nx);
  top:var(--ny);
  /* 56% → 48%：字号从 13 涨到 15 之后，56% 的宽度会压到垫子右侧的牌组 / 主战者卡
     （实测「出牌」那一屏把牌组盖掉一角）。48% 放得下同样的句子，且不越界。 */
  max-width:48%;
  /* 2026-10-25 店主：「字体还是不够明显」—— 13px/常规字重压在垫子的深蓝上，
     缩到手机宽度后几乎读不清。现在 15px + 700 + 更实的底、更亮的描边。 */
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  color:#ffe98a;
  background:rgba(5,9,17,.94);
  padding:7px 13px;
  border-radius:9px;
  border:1px solid rgba(255,224,0,.62);
  box-shadow:0 3px 14px rgba(0,0,0,.6)
}
.gm-hnote {
  flex:none;
  font-size:10px;
  color:var(--text-3)
}
.gm-hnote b {
  color: var(--gold-ink)
}
.gslot {
  position:relative;
  display:block;
  flex:none;
  width:11.5%;
  aspect-ratio:400 / 558;
  border-radius:4px;
  border:1px dashed rgba(255,255,255,.13)
}
.gm-foe .gslot,.gm-field .gslot {
  width:11.5%
}
.gm-pile .gslot {
  width:100%
}
.gslot.filled {
  border-color:transparent
}
.gslot:has(.gcard) {
  border-color:transparent
}
.gcard {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  transition:transform .15s
}
.gcard img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.gcard[data-card] {
  cursor:pointer
}
.gcard[data-card]:hover,.gcard[data-card]:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:1px
}
.gcard[data-card]:hover img {
  filter:brightness(1.12)
}
.gcard.act {
  transform:rotate(90deg) scale(.85)
}
.gcard.dim {
  opacity:.45;
  filter:grayscale(.8)
}
.gc-tag {
  position:absolute;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  font-size:8px;
  line-height:1.25;
  white-space:nowrap;
  color:#fff;
  background:rgba(0,0,0,.62);
  border-radius:3px;
  padding:0 3px
}
.gc-tag.below {
  top:calc(100% +2px);
  bottom:auto
}
.gcard.back {
  box-shadow:0 2px 6px rgba(0,0,0,.45)
}
/* 2026-10-25：下方标签已经从 `.gcard` 里搬到 `.gslot`（见 guidefig.js 的 card()）——
   这样它既不会被 `.gcard` 的 overflow 裁掉，也不会跟着横置的卡一起转 90°。
   这里只需要把字号抬一档：标签压在深蓝垫子上，8px 太小。 */
.gc-tag.below { font-size: 9.5px; padding: 1px 4px; white-space: nowrap; }

/* 🔴 说明框里的 `<b>` 必须显式给亮色（2026-10-25 实测：浅色主题下它继承到
   rgb(43,40,35) 近黑，压在 rgba(5,9,17,.94) 的深色框上，等于看不见 ——
   「下方弧形箭头＝**横置**」那个关键词整块消失）。
   这类"深色底上的字"一律不要靠继承：底是写死的深色，字也要写死亮色。 */
.gm-note b,
.gm-note strong { color: #fff5c2; font-weight: 800; }

.gcard.stacked::before,.gcard.stacked::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:4px;
  z-index:-1;
  background:inherit
}
.gcard.stacked {
  overflow:visible
}
.gcard.stacked::before {
  background:#101722;
  border:1px solid #2c3648;
  transform:translate(3px,3px)
}
.gcard.stacked::after {
  background:#0c121b;
  border:1px solid #232c3b;
  transform:translate(6px,6px)
}
.gcard.stacked img {
  border-radius:4px
}
.gpiles {
  display:flex;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
  padding:14px 16px 6px
}
.gpile {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px
}
.gpile .gslot {
  width:58px
}
.gpile>b {
  font-size:11.5px;
  color:var(--text)
}
.gpile>span {
  font-size:10.5px;
  color:var(--text-3)
}
.gpile-note {
  flex:1 1 100%;
  margin-top:4px;
  font-size:11px;
  color:var(--text-3)
}
.gpile-note b {
  color: var(--gold-ink)
}
.gmull {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 16px
}
.gmull-hand {
  display:flex;
  align-items:center;
  gap:8px
}
.gmull-hand .gslot {
  width:58px
}
.gmull-hand em {
  font-style:normal;
  margin-left:6px;
  font-size:11px;
  color:var(--text-3)
}
.gmull-pick {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}
.gmull-b {
  font-size:11px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--ink-4)
}
.gmull-b.ok {
  color:var(--green);
  border-color:rgba(46,168,96,.5);
  background:rgba(46,168,96,.08)
}
.gmull-b.no {
  color:#ff8f8f;
  border-color:rgba(255,143,143,.45);
  background:rgba(255,143,143,.07)
}
.gmull-or {
  font-size:11px;
  color:var(--text-3)
}
.gmull-ep {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--text-3)
}
.gmull-ep b {
  color:var(--text)
}
.ghand-only {
  gap:12px;
  padding:12px 14px
}
.ghand-only .gm-slots {
  gap:6px
}
.gwin {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px
}
.gwin-i {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  color:var(--text-3)
}
.gwin-i .gslot {
  width:40px
}
.gwin-num {
  font-size:16px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums
}
.gwin-num.zero {
  color:var(--red)
}
.gwin-ar {
  color: var(--gold-ink)
}
.gwin-deck,.gwin-x {
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--ink-4)
}
.gwin-x {
  color:#ff8f8f;
  border-color:rgba(255,143,143,.4)
}
.gwin-i em {
  font-style:normal;
  color:var(--text-2)
}
@media (max-width:720px) {
  .gfig-bd {
    overflow-x:auto
  }
  .gscene {
    min-width:560px
  }
  .gstep {
    grid-template-columns:24px minmax(0,1fr);
    gap:0 10px;
    padding:12px 12px
  }
  .gstep-n {
    width:23px;
    height:23px;
    font-size:11.5px
  }
  .gm-tag {
    width:24px;
    font-size:9px
  }
  .gm-foe,.gm-hand,.ghand-only {
    padding:6px 7px;
    gap:5px
  }
  .gm-slots {
    gap:4px
  }
  .gm-note {
    font-size:13px;
    font-weight:700;
    padding:5px 10px
  }
  .gpile .gslot,.gmull-hand .gslot,.gwin-i .gslot {
    width:44px
  }
}
.rq {
  margin:0 0 11px;
  padding:13px 15px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.rq:last-child {
  margin-bottom:0
}
.rq .q {
  font-size:13.5px;
  font-weight:600;
  color: var(--gold-ink);
  margin-bottom:6px;
  line-height:1.7
}
.rq .a {
  font-size:13px;
  color:var(--text-2);
  line-height:1.95
}
.rq .a b {
  color:var(--text)
}
.rq-hd {
  display:flex;
  align-items:center;
  gap:9px;
  margin:18px 0 10px;
  font-size:12.5px;
  color:var(--text-3);
  letter-spacing:.4px
}
.rq-hd::after {
  content:'';
  flex:1 1 auto;
  height:1px;
  background:var(--ink-4)
}
.rq-hd:first-child {
  margin-top:0
}
.blgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px
}
.blcard {
  display:block;
  text-decoration:none;
  overflow:hidden;
  border-radius:12px;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--ink-4);
  transition:border-color .15s,transform .15s
}
.blcard.ban {
  border-left-color:var(--red)
}
.blcard.lim {
  border-left-color:var(--gold)
}
.blcard:hover {
  border-color:var(--gold);
  transform:translateY(-2px)
}
.blc-art {
  position:relative;
  display:block;
  aspect-ratio:400 / 558;
  background:var(--ink-3)
}
.blc-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}
.blc-badge {
  position:absolute;
  left:8px;
  top:8px;
  padding:2px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em
}
.blcard.ban .blc-badge {
  /* 2026-10-24：原 var(--red)=#E5484D 上压白字只有 3.9:1；底压深一档到 6.2:1，色相不变 */
  background:#C0343A;
  color:#fff
}
.blcard.lim .blc-badge {
  background:var(--gold);
  color: var(--on-accent)
}
.blc-bd {
  display:block;
  padding:8px 10px 9px
}
.blc-n {
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.blc-nos {
  display:block;
  margin-top:2px;
  font-size:10.5px;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
/* 禁限卡脚注（2026-10-22 用户：「文字说明不够有辨识性，而且有大量无用信息。
   真正的禁止限制卡表需要出现的因素有：1.改动方向。2.实施日期」）
   —— 原来是 .blc-from 一行灰字（「曾限 1 张 · 2026-01-02 解除」），方向和日期混在一句话里、
   颜色与编号一样灰。现在拆成两块：方向 = 带色块（禁红 / 限金 / 解除绿），日期 = 等宽数字。
   颜色语言与左侧 3px 色条、卡角徽章完全一致，扫一眼就知道是"变严"还是"放宽"。 */
.blc-meta {
  display:flex;
  flex-wrap:wrap;          /* 手机上卡片只有 118px 宽，「限 1 张 + 日期」放不下时让日期掉一行，别顶出框 */
  align-items:center;
  gap:2px 6px;
  margin-top:4px;
  line-height:1.5
}
.blc-dir {
  flex:none;
  padding:1px 7px;
  border-radius:5px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap
}
.blcard.ban .blc-dir {
  background:rgba(220,60,72,.16);
  color:#FF8B96
}
.blcard.lim .blc-dir {
  background:rgba(255,224,0,.15);
  color: var(--gold-ink)
}
.blcard.rel .blc-dir {
  background:rgba(64,190,120,.16);
  color:#6FD79B
}
.blc-date {
  font-size:10.5px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
@media (max-width:720px) {
  .blgrid {
    grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
    gap:8px
  }
  .blc-n {
    font-size:12px
  }
}
.begsteps {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:11px
}
.begstep {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 15px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.begstep .bs-n {
  flex:0 0 auto;
  width:23px;
  height:23px;
  border-radius:50%;
  background:var(--gold);
  color: var(--on-accent);
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center
}
.begstep .bs-t {
  font-size:13.5px;
  color:var(--text-2);
  line-height:1.8
}
.rsrcs {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:11px
}
.rsrc-i {
  display:flex;
  flex-direction:column;
  padding:12px 14px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2)
}
.rsrc-i b {
  display:block;
  font-size:13.5px;
  color:var(--text);
  margin-bottom:4px
}
.rsrc-i>span {
  display:block;
  font-size:12px;
  color:var(--text-3);
  line-height:1.7
}
.rsrc-maps {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  margin-top:10px;
  flex:1 1 auto
}
.rsrc-maps em {
  font-style:normal;
  font-size:11px;
  color:var(--text-3);
  letter-spacing:.3px;
  margin-right:1px
}
.rsrc-go {
  font:inherit;
  font-size:12px;
  color:var(--brand-2);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(184,147,46,.12);
  border:1px solid rgba(184,147,46,.42);
  cursor:pointer
}
.rsrc-go:hover {
  border-color:var(--gold);
  color: var(--gold-ink);
  background:rgba(255,224,0,.16)
}
.rsrc-i .mono {
  display:block;
  font-size:11.5px;
  color:var(--text-3);
  word-break:break-all;
  margin-top:10px;
  padding-top:9px;
  border-top:1px dashed var(--ink-4);
  text-decoration:none
}
.rsrc-i .mono:hover {
  color:var(--brand-2)
}
@media (max-width:820px) {
  .rzones {
    grid-template-columns:1fr 1fr
  }
  .rpnav {
    grid-template-columns:1fr
  }
  .rpnav-a.next {
    text-align:left;
    align-items:flex-start
  }
  .blrow {
    flex-wrap:wrap
  }
  .bl-cards {
    margin-left:0;
    width:100%
  }
}
.setpage .setgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:12px
}
.setpage .setcard {
  display:block;
  padding:14px 16px;
  border-radius:var(--r-l1);
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-left:3px solid transparent;
  text-decoration:none;
  transition:transform .12s,border-color .12s
}
.setpage .setcard:hover {
  border-color:var(--brand-2);
  border-left-color:var(--gold);
  transform:translateY(-1px)
}
.setpage .setcard .sc-img {
  position:relative;
  /* 2026-10-23 店主：「把卡图展示区域做大一点」——
     5:2 太扁（三张卡挤成一条），改成 16:9 并把图撑到 96%。 */
  aspect-ratio:4 / 3;      /* 2026-10-25：文字并成一行后，把省下的高度给图（原 16:9） */
  border-radius:7px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  margin-bottom:11px
}
.setpage .setcard .sc-img.sc-stack {
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(72% 82% at 50% 26%,var(--ink-4) 0%,var(--ink-3) 74%)
}
.setpage .setcard .sc-img.sc-stack>img {
  width:auto;
  height:96%;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 6px 15px rgba(0,0,0,.55);
  margin-left:-18px
}
.setpage .setcard .sc-img.sc-stack>img:first-child {
  margin-left:0
}
.setpage .setcard .sc-img.sc-stack>img:nth-child(1) {
  transform:rotate(-6deg) translate(-4%,6%)
}
.setpage .setcard .sc-img.sc-stack>img:nth-child(2) {
  transform:translateY(-5%);
  position:relative;
  z-index:3
}
.setpage .setcard .sc-img.sc-stack>img:nth-child(3) {
  transform:rotate(6deg) translate(4%,6%)
}
.setpage .setcard .sc-tag {
  position:absolute;
  right:6px;
  bottom:6px;
  z-index:4;
  font-size:10px;
  line-height:1.6;
  background:rgba(20,20,20,.84);
  color:var(--text-3);
  padding:1px 7px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.09)
}
.setpage .setcard .sc-blank {
  display:flex;
  align-items:center;
  justify-content:center
}
.setpage .setcard .sc-blank span {
  font-size:11.5px;
  color:var(--text-3)
}
.setpage .setcard .sc-t {
  display:flex;
  align-items:center;
  gap:8px
}
/* 2026-10-25：编号 / 年份 / 系列名**挤到同一行**（店主：把框选的东西移到系列名那一行）。
   以前是两行文字（.sc-t 一行、.sc-n 一行），白占约 26px 高；现在一行，
   省下的高度给图片（.sc-img 从 16:9 提到 4:3）。 */
.setpage .setcard .sc-row {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0
}
.setpage .setcard .sc-row .sc-n {
  margin-top:0;
  flex:1 1 auto;
  min-width:0
}
.setpage .setcard .sc-t b {
  font-size:14px;
  color: var(--gold-ink)
}
.setpage .setcard .sc-n {
  font-size:13.5px;
  font-weight:600;
  margin-top:7px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.setpage .setcard .sc-j {
  font-size:11px;
  color:var(--text-3);
  margin-top:3px;
  line-height:1.45;
  height:2.9em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.setpage .setcard .sc-f {  /* 2026-10-23 起不再渲染（店主要删「共 X 张」），留着兜旧缓存 */
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--ink-3);
  font-size:11.5px;
  color:var(--text-3)
}
.setpage .sec {
  margin:30px 0
}
.setpage .sec:first-of-type {
  margin-top:22px
}
.setpage .sec-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  flex-wrap:wrap
}
@media (max-width:900px) {
  .setpage .setgrid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media (max-width:560px) {
  .setpage .setgrid {
    grid-template-columns:1fr
  }
}
.bnav-my {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.mynav {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:126px;
  padding:14px 16px;
  border-radius:var(--r-l1);
  text-decoration:none;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  transition:border-color .18s ease,background .18s ease,transform .18s ease
}
.mynav:hover {
  background:var(--ink-3);
  border-color:var(--brand-2);
  transform:translateY(-1px)
}
.mynav.on {
  background:linear-gradient(180deg,rgba(255,224,0,.07),rgba(255,224,0,.02));
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,224,0,.18) inset
}
.mynav-hd {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.mynav-i {
  flex:none;
  font-size:20px;
  line-height:1
}
.mynav-b {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px
}
.mynav-b b {
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.01em
}
.mynav-b>span {
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.5
}
.mynav-pv {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0
}
.mynav-num {
  font-size:12.5px;
  color:var(--text-2)
}
.mynav-num b {
  font-size:19px;
  font-weight:800;
  color: var(--gold-ink);
  margin-right:3px
}
.mynav-num i {
  font-style:normal;
  font-size:11.5px;
  color:var(--text-3)
}
.mynav-tag {
  align-self:flex-start;
  font-size:11px;
  padding:1px 8px;
  border-radius:99px;
  color: var(--gold-ink);
  background:rgba(255,224,0,.12);
  border:1px solid rgba(255,224,0,.32)
}
/* 2026-10-26 店主：「这里的字我是真的看不清楚」——
   这几格（我的卡组 / 我的收藏 / 持有明细…）的说明行原来是 11.5px + `--text-3`，
   在白卡上只有 5:1 出头、又小，一眼扫不到。抬到 12.5px + `--text-2`（≈7:1）。 */
.mynav-hint {
  font-size:12.5px;
  color:var(--text-2)
}
.mynav-bar {
  display:block;
  height:5px;
  border-radius:99px;
  background:var(--ink-4);
  overflow:hidden
}
.mynav-bar i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--gold))
}
.mynav-split {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.mynav-split-t {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px
}
.mynav-split-t b {
  font-size:15px;
  font-weight:800;
  /* 🔴 原来写死 `#fff` —— 那是"深色色块"时代的遗产。现在这几格是**白卡**，
     浅色主题下就是白底白字（对比度 1.0，等于没有这张卡组的名字）。
     走 token：浅色主题给近黑、深色主题给近白。 */
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
/* 同一条说明行：11.5 → 12.5px，`--text-3` → `--text-2`（店主圈的就是这行） */
.mynav-split-t span {
  font-size:12.5px;
  color:var(--text-2)
}
.mynav-img {
  flex:0 0 auto;
  width:46px;
  height:64px;
  border-radius:5px;
  object-fit:cover;
  object-position:center 16%;
  border:1px solid var(--ink-4)
}
.profile-card {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:20px 22px;
  border-radius:var(--r-panel);
  background:linear-gradient(135deg,rgba(184,147,46,.10),transparent 62%),var(--ink-2);
  border:1px solid var(--ink-4)
}
.pf-ava {
  flex:none;
  width:68px;
  height:68px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:800;
  color: var(--on-accent);
  background:linear-gradient(140deg,var(--gold),var(--brand-2));
  border:2px solid rgba(255,224,0,.38);
  padding:0;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s,transform .15s
}
.pf-ava:hover {
  border-color:var(--gold);
  transform:scale(1.03)
}
.pf-ava:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px
}
.pf-ava img {
  width:100%;
  height:100%;
  object-fit:cover
}
.pf-title-btn {
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  line-height:0;
  border-radius:6px;
  transition:opacity .15s
}
.pf-title-btn:hover {
  opacity:.82
}
.pf-title-btn:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px
}
.pf-title-empty {
  display:inline-block;
  padding:3px 10px;
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-3);
  background:var(--ink-3);
  border:1px dashed var(--ink-4);
  border-radius:99px
}
.pf-main {
  flex:1 1 240px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px
}
.pf-name {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
/* 资料卡里的手机号行（2026-10-25）：一行细胶囊，和名字同一列但不抢视觉。
   未绑定用虚线（"还缺一步"），已绑定用实线 + 金色动作字。 */
.pf-phone {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  border:1px dashed var(--ink-4);
  border-radius:999px;
  background:transparent;
  font:inherit;
  font-size:11.5px;
  color:var(--text-3);
  cursor:pointer;
  transition:border-color .16s, color .16s, background .16s
}
.pf-phone:hover {
  border-color:rgba(255,224,0,.62);
  color:var(--gold);
  background:rgba(255,224,0,.05)
}
.pf-phone.on { border-style:solid; border-color:var(--ink-4) }
.pf-phone b { font-size:11.5px; font-weight:700; color:var(--text-2); letter-spacing:.02em }
.pf-phone-a { font-style:normal; color:var(--gold-ink) }
.pf-name b {
  font-size:20px;
  font-weight:800;
  color:var(--text);
  letter-spacing:.01em
}
/* 名字旁那支笔（2026-10-27）：注册不再问昵称，改名入口只能落在这里。
   做成"安静的小图标"而不是一颗按钮 —— 它是低频动作，不该和等级/称号抢位置；
   悬停/聚焦才显金色，触屏上给到 32px 才点得准。 */
.pf-nick {
  flex:none;
  width:26px;
  height:26px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--ink-4);
  border-radius:7px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s
}
.pf-nick svg { width:15px; height:15px; display:block }
.pf-nick:hover, .pf-nick:focus-visible {
  color:var(--gold-ink);
  border-color:rgba(255,224,0,.55);
  background:rgba(255,224,0,.06)
}
@media (hover:none) {
  .pf-nick { width:32px; height:32px }
  .pf-nick svg { width:17px; height:17px }
}
.pf-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px
}
.pf-s {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  text-decoration:none;
  transition:border-color .15s
}
.pf-s:hover {
  border-color:var(--gold)
}
.pf-s span {
  font-size:11.5px;
  color:var(--text-3)
}
.pf-s b {
  font-size:16px;
  font-weight:800;
  color:var(--text)
}
.pf-s b.y {
  color: var(--gold-ink)
}
.pf-acts {
  flex:1 1 100%;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:2px
}
/* 资料卡底部那排入口（2026-10-23）：我的预定 / 我的回收 / 我的地址。
   原来是九宫格里三张卡，用户要求「移回上面」—— 挂在这里每页都能点到。
   「退出登录」用 margin-left:auto 推到右端，和这三颗入口分开（一个是单据、一个是出口）。 */
.pf-quick {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:0
}
.pf-q {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
  text-decoration:none;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  transition:border-color .15s,color .15s,background .15s
}
.pf-q:hover {
  color: var(--gold-ink);
  border-color:rgba(255,224,0,.45);
  background:rgba(255,224,0,.05)
}
.pf-q.on {
  color: var(--gold-ink);
  border-color:rgba(255,224,0,.55);
  background:rgba(255,224,0,.09)
}
.pf-q-i { font-size:12px; line-height:1 }
.pf-acts #pfLogout { margin-left:auto }
.mygrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px
}
.mycard {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:15px 17px;
  border-radius:var(--r-l1);
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2);
  text-decoration:none;
  transition:border-color .15s ease,transform .15s ease
}
.mycard:hover {
  border-color:var(--gold);
  transform:translateY(-1px)
}
.mycard b {
  font-size:14.5px;
  font-weight:800;
  color:var(--text)
}
.mycard span {
  font-size:12px;
  color:var(--text-3);
  line-height:1.7
}
.dex-top {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px
}
.dex-pct {
  font-size:30px;
  font-weight:800;
  color: var(--gold-ink);
  line-height:1
}
.dex-meter {
  flex:1 1 260px;
  min-width:200px
}
.dex-meter-bar {
  height:10px;
  border-radius:99px;
  background:var(--ink-4);
  overflow:hidden
}
.dex-meter-bar i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--gold))
}
.dex-meter-t {
  font-size:12px;
  color:var(--text-3);
  margin-top:6px
}
.dex-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px
}
.dex-set {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:11px 13px;
  border-radius:var(--r-l1);
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.dex-set-hd {
  display:flex;
  align-items:baseline;
  gap:8px
}
.dex-set-hd b {
  font-size:12.5px;
  color: var(--gold-ink)
}
.dex-set-hd span {
  font-size:11.5px;
  color:var(--text-3);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.dex-set-n {
  font-size:11.5px;
  color:var(--text-2)
}
.dex-set-n b {
  color: var(--gold-ink);
  font-weight:800
}
.dex-set.full {
  border-color:rgba(255,224,0,.38)
}
.dex-open {
  margin-top:12px
}
.dex-add {
  position:relative;
  margin-bottom:16px
}
.dex-q {
  width:100%;
  box-sizing:border-box;
  padding:10px 13px;
  font:inherit;
  font-size:13.5px;
  color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:var(--r-l1)
}
.dex-q:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,224,0,.14)
}
.dex-q::placeholder {
  color:var(--text-3)
}
.dex-hits {
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:30;
  margin-top:6px;
  max-height:320px;
  overflow-y:auto;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:var(--r-l1);
  box-shadow:0 12px 28px rgba(0,0,0,.5)
}
.dex-hit {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 12px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink-4);
  color:inherit
}
.dex-hit:last-child {
  border-bottom:0
}
.dex-hit:hover {
  background:var(--ink-4)
}
.dex-hit-img {
  flex:none;
  width:26px;
  height:36px;
  border-radius:3px;
  overflow:hidden;
  background:var(--ink-2)
}
.dex-hit-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
  display:block
}
.dex-hit-n {
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.dex-hit-no {
  flex:none;
  font-size:11px;
  color:var(--text-3)
}
.dex-hit-c {
  flex:none;
  font-size:12px;
  font-weight:700;
  color: var(--gold-ink)
}
@media (max-width:900px) {
  .bnav-my {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media (max-width:560px) {
  .bnav-my {
    grid-template-columns:1fr
  }
}
.ck-quote {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px 13px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.ck-note {
  font-size:12px;
  color:var(--text-3);
  line-height:1.7
}
.ck-note b {
  color:var(--text-2)
}
.ck-warn {
  font-size:12px;
  color:var(--red);
  line-height:1.8
}
/* ── 结算付款面板（2026-10-26 购物车改假码收款）───────────────────────
   金额压在最上面（先看钱再扫码），二维码居中固定 200px（SVE.QR.svg 出来的
   SVG 没有尺寸，不给宽高会撑满整块弹窗）。 */
.pay-bd {
  display:grid;
  gap:12px;
  justify-items:center;
  padding:18px 22px 4px;
  text-align:center
}
.pay-amt {
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  color:var(--gold-ink);
  letter-spacing:.01em
}
.pay-qr {
  width:208px;
  height:208px;
  padding:8px;
  border-radius:10px;
  background:#fff;
  display:grid;
  place-items:center
}
.pay-qr svg {
  width:100%;
  height:100%;
  display:block
}
.pay-no {
  font-size:11.5px;
  color:var(--text-3);
  letter-spacing:.04em
}
.ck-warn b {
  color:var(--red);
  font-weight:700
}
.md-bar {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px
}
.md-stat {
  display:flex;
  gap:16px;
  font-size:13px;
  color:var(--text-2)
}
.md-stat b {
  font-size:17px;
  font-weight:800;
  color: var(--gold-ink);
  margin:0 2px
}
.md-bar .btn {
  margin-left:auto
}
.md-bar .btn[disabled] {
  opacity:.45;
  cursor:not-allowed
}
.md-cap {
  margin:-6px 0 14px;
  font-size:12px;
  color:var(--orange)
}
.md-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:12px
}
.md-card {
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:var(--r-l1);
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.md-card.pub {
  border-color:rgba(255,224,0,.34)
}
.md-art {
  position:relative;
  flex:none;
  width:68px;
  height:92px;
  border-radius:6px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.md-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
  display:block
}
.md-pub {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  font-size:10px;
  line-height:1.7;
  color: var(--on-accent);
  background:var(--gold);
  font-weight:700
}
.md-bd {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px
}
.md-name {
  font-size:14.5px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.md-meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:11.5px;
  color:var(--text-3)
}
.md-meta .badge {
  font-size:11px;
  padding:1px 7px;
  border-radius:99px;
  background:var(--ink-4);
  color:var(--text-2)
}
.md-errs {
  font-size:11.5px;
  color:var(--orange);
  line-height:1.6
}
.md-acts {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:auto
}
#mdMask {
  position:fixed;
  inset:0;
  z-index:400;
  overflow-y:auto;
  padding:24px;
  background:rgba(0,0,0,.68)
}
#mdMask[hidden] {
  display:none
}
.md-panel {
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-panel);
  overflow:hidden
}
.md-p-hd {
  display:flex;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--ink-4)
}
.md-p-hd b {
  font-size:15px;
  color:var(--text)
}
.md-x {
  margin-left:auto;
  background:transparent;
  border:0;
  color:var(--text-3);
  font-size:15px;
  cursor:pointer
}
.md-x:hover {
  color: var(--gold-ink)
}
.md-p-bd {
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.md-f {
  display:flex;
  flex-direction:column;
  gap:5px
}
.md-f>span {
  font-size:12px;
  color:var(--text-3)
}
.md-f input,.md-f select,.md-f textarea {
  font:inherit;
  font-size:13.5px;
  padding:8px 11px;
  color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:8px
}
.md-f textarea {
  font-family:var(--mono,monospace);
  resize:vertical;
  line-height:1.7
}
.md-f input:focus,.md-f select:focus,.md-f textarea:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,224,0,.14)
}
.md-msg {
  min-height:18px;
  font-size:12.5px;
  color:var(--text-3)
}
.md-msg.bad {
  color:var(--red)
}
.md-p-ft {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 18px;
  border-top:1px solid var(--ink-4)
}
@media (max-width:560px) {
  .md-grid {
    grid-template-columns:1fr
  }
}
.md-acts .btn {
  padding:4px 10px;
  font-size:12px;
  border-radius:7px
}
.md-acts .btn[disabled] {
  opacity:.45;
  cursor:not-allowed
}
.md-pv-meta {
  margin-left:10px;
  font-size:11.5px;
  color:var(--text-3)
}
.md-pv-bd {
  max-height:62vh;
  overflow-y:auto
}
.md-pv-cost {
  margin-bottom:12px;
  padding:9px 12px;
  font-size:12.5px;
  color:var(--text-3);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:var(--r-l1)
}
.md-pv-cost b {
  color: var(--gold-ink);
  font-size:16px;
  font-weight:800
}
.md-pv-cost span {
  color:var(--text-3)
}
.md-pv-note {
  padding:10px 12px;
  margin-bottom:12px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-2);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2);
  border-radius:var(--r-l1);
  white-space:pre-wrap
}
.md-pv-hd {
  margin:14px 0 8px;
  font-size:12px;
  color:var(--text-3);
  letter-spacing:.04em
}
.md-pv-hd:first-child {
  margin-top:0
}
.md-pv-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--ink-3)
}
.md-pv-row:last-child {
  border-bottom:0
}
.md-pv-img {
  flex:none;
  width:26px;
  height:36px;
  border-radius:3px;
  overflow:hidden;
  background:var(--ink-3)
}
.md-pv-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 16%;
  display:block
}
.md-pv-n {
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.md-pv-no {
  flex:none;
  font-size:11px;
  color:var(--text-3)
}
.md-pv-c {
  flex:none;
  font-size:12.5px;
  font-weight:700;
  color: var(--gold-ink)
}
.dex-bar {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px
}
/* 系列方块（2026-10-21：原来的下拉 .dex-sel 换成方块，一块一个系列 + 进度条）*/
.dex-sets {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:9px;
  margin:0 0 14px;
  max-height:308px;
  overflow:auto;
  padding-right:2px
}
.dex-sb {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:9px 11px;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:10px;
  transition:border-color .12s, box-shadow .12s, background .12s
}
.dex-sb:hover {
  border-color:rgba(255,224,0,.45)
}
.dex-sb.on {
  border-color:var(--gold);
  background:var(--ink-3);
  box-shadow:0 0 0 2px rgba(255,224,0,.18)
}
.dex-sb-hd {
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0
}
.dex-sb-hd b {
  flex:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  color: var(--gold-ink)
}
.dex-sb-hd span {
  font-size:11.5px;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.dex-sb-bar {
  display:block;
  height:4px;
  border-radius:3px;
  overflow:hidden;
  background:var(--ink-4)
}
.dex-sb-bar i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--brand-2),var(--gold))
}
.dex-sb-n {
  display:flex;
  align-items:baseline;
  gap:3px;
  font-size:11px;
  color:var(--text-3)
}
.dex-sb-n b {
  font-size:12.5px;
  color:var(--text)
}
.dex-sb-n em {
  font-style:normal;
  opacity:.5
}
.dex-sb-pct {
  margin-left:auto;
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color: var(--gold-ink)
}
@media (max-width:720px) {
  .dex-sets { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); max-height:264px; }
}
.dex-setname {
  font-size:13px;
  color:var(--text-2)
}
.dex-prog {
  margin-left:auto;
  font-size:12.5px;
  color:var(--text-3)
}
.dex-prog b {
  color: var(--gold-ink);
  font-size:15px;
  font-weight:800;
  margin:0 2px
}
.dex-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  gap:8px
}
.dex-cell {
  position:relative;
  display:block;
  border-radius:5px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  aspect-ratio:63 / 88
}
.dex-cell img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.dex-cell:not(.on) img {
  filter:grayscale(1) brightness(.42)
}
.dex-cell:not(.on) {
  border-color:var(--ink-3)
}
.dex-cell.on {
  border-color:rgba(255,224,0,.42)
}
.dex-cell:hover {
  border-color:var(--gold)
}
.dex-cell:hover img {
  filter:none
}
.dex-cnt {
  position:absolute;
  right:2px;
  bottom:2px;
  min-width:15px;
  padding:0 4px;
  font-size:10.5px;
  font-weight:800;
  line-height:15px;
  text-align:center;
  color: var(--on-accent);
  background:var(--gold);
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.5)
}
@media (max-width:560px) {
  .dex-cards {
    grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
    gap:6px
  }
}
.ed {
  width:100%;
  /* 2026-10-26 店主：「编辑卡组界面的窗口要变大，不能按照我的窗口界面大小来打开」——
     它在「专属窗口」的 iframe 里，能长多大取决于外壳宽度（.psheet-box 1080）。
     外壳已被 pagesheet.js 的 setWide() 临时放到 1440（见 .psheet-wide），
     这里同步把上限放到 1400 —— 两处都改才有用，只改一处还是 1030。 */
  max-width:1400px;
  margin:0 auto;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-panel);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 48px)
}
/* ── 打开动画（2026-10-26 店主：「我点击编辑和看卡表的时候是没有窗口打开动画的，要加上」）
   `#mdMask` 靠 `hidden` 切换显隐，`[hidden]{display:none}` → 再显示时 CSS 动画会**重新开始**，
   所以这里不需要 JS 加类。遮罩淡入 + 面板"从桌上抬起"（复用 motion.css ④ 的 mv-lift，
   与全站其它弹窗同一套节奏：200ms 遮罩 / 320ms 面板）。
   ⚠️ 只动 opacity 与 transform，且 `.ed` 里没有 fixed 后代（卡详情浮层是挂到 body 的）。 */
#mdMask { animation: mv-fade var(--mv-2) var(--mv-ease) both; }
#mdMask .ed { animation: mv-lift var(--mv-3) var(--mv-ease) both; }

/* ── 满窗形态（2026-10-26 店主：「你把这个外框删了，只显示这些内容」）──────────
   由 mydecks.html 的 edSheetWide() 在**外壳真的加宽时**给 <html> 挂 `ed-wide`：
   遮罩的 24px 留白与深色底一起去掉，编辑器铺满整个窗口 —— 外面那圈标题栏与
   边框由父文档的 `.psheet-wide` 收掉（见 brand-page.css 里 .psheet-wide 段）。
   不挂这个类时（单独打开本页 / 手机 ≤900）保持原来的居中卡片，一个像素不变。 */
html.ed-wide #mdMask { padding: 0; background: transparent; }
html.ed-wide .ed {
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 0;
}
.ed-hd {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 16px;
  border-bottom:1px solid var(--ink-4);
  flex:none
}
.ed-hd>b {
  font-size:15px;
  color:var(--text)
}
.ed-name {
  flex:0 1 220px;
  min-width:140px
}
.ed-clsbtn {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font:inherit;
  font-size:13.5px;
  padding:4px 10px 4px 6px;
  color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:8px
}
.ed-imp {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:34px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--ink-4);
  background:var(--ink-3);
  color:var(--text-2);
  font:600 12.5px/1 var(--font-sans,sans-serif);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s
}
.ed-imp:hover {
  border-color:var(--gold);
  color: var(--gold-ink);
  background:var(--ink-2)
}
@media (max-width:720px) {
  .ed-imp {
    padding:0 9px;
    font-size:12px
  }
}
.ed-clsbtn:hover {
  border-color:var(--gold)
}
.ed-clsbtn.on {
  border-color:var(--brand-2)
}
.ed-clsbtn-ic {
  flex:none;
  width:26px;
  height:26px;
  display:grid;
  place-items:center
}
.ed-clsbtn-ic img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}
.ed-clsbtn-ph {
  font-style:normal;
  font-size:13px;
  color:var(--text-3)
}
.ed-clsbtn-t {
  white-space:nowrap
}
.ed-clsbtn-a {
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.6
}
.ed-name,.ed-q {
  font:inherit;
  font-size:13.5px;
  padding:7px 11px;
  color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:8px
}
.ed-name:focus,.ed-q:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,224,0,.14)
}
.ed-cost {
  display:flex;
  gap:14px;
  margin-left:auto;
  font-size:12.5px;
  color:var(--text-3)
}
.ed-cost b {
  color: var(--gold-ink);
  font-size:14px;
  font-weight:800;
  margin:0 2px
}
.ed-bd {
  display:flex;
  min-height:0;
  flex:1 1 auto
}
.ed-l {
  flex:1 1 46%;
  min-width:0;
  padding:14px 16px;
  overflow-y:auto;
  border-right:1px solid var(--ink-4)
}
.ed-r {
  flex:1 1 54%;
  min-width:0;
  display:flex;
  flex-direction:column
}
.ed-pool-hd {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px 10px;
  flex:none
}
.ed-q {
  flex:1 1 auto;
  min-width:0
}
.ed-only {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12.5px;
  color:var(--text-3);
  white-space:nowrap;
  cursor:pointer
}
.ed-pool {
  flex:1 1 auto;
  min-height:200px;
  overflow-y:auto;
  padding:0 14px 14px;
  /* 2026-10-25 店主：「卡牌太小了，一行改成 8 个试试」。
     原来是 `repeat(auto-fill, 62px)`：列数随容器宽度漂（1440 下 9 列、1080 下 7 列），
     卡片永远 62×87，白瞎了卡池那 669px 宽。现在**固定 8 列**，每张约 73×102（+37% 面积）。
     🔴 用 **flex-wrap 而不是 grid**：grid 的 `fr` 列宽 + 按宽度算高度的 img 会形成
        「列宽→高度→行高→再次分配」的循环依赖，Chrome 会把行高退成 25px，
        结果卡片**行行重叠**（实测 grid-template-rows 全是 25.47px，卡高 101px）。
        flex 的行高由行内最高项决定，宽度已由 calc 定死，没有循环。 */
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-content:flex-start
}
/* 7 列：6 个 gap = 48px（gap 8）
   2026-10-26 店主：「这边展示 7 张卡图试试，感觉现在卡组图还是小了」——
   窗口加宽到 1440 之后卡池宽了，8 列反而把卡压回 73×102；7 列约 93×130（+30% 面积）。
   列数只改这一行，媒体查询里的 6 列 / 4 列（手机档）不动。 */
.ed-pool > .ed-pc { width:calc((100% - 48px) / 7); }
@media (max-width: 900px) {
  .ed-pool > .ed-pc { width:calc((100% - 40px) / 6); }    /* 6 列：5 个 gap = 40px */
}
@media (max-width: 620px) {
  .ed-pool > .ed-pc { width:calc((100% - 24px) / 4); }    /* 4 列：3 个 gap = 24px */
}
/* 空态 / 尾注 / 引导块在 flex 下要自己占满整行（原来靠 grid-column:1/-1） */
.ed-pool .ed-pool-empty,
.ed-pool .ed-pool-note,
.ed-pool .ed-more,
.ed-pool .ed-pool-gate { flex:0 0 100%; }
.ed-pool-empty,.ed-sec-empty {
  grid-column:1 / -1;
  padding:22px 8px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-3)
}
.ed-pc {
  position:relative;
  width:100%;
  height:auto;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  padding:0;
  display:block
}
/* 🔴 比例必须加在 **img** 上，不能加在 button 上（2026-10-25 踩到）：
   把 `aspect-ratio` 写在 button 上时，Chrome 给 grid 计算行高会退回到 button 的
   min-content（≈33px 文字行高），而卡片实际按宽度算出 102px —— 结果**行行重叠**，
   每次只挪 33px、卡图叠成一条条。img 是 replaced 元素，高度由宽度 + 比例算，
   grid 就能拿到正确的行高（实测 1440 下 73×102、行距 110）。 */
.ed-pc img {
  width:100%;
  height:auto;
  aspect-ratio:5 / 7;
  object-fit:cover;
  display:block
}
.ed-pc:hover {
  border-color:var(--gold)
}
.ed-pc.on {
  border-color:rgba(255,224,0,.55)
}
.ed-pool-note {
  grid-column:1 / -1;
  padding:6px 2px 8px;
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-3)
}
/* ── 卡池范围标（2026-10-25）──────────────────────────────────────────
   替代原来的「只看本职业」勾选框：职业已是硬约束，这里只把**当前池的范围与张数**写清楚。
   联动池用冷色边（◆）与职业池（◇）区分 —— 一眼看得出"这是联动弹，只有这一包的卡"。 */
.ed-scope {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:28px;
  padding:0 9px;
  border:1px solid var(--ink-4);
  border-radius:7px;
  background:var(--ink-2);
  font-size:11.5px;
  font-weight:700;
  color:var(--text-2);
  white-space:nowrap
}
.ed-scope:empty { display:none }
.ed-scope > i { font-style:normal; font-size:9px; line-height:1; color:var(--text-3) }
.ed-scope > b { font-size:11.5px; font-weight:800; color:var(--text-1) }
.ed-scope.collab { border-color:rgba(120,200,255,.34); color:#9ed6ff; background:rgba(120,200,255,.06) }
.ed-scope.collab > b { color:#9ed6ff }
/* 未选职业的空态：给一条能点的引导，而不是铺满全职业的卡 */
.ed-pool-gate {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:56px 12px 40px
}
.ed-pool-gate > b { font-size:14px; font-weight:700; color:var(--text-1) }
.ed-pool-gate > span { font-size:12px; color:var(--text-3) }
.ed-pool-gate .btn { margin-top:2px }
.ed-more { text-align:center; color:var(--text-3); cursor:default }
.ed-pc-n {
  position:absolute;
  right:2px;
  bottom:2px;
  min-width:15px;
  padding:0 4px;
  font-size:10.5px;
  font-weight:800;
  line-height:15px;
  text-align:center;
  color: var(--on-accent);
  background:var(--gold);
  border-radius:8px
}
.ed-lead {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  margin-bottom:12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2)
}
.ed-lead.empty {
  border-left-color:var(--ink-4)
}
.ed-lead-ph {
  flex:none;
  width:46px;
  height:64px;
  border-radius:5px;
  background:var(--ink-2);
  border:1px dashed var(--ink-4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:var(--text-3)
}
.ed-lead-img {
  flex:none;
  width:46px;
  height:64px;
  border-radius:5px;
  overflow:hidden;
  border:1px solid var(--ink-4)
}
.ed-lead-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
/* 2026-10-26：`.ed-lead-b` 这层包裹删了（它会多出一层 flex，名字与按钮没法排成
   一行同基线）。卡名直接是 `.ed-lead-nm`，样式见文件末尾的 `.ed-duo` 段。 */
.ed-lead-nm {
  font-size:14px;
  color:var(--text)
}
.ed-lead-note {
  color:var(--brand-2) !important
}
/* 主战者与职业不符（2026-10-25 店主：梦魇只能带梦魇主战者、联动只能带联动主战者）：
   左边条转红 + 名字压红 + 卡图去色，和牌表里「非本池」的行用同一套视觉语言，
   一眼看得出"这一格现在是错的"。 */
.ed-lead.off {
  border-left-color:var(--danger, #d9534f);
  border-color:rgba(217,83,79,.42)
}
.ed-lead.off .ed-lead-nm {
  color:#e3867f
}
.ed-lead.off .ed-lead-img img {
  filter:grayscale(1) brightness(.86)
}
.ed-lead-warn {
  color:#e3867f !important
}
.ed-lead-acts {
  flex:none;
  display:flex;
  gap:6px
}
.ed-note {
  padding:11px 13px;
  margin-bottom:12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2)
}
.ed-note-hd {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:8px
}
.ed-note-hd b {
  font-size:13px;
  color:var(--text)
}
.ed-note-hd span {
  font-size:11.5px;
  color:var(--text-3)
}
.ed-note textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:62px;
  max-height:190px;
  font:inherit;
  font-size:12.5px;
  line-height:1.65;
  padding:8px 10px;
  color:var(--text);
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:8px
}
.ed-note textarea::placeholder {
  color:var(--text-4,var(--text-3));
  opacity:.8
}
.ed-note textarea:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,224,0,.14)
}
.ed-note-ft {
  display:flex;
  justify-content:flex-end;
  margin-top:5px
}
.ed-note-n {
  font-size:11px;
  color:var(--text-3)
}
.ed-note-n b {
  color: var(--gold-ink);
  font-weight:700
}
.ed-cv-box {
  padding:11px 13px;
  margin-bottom:12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2)
}
.ed-cv-card {
  display:flex;
  align-items:flex-start;
  gap:12px
}
.ed-cv-preview {
  flex:none;
  /* 2026-10-26：封面块搬进「主战者 + 封面」双排后只剩半宽（约 300px），
     原来 `min(128px,34%)` 会算成 93px —— 原画看不清，也让 `_verify_deck_cover` ③d
     （预览必须 ≥120 的方形）变红。改成 48%：半宽时 131px，整行时仍是 128px 封顶。 */
  width:min(132px,48%);
  aspect-ratio:1 / 1;
  border-radius:8px;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.ed-cv-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block
}
.ed-cv-meta {
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width:0
}
.ed-cv-nm {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  max-width:100%
}
.ed-cv-nm b {
  font-size:13.5px;
  line-height:1.4;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.ed-cv-no {
  font-size:10.5px;
  color:var(--text-3)
}
/* 2026-10-26：「更换封面 ▾」文字按钮删了 —— 现在点封面图本身就是入口
   （`<button class="ed-cv-preview" data-ed="cvopen">`），那颗 ▾ 缩到图右下角当角标。 */
.ed-cv-caret {
  font-size:10px;
  line-height:1;
  transition:transform .15s
}
.ed-cv-pop {
  position:absolute;
  left:0;
  top:calc(100% +8px);
  z-index:40;
  width:min(380px,88vw);
  padding:10px;
  border-radius:10px;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  box-shadow:0 18px 40px rgba(0,0,0,.55)
}
.ed-cv-pop-hd {
  display:flex;
  align-items:center;
  margin-bottom:8px
}
.ed-cv-pop-hd b {
  font-size:12.5px;
  color:var(--text)
}
.ed-cv-x {
  margin-left:auto;
  appearance:none;
  cursor:pointer;
  font:inherit;
  width:24px;
  height:24px;
  border-radius:6px;
  font-size:11px;
  color:var(--text-3);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.ed-cv-x:hover {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.ed-cv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(40px,1fr));
  gap:5px;
  max-height:208px;
  overflow-y:auto;
  padding-right:2px
}
.ed-cv-t {
  position:relative;
  width:100%;
  aspect-ratio:5 / 7;
  padding:0;
  cursor:pointer;
  border-radius:4px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.ed-cv-t img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.ed-cv-t:hover {
  border-color:var(--gold)
}
.ed-cv-t.on {
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,224,0,.28)
}
.ed-cv-t.on::after {
  content:"✓";
  position:absolute;
  left:2px;
  top:0;
  font-size:10px;
  font-weight:800;
  color: var(--gold-ink);
  text-shadow:0 1px 3px #000
}
.ed-cv-t.evo::before {
  content:"进化";
  position:absolute;
  right:0;
  top:0;
  padding:0 2px;
  font-size:8px;
  line-height:11px;
  color: var(--on-accent);
  background:var(--brand-2)
}
.ed-cv-t.auto {
  display:flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:11px;
  color:var(--text-2);
  border-style:dashed
}
.ed-cv-t.auto.on {
  color: var(--on-accent);
  background:var(--gold);
  border-color:var(--gold);
  border-style:solid;
  font-weight:700
}
.ed-cv-t.auto.on::after {
  content:none
}
.ed-cv-flag {
  flex:none;
  font-size:10.5px;
  line-height:1.6;
  padding:1px 8px;
  border-radius:999px;
  color:var(--text-3);
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
@media (max-width:520px) {
  .ed-cv-preview {
    width:96px
  }
  .ed-cv-nm b {
    font-size:12.5px
  }
  .ed-cv-pop {
    width:min(320px,90vw)
  }
  .ed-cv-grid {
    max-height:168px;
    grid-template-columns:repeat(auto-fill,minmax(38px,1fr))
  }
}
.ed-chk {
  padding:10px 13px;
  margin-bottom:12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.ed-chk.bad {
  border-left:3px solid var(--red)
}
.ed-chk.warn {
  border-left:3px solid var(--orange)
}
.ed-chk.ok {
  border-left:3px solid var(--brand-2)
}
.ed-chk-t {
  font-size:13px
}
.ed-chk-t.bad {
  color:var(--red)
}
.ed-chk-t.warn {
  color:var(--orange)
}
.ed-chk-t.ok {
  color:var(--brand-2)
}
.ed-chk-b {
  margin-top:7px;
  display:flex;
  flex-direction:column;
  gap:4px
}
.ed-chk-r {
  font-size:12px;
  line-height:1.7
}
.ed-chk-r.bad {
  color:var(--red)
}
.ed-chk-r.warn {
  color:var(--orange)
}
.ed-sec {
  margin-bottom:12px;
  border-radius:var(--r-l1);
  border:1px solid var(--ink-4);
  background:var(--ink-2);
  overflow:hidden;
  cursor:pointer
}
.ed-sec.cur {
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(255,224,0,.16) inset;
  cursor:default
}
.ed-sec-hd {
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:9px 13px;
  background:var(--ink-3);
  border-bottom:1px solid var(--ink-4)
}
.ed-sec-hd>b {
  font-size:13.5px;
  color:var(--text)
}
.ed-n {
  font-size:12.5px;
  color:var(--text-3)
}
.ed-n.ok {
  color:var(--brand-2)
}
.ed-n.bad {
  color:var(--orange)
}
.ed-hint {
  margin-left:auto;
  font-size:11.5px;
  color:var(--text-3)
}
/* ── 牌表 = 卡图方块（2026-10-26 店主：「这个区域的卡牌展示也要改成按卡片样式并列」）
   与右边卡池同一套视觉：卡图 5:7 + 右上角「×N」胶囊 + 悬停浮出的 −/＋/×。
   为什么用 flex-wrap + calc 宽而不是 grid：卡图是"宽度定 → 按比例算高度"的 replaced
   元素，grid 的 `fr` 列会形成「列宽→高度→行高→再分配」的循环依赖（2026-10-25 实测
   整片卡行行重叠），flex 的行高由行内最高项决定，没有这个环。 */
.ed-cards {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px 12px
}
/* 6 列：5 个 gap = 40px（左栏 ~610px 时每张约 93×130，与卡池的 100×140 同量级） */
.ed-row {
  position:relative;
  width:calc((100% - 40px) / 6);
  display:flex;
  flex-direction:column;
  gap:5px;
  cursor:pointer
}
@media (max-width: 1300px) { .ed-row { width:calc((100% - 32px) / 5); } }  /* 5 列：4 个 gap */
@media (max-width: 1000px) { .ed-row { width:calc((100% - 24px) / 4); } }  /* 4 列：3 个 gap */
@media (max-width: 700px)  { .ed-row { width:calc((100% - 16px) / 3); } }  /* 3 列：2 个 gap */
/* 铺满整块的透明链接（点卡 = 开卡详情）。角标/胶囊都在它上面，不吃点击。 */
.ed-row-link {
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:8px
}
.ed-row-link:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.ed-row-img {
  position:relative;
  display:block;
  border-radius:7px;
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  transition:border-color .15s, transform .12s
}
.ed-row-img img {
  width:100%;
  height:auto;
  aspect-ratio:5 / 7;
  object-fit:cover;
  object-position:center 16%;
  display:block
}
.ed-row:hover .ed-row-img { border-color:var(--brand-2); transform:translateY(-1px); }
/* 张数胶囊：卡图右上角（原来在行尾） */
.ed-row-q {
  position:absolute;
  z-index:2;
  pointer-events:none;
  right:4px; top:4px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(20,20,20,.84);
  border:1px solid rgba(255,224,0,.45);
  font-size:11.5px;
  font-weight:800;
  line-height:1.5;
  color: var(--gold)
}
/* −/＋/× 浮层：悬停或键盘进入才出现，压在卡图下缘（不占版面高度） */
.ed-row-ops {
  position:absolute;
  z-index:3;
  left:4px; right:4px; bottom:4px;
  display:flex;
  justify-content:center;
  gap:4px;
  padding:3px;
  border-radius:6px;
  background:rgba(12,12,12,.82);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s
}
.ed-row:hover .ed-row-ops,
.ed-row:focus-within .ed-row-ops { opacity:1; pointer-events:auto; }
.ed-row-ops .ed-b { width:22px; height:22px; font-size:13px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#F5F5F0; }
.ed-row-ops .ed-b:hover { border-color:var(--gold); color:var(--gold); }
.ed-row-ops .ed-b.danger:hover { border-color:var(--red); color:#FF8B96; }
/* 触屏没有 hover：常显，且大一号（≥28px 才点得准） */
@media (hover: none) {
  .ed-row-ops { opacity:1; pointer-events:auto; }
  .ed-row-ops .ed-b { width:28px; height:28px; font-size:15px; }
}
/* 卡名：一行，超出省略（完整名字在 title 与卡详情里） */
.ed-row-n {
  font-size:11px;
  line-height:1.35;
  color:var(--text-2);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
/* 不在当前职业卡池里的卡（2026-10-25）：卡图去色 + 角标，只标记不删除 */
.ed-row.off .ed-row-img img { filter:grayscale(1) brightness(.8); }
.ed-row-off {
  position:absolute;
  z-index:2;
  left:4px; top:4px;
  font-style:normal;
  padding:0 4px;
  border-radius:4px;
  font-size:9.5px;
  line-height:14px;
  color:#ffd7d3;
  background:rgba(217,83,79,.78)
}
.ed-row.is-cover .ed-row-img {
  box-shadow:0 0 0 2px var(--gold);
  border-color:var(--gold)
}
.ed-row-cv {
  position:absolute;
  z-index:2;
  right:4px; bottom:4px;
  font-style:normal;
  padding:0 5px;
  border-radius:4px;
  font-size:9.5px;
  line-height:15px;
  color: var(--on-accent);
  background:var(--gold)
}
/* ── 左栏顶部三格：主战者 / 封面 / 卡组评估（2026-10-26 第四版）──────────────
   店主：「把这些东西删了，然后对齐，主战者和封面要尽可能让卡图显示得全面而且干净。」
   ---------------------------------------------------------------------------
   删：主战者那格的「更换 / 移除」、封面那格的「更换封面 ▾」、
       评估格里跟顶栏一模一样的「主 40 / 进化 10 / 造价 ¥1,571.44」。
   对齐：三格**等高**、两格卡图**同尺寸**、卡名统一一行居中 —— 三格下沿落在同一条线上。
        原来对不齐有两个原因：① 两个图格各带一排文字按钮，高度由文字撑；② 评估格
        因为有那三个数字而不等高。两处都去掉了，grid 的 stretch 才真正起作用。
   干净：容器 107×150 = 素材 400×559 的 5:7，配 `object-fit:contain` ——
        一个像素都不裁。原来封面是 1:1 方框 + cover，上下各切 15%（实测全部素材
        都是 400×559，那条"源图 286×284"的注释是错的）。
   功能没丢：点卡图 = 更换（图片本身就是 button，键盘可达），
        「移除」收成右上角 ✕，只在 hover / 聚焦时浮出。 */
.ed-duo {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.06fr);
  gap:10px;
  margin-bottom:12px;
  align-items:stretch
}
/* 再窄（≤1000，编辑器在半屏窗口里）就上下排：每格不足 160px 时卡名会碎成两行 */
@media (max-width: 1000px) { .ed-duo { grid-template-columns:1fr; } }

.ed-duo > * {
  position:relative;
  margin-bottom:0;
  padding:12px 10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  border:1px solid var(--ink-4);
  border-radius:12px;
  background:var(--ink-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)
}
/* 状态线从"左边 3px 竖条"改成"顶边 2px 横条"：
   竖条会占掉左侧 3px，三格的内宽因此各不相同（右沿也就对不齐）；
   横条不影响宽度，三格的卡图中心线完全一致。 */
/* 顶线只在"这一格有问题"时上色：三格默认同为灰，安静；
   出错那格亮红/橙。原来主战者默认是暗金顶线、评估格"通过"也是暗金，
   一排三条不同颜色的横线，看着像三种状态 —— 其实只是两张首页和一句结论。 */
.ed-duo > .ed-lead { border-left:1px solid var(--ink-4); border-top:2px solid var(--ink-4); }
.ed-duo > .ed-cv-box { border-left:1px solid var(--ink-4); border-top:2px solid var(--ink-4); }
.ed-duo > .ed-chk { border-left:1px solid var(--ink-4); border-top:2px solid var(--ink-4); }
.ed-duo > .ed-chk.ok { border-left:1px solid var(--ink-4); border-top:2px solid var(--ink-4); }
.ed-duo > .ed-chk.warn { border-left:1px solid var(--ink-4); border-top:2px solid var(--orange); }
.ed-duo > .ed-chk.bad { border-left:1px solid var(--ink-4); border-top:2px solid var(--red); }
.ed-duo > .ed-lead.off { border-left:1px solid var(--ink-4); border-top:2px solid var(--red); border-color:rgba(217,83,79,.42); }

/* ① 卡图：两格**同一个尺寸、同一个比例**（107×150 ≈ 5:7），一像素不裁 */
.ed-duo .ed-lead-img,
.ed-duo .ed-cv-preview {
  flex:none;
  width:107px;
  height:150px;
  aspect-ratio:auto;
  padding:0;
  display:block;
  border:1px solid var(--ink-4);
  border-radius:9px;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #1e222b, #0a0b0f 78%);
  cursor:pointer;
  position:relative;
  transition:border-color .16s, transform .16s
}
.ed-duo .ed-lead-img img,
.ed-duo .ed-cv-preview img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block
}
.ed-duo .ed-lead-img:hover,
.ed-duo .ed-cv-preview:hover {
  border-color:var(--brand-2);
  transform:translateY(-1px)
}
.ed-duo .ed-lead-img:focus-visible,
.ed-duo .ed-cv-preview:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px
}
/* 空态：虚线占位（原来那枚 46×64 的小框会缩在 107×150 里，得让它铺满） */
.ed-duo .ed-lead-img.ph { border-style:dashed; cursor:pointer }
.ed-duo .ed-lead-img.ph .ed-lead-ph {
  width:100%;
  height:100%;
  border:0;
  background:none;
  font-size:12px;
  color:var(--text-3)
}

/* ② 卡名：两格同字号、同一行、居中截断 —— 三格的下沿因此齐平 */
.ed-duo .ed-lead-nm,
.ed-duo .ed-cv-nm {
  display:block;
  flex:none;
  max-width:100%;
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--text);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* ③ 主战者的「移除」：悬浮在卡图右上角的圆形 ✕，静止时不占位 */
.ed-duo .ed-lead-acts {
  position:absolute;
  right:8px;
  top:8px;
  z-index:3;
  opacity:0;
  transition:opacity .14s
}
.ed-duo .ed-lead:hover .ed-lead-acts,
.ed-duo .ed-lead:focus-within .ed-lead-acts { opacity:1 }
.ed-lead-x {
  width:24px;
  height:24px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1;
  color:var(--text-2);
  background:rgba(8,9,12,.74);
  border:1px solid var(--ink-4);
  cursor:pointer;
  transition:border-color .14s, color .14s, background .14s
}
.ed-lead-x:hover {
  border-color:var(--red);
  color:#e3867f;
  background:rgba(217,83,79,.2)
}
/* 主战者不符职业时那半行红字：压小、居中，不许把格子撑成三行 */
.ed-duo .ed-lead-warn {
  flex:none;
  max-width:100%;
  font-size:11px;
  line-height:1.35;
  text-align:center;
  color:#e3867f
}

/* ④ 封面：右下角一枚 ▾，是"这张图可以点"的唯一暗示（可点区域=整张图） */
.ed-duo .ed-cv-card {
  flex-direction:column;
  align-items:center;
  gap:9px
}
.ed-duo .ed-cv-caret {
  position:absolute;
  right:6px;
  bottom:6px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:#fff;
  background:rgba(8,9,12,.72);
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none
}
/* 选封面的浮层挂到整格上（原来是挂在那颗窄按钮上的，按钮没了只能这样）：
   左右撑满格子，向下展开；`.ed-l` 是 overflow:auto，所以必须留在格内宽度里。 */
.ed-duo .ed-cv-pop {
  left:0;
  right:0;
  width:auto;
  top:calc(100% - 2px);
  z-index:60
}

/* ⑤ 卡组评估：一枚大标记 + 一句话，垂直居中（没有原因列表时也不会空半格） */
.ed-duo .ed-chk {
  justify-content:center;
  gap:6px;
  padding:14px 12px;
  text-align:center
}
.ed-chk-mark {
  font-size:26px;
  line-height:1;
  font-weight:800;
  color:var(--brand-2)
}
.ed-chk.warn .ed-chk-mark { color:var(--orange) }
.ed-chk.bad .ed-chk-mark { color:var(--red) }
.ed-duo .ed-chk-t { font-size:14px; font-weight:700 }
.ed-duo .ed-chk-b {
  width:100%;
  margin-top:2px;
  max-height:118px;
  overflow-y:auto;
  text-align:left
}

.ed-b {
  flex:none;
  width:24px;
  height:24px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  color:var(--text-2);
  padding:0
}
.ed-b:hover {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.ed-b.danger:hover {
  border-color:var(--red);
  color:var(--red)
}
.ed-b:disabled {
  opacity:.38;
  cursor:not-allowed
}
.ed-b:disabled:hover {
  border-color:var(--ink-4);
  color:var(--text-2)
}
.ed-mask {
  position:fixed;
  inset:0;
  z-index:500;
  overflow-y:auto;
  padding:24px;
  background:rgba(0,0,0,.72)
}
.ed-pick {
  width:100%;
  max-width:880px;
  margin:0 auto;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-panel);
  overflow:hidden
}
.ed-pick-hd {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--ink-4)
}
.ed-pick-hd>b {
  font-size:14.5px;
  color:var(--text)
}
.ed-pick-hd>span {
  font-size:12px;
  color:var(--brand-2);
  margin-left:auto
}
.ed-pick-bd {
  padding:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px
}
/* 主战者选择器的空态（2026-10-25）：职业卡池里没有主战者时给一句话，别留一块空网格 */
.ed-pick-empty {
  grid-column:1 / -1;
  padding:26px 10px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-3)
}
.ed-pick-c {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 6px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  cursor:pointer
}
.ed-pick-c:hover {
  border-color:var(--gold)
}
.ed-pick-c.on {
  border-color:var(--brand-2);
  background:rgba(184,147,46,.12)
}
.ed-pick-c img {
  width:100%;
  aspect-ratio:63 / 88;
  object-fit:cover;
  border-radius:4px;
  display:block
}
.ed-pick-c>span {
  font-size:11.5px;
  color:var(--text);
  text-align:center;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%
}
.ed-pick-c>i {
  font-style:normal;
  font-size:10.5px;
  color:var(--text-3)
}
.edcm-mask {
  z-index:560
}
.edcm {
  width:100%;
  max-width:460px;
  margin:0 auto;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-panel);
  overflow:hidden
}
.edcm-hd {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 13px;
  border-bottom:1px solid var(--ink-4)
}
.edcm-ht {
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-right:auto
}
.edcm-hd b {
  font-size:14.5px;
  color:var(--text)
}
.edcm-sub {
  font-size:11px;
  color:var(--text-3);
  line-height:1.45
}
.edcm-grid {
  padding:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}
.edcm-tile {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  background:var(--ink-3);
  border:2px solid transparent;
  border-radius:8px;
  transition:border-color .15s,transform .12s
}
.edcm-tile:hover {
  border-color:rgba(255,224,0,.55);
  transform:translateY(-2px);
  background:var(--ink-2)
}
.edcm-tile:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px
}
.edcm-tile.on {
  border-color:var(--gold);
  background:var(--ink-2)
}
.edcm-ic {
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:5 / 3;
  padding:7px;
  background:radial-gradient(circle at 50% 42%,var(--ink-4),var(--ink) 72%)
}
.edcm-ic img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))
}
.edcm-tick {
  position:absolute;
  top:4px;
  right:4px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold);
  color: var(--on-accent);
  font-size:10.5px;
  font-style:normal;
  font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.5)
}
.edcm-lb {
  display:block;
  padding:4px 4px;
  text-align:center;
  background-color:var(--cl,#3a3a3a);
  background-image:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.42));
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.edcm-tile.on .edcm-lb {
  background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.3))
}
@media (max-width:900px) {
  .ed-bd {
    flex-direction:column
  }
  .ed-l {
    border-right:0;
    border-bottom:1px solid var(--ink-4)
  }
  .ed-cost {
    margin-left:0
  }
}
.ed-fbtn {
  position:relative;
  flex:none
}
.ed-fbtn.on {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.ed-fbtn .cf-badge {
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:15px;
  padding:0 4px;
  font-size:10px;
  font-weight:800;
  line-height:15px;
  text-align:center;
  color: var(--on-accent);
  background:var(--gold);
  border-radius:8px
}
#cfMask {
  z-index:620
}
/* 概览区三列（2026-10-23 第四轮，店主画图说清的版式）：
     [主战者]  [卡组结构]        [📝 作者留言]
    (撑满高度) [费用曲线]       (撑满高度)
   —— 结构与曲线叠成一列后，横向省出来的位置正好收作者留言。

   🔴 第五轮修正（店主：「主战者头不能有黑色的框！！！！行高由主战者决定！！！！」）：
     1) 主战者**不要黑底**：之前 `.dk-lead{background:var(--ink-2)}` + 图 `height:100%`
        会把原画塞进固定高度的框里，上下留出黑色 letterbox —— 那两块黑不是"留白"，是丑。
     2) **行高由主战者图决定**：图按 411:576 原比例 `width:100%; height:auto`，
        列宽从 196 加到 264，图高 ≈ 370，正好把这一行撑起来；
        右列两块给 `min-height:0` 自适应，不再反向把行撑高。 */
.dk-insight {
  display:grid;
  grid-template-columns:212px minmax(0,1fr) 224px;
  gap:14px;
  align-items:stretch;
  margin:2px 0 14px
}
.dk-insight:not(.has-note) {
  /* 没留言时退成两列，不留空框 */
  grid-template-columns:196px minmax(0,1fr)
}
.dk-ins-note-col { min-width:0; display:flex }
.dk-ins-note-col .dk-note {
  /* 留言列跟主战者一样撑满高度；内容多了在框内滚，不把整行顶高 */
  flex:1 1 auto;
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:0
}
.dk-ins-note-col .dk-note-bd {
  overflow:auto;
  flex:1 1 auto
}
.dk-ins-right {
  display:flex;
  flex-direction:column;
  /* 结构与曲线之间贴紧（店主：「之间的空间很小」） */
  gap:8px;
  min-width:0
}
/* 🔴 `.dk-ins-col{flex:1 1 230px}` 在纵向 flex 里等于"每块至少 230 高"，
   于是右列被硬撑到 472，反过来把整行拉高（店主：「行高由主战者决定！！！！」）。
   右列两块按内容高即可，整行由主战者图决定。 */
.dk-ins-right .dk-ins-col { flex:0 0 auto }
/* 整行由主战者决定后，右列底部会多出一点空白 —— 让曲线贴底，
   结构贴顶，两块分居上下，中间那段成为"呼吸"，而不是全堆在顶部。 */
.dk-ins-right .dk-curve-col { margin-top:auto }
/* 整行由主战者决定后，右列底部会多出一点空白 —— 让曲线贴底，
   结构贴顶，两块分居上下，中间那段成为"呼吸"，而不是全堆在顶部。 */
.dk-ins-right .dk-curve-col { margin-top:auto }
@media (max-width:1024px) {
  /* 平板：留言列降到下一行，仍比压成三条细柱好读 */
  .dk-insight.has-note { grid-template-columns:196px minmax(0,1fr) }
  .dk-insight.has-note .dk-ins-note-col { grid-column:1 / -1 }
}
@media (max-width:720px) {
  /* 手机：一列到底（主战者 → 结构 → 曲线 → 留言） */
  .dk-insight,
  .dk-insight.has-note { grid-template-columns:minmax(0,1fr); gap:10px }
  .dk-insight .dk-lead-col { max-width:210px }
  .dk-insight.has-note .dk-ins-note-col { grid-column:auto }
}
/* 2026-10-23：主战者**单独一栏、放最左、图尽量大**（店主第二次改口径）。
   主战者不是"第四类牌"，跟类型方块挤一排反而两头都不像。
   flex 基准 168px：桌面端占最左一条，窄屏（<720）自动换行到最上面一行。 */
/* 特异性要压过下面 `.dk-ins-col{flex:1 1 230px}`（同权重、后写的赢），
   否则主战者栏会被拉成一整条，图又变回小方块。 */
.dk-insight .dk-lead-col {
  min-width:0;
  align-self:start   /* 只到图片高度，不被右列拉高 */
}
.dk-lead {
  display:block;
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.dk-lead-img {
  display:block;
  width:100%;
  height:auto;
  /* 主战者原画是竖的（约 411×576），整张露出来，不裁 */
  object-fit:contain;
  background:#0d0d10
}
.dk-lead.none {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:150px;
  border-style:dashed
}
.dk-lead-ph { font-size:34px; color:var(--text-3); line-height:1 }
.dk-lead-none { font-size:11.5px; color:var(--text-3) }
/* 类型方块：主战者搬走后这里只剩"类型"，一行最多两三块，回到方块比例 */
.dk-struct-col, .dk-curve-col { min-width:0 }
.dk-ins-col {
  flex:1 1 230px;
  min-width:0;
  /* 缩紧内边距：让"结构 + 曲线"两块加起来不超过主战者图的高度
     （店主：行高由主战者决定）。 */
  padding:10px 12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.dk-ins-col h5 {
  margin:0 0 9px;
  font-size:12px;
  font-weight:600;
  color:var(--text-3);
  letter-spacing:.05em
}
/* 卡片构成：**方块网格**（2026-10-23 用户：「文字横铺太浪费，改成卡片展示形式」）。
   原来是 `.dk-trow` 一整行、名字 `flex:1` 撑到左端、数字顶到右端，中间全是空当；
   三行占的高度和方块一样，却看不出哪一类占大头。
   现在竖排「类型 / 张数 / 种数」+ 底部一条占比，跟着栏宽自动排 2～4 个一行；
   **主战者是同排的第四格**（用户第二轮：「单独做卡牌太宽，把主战者一上来，单独做个框」），
   三块变四块后每块从 ~180px 收到 ~140px，才不像扁横条。
   ⚠️ 用 flex 而不是 `grid auto-fit`：这套牌只留一类时（例如纯随从），
     `auto-fit` 会把唯一的方块**拉成整行**，又回到"横铺"。
     `max-width:50%` 是这两件事的交点 —— 一起排时吃满整栏（没有右端空洞），
     只剩一块时封顶半栏（读起来是一张卡，不是一条横杠）。
     基准 110px 是为窄屏定的：手机上四格挤不进一行时退成 **2×2**，
     而不是 3+1 把主战者孤零零晾在第二行（实测 400px 视口就是这么走）。 */
.dk-types {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.dk-tcard {
  flex:1 1 110px;
  max-width:calc(50% - 4px);
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* 四格等高（主战者那格最高，其余被拉到同一高度）——
     用 space-between 把「类型 / 张数 / 种数」分别贴顶、居中、贴底，
     否则三行挤在正中、上下各空一截，看着像没排完版。 */
  justify-content:space-between;
  gap:1px;
  padding:8px 6px 17px;
  border-radius:8px;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  overflow:hidden
}
.dk-tcard-n {
  max-width:100%;
  font-size:11.5px;
  color:var(--text-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.dk-tcard b {
  font-size:24px;
  font-weight:800;
  line-height:1.15;
  color: var(--gold-ink)
}
.dk-tcard i {
  font-style:normal;
  font-size:11px;
  color:var(--text-3)
}
/* 占比条：**内缩 + 圆头**，贴在卡片下沿之上。
   早先是 left/right:0 贴死边框，远看像一条杂线；内缩 8px 后才读得出是一根"量条"。 */
.dk-tcard-track {
  position:absolute;
  left:8px;
  right:8px;
  bottom:7px;
  height:3px;
  border-radius:2px;
  background:var(--ink-4);
  overflow:hidden
}
.dk-tcard-fill {
  display:block;
  height:100%;
  border-radius:2px;
  background:var(--gold)
}
/* 主战者：**独立一栏、放最左、图尽量大**（2026-10-23 第三轮口径）
   店主原话：「主战者这个东西单独站一栏『卡片结构』『费用曲线』之类的这种大框，
   并且放在最左边。而且主战者图片的图要尽可能大，可以不出现文字，全部放图片。」
   ——所以这一块不再跟类型方块挤一排，也不再压 30×42 的小缩略图（那是第二轮"塞四格"留下的）。
   现在：整栏 196px，图按 411:576 原比例吃满栏宽，文字全部去掉（名字只留 title）。 */
.dk-lead {
  display:block;
  padding:0;
  border-radius:10px;
  background:transparent;   /* 不留黑底：图片本身有卡面底色 */
  border:0;
  overflow:hidden
}
.dk-lead-img {
  display:block;
  width:100%;
  height:auto;             /* 按原比例：图多高，这一行就多高 */
  border-radius:10px;
  background:transparent
}
.dk-lead.none {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:164px;
  border-style:dashed
}
.dk-curve {
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:96px
}
.dk-bar {
  flex:1 1 0;
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  justify-items:center
}
.dk-bar b {
  align-self:end;
  font-size:11px;
  font-weight:700;
  line-height:1.5;
  color: var(--gold-ink)
}
.dk-bar i {
  display:block;
  width:100%;
  align-self:end;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--gold),var(--brand-2))
}
.dk-bar.zero i {
  display:none
}
.dk-bar span {
  margin-top:3px;
  font-size:10.5px;
  color:var(--text-3)
}
.dk-ins-note {
  margin-top:8px;
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-3)
}
.dk-stats {
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:6px;
  align-items:center;
  z-index:2
}
.dk-stats i {
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  padding:4px 7px;
  border-radius:99px;
  color:var(--text);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px)
}
.dk-stats .dk-like {
  color: var(--gold-ink)
}
.dk-stats .dk-fav {
  color: var(--gold-ink)
}
.dk-lbtn.on,.dk-fbtn.on {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.dk-lbtn b {
  font-weight:800;
  margin-left:2px
}
.favd-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:12px
}
.favd {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  color:inherit;
  text-decoration:none
}
.favd:hover {
  border-color:var(--gold)
}
.favd-art {
  display:block;
  aspect-ratio:63 / 88;
  border-radius:6px;
  overflow:hidden;
  background:var(--ink-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:var(--text-3)
}
.favd-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.favd>b {
  font-size:13.5px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.favd-meta {
  font-size:11.5px;
  color:var(--text-3)
}
.favd.gone {
  border-style:dashed
}
.favd.gone .favd-art {
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px)
}
.favd.gone .btn {
  margin-top:4px
}
.f-g>h4.f-ftog {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  margin:0 0 8px;
  padding:3px 0;
  border-radius:5px
}
.f-g>h4.f-ftog:hover {
  color: var(--gold-ink)
}
.f-g>h4.f-ftog:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px
}
.f-ftog-a {
  margin-left:auto;
  width:0;
  height:0;
  flex:none;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid currentColor;
  opacity:.7;
  transition:transform .18s ease
}
.f-g.collapsed>h4.f-ftog {
  margin-bottom:0
}
.f-g.collapsed>h4.f-ftog .f-ftog-a {
  transform:rotate(-90deg)
}
.f-g.collapsed>.f-bd {
  display:none
}
#myNav {
  background:var(--ink)
}
@media (max-width:720px) {
  #myNav {
    position:sticky;
    top:var(--topbar-h,0px);
    z-index:50
  }
}
.ed-curve-w {
  padding:11px 13px;
  margin-bottom:12px;
  border-radius:var(--r-l1);
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.ed-curve-w h5 {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 8px;
  font-size:12px;
  font-weight:600;
  color:var(--text-3);
  letter-spacing:.05em
}
.ed-curve-n {
  margin-left:auto;
  font-size:11.5px;
  color:var(--text-3);
  font-weight:400;
  letter-spacing:0
}
.ed-curve-empty {
  padding:16px 8px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-3)
}
.dci-mask {
  z-index:900
}
.dci-modal {
  width:min(900px,100%)
}
.dci-hd {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.dci-hd h3 {
  margin:0
}
.dci-sub {
  font-size:12.5px;
  margin:5px 0 0
}
.dci-opt {
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin:0 0 10px;
  padding:9px 11px;
  border:1px solid var(--ink-4);
  border-radius:9px;
  background:var(--ink-3);
  cursor:pointer;
  font-size:12.5px;
  color:var(--text-2)
}
.dci-opt input {
  flex:none;
  width:15px;
  height:15px;
  margin:2px 0 0;
  accent-color:var(--gold);
  cursor:pointer
}
.dci-opt span {
  display:flex;
  flex-direction:column;
  gap:3px;
  line-height:1.5
}
.dci-opt b {
  font-weight:700;
  color:var(--text)
}
.dci-opt em {
  font-style:normal;
  color: var(--gold-ink);
  font-weight:700
}
.dci-opt i {
  font-style:normal;
  font-size:11.5px;
  color:var(--text-3)
}
.dci-x {
  flex:none;
  width:30px;
  height:30px;
  border-radius:8px;
  cursor:pointer;
  background:transparent;
  border:1px solid var(--ink-4);
  color:var(--text-2);
  font-size:14px;
  line-height:1;
  transition:.15s
}
.dci-x:hover {
  color: var(--on-accent);
  background:var(--gold);
  border-color:var(--gold)
}
.dci-base {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
  flex-wrap:wrap
}
.dci-base label {
  font-size:12.5px;
  color:var(--text-3);
  flex:none
}
.dci-input {
  flex:1 1 240px;
  min-width:200px;
  padding:8px 10px;
  font-size:12.5px;
  color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:8px
}
.dci-input:focus {
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-color:var(--brand-2)
}
.dci-reset {
  flex:none
}
.dci-hint {
  font-size:12px;
  color:var(--text-3);
  line-height:1.8;
  margin-bottom:11px
}
.dci-hint .mono {
  color:var(--text-2)
}
.dci-hint b,.dci-warn {
  color:var(--red);
  font-weight:700
}
.dci-prev {
  height:min(58vh,640px);
  overflow:auto;
  padding:12px;
  border:1px solid var(--ink-4);
  border-radius:10px;
  background:var(--ink-3);
  text-align:center
}
.dci-img {
  max-width:100%;
  height:auto;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.55)
}
.dci-busy {
  padding:40px 12px;
  font-size:13px;
  color:var(--text-3)
}
.dci-prev .dci-warn {
  padding:30px 12px;
  font-size:13px;
  line-height:1.8
}
.dci-ft {
  align-items:center;
  gap:10px
}
.dci-align {
  margin-right:auto;
  font-size:12px
}
.dk-rank.code {
  background:transparent;
  color: var(--gold-ink);
  border:1px solid var(--gold)
}
@media (max-width:720px) {
  .dci-ft {
    flex-wrap:wrap
  }
  .dci-align {
    width:100%;
    margin:0 0 4px
  }
  .dci-prev {
    max-height:46vh
  }
}
@media (max-width:720px) {
  .bnav,.bnav-my {
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:2px 2px 4px
  }
  .bnav::-webkit-scrollbar {
    display:none
  }
  .bnav-my::-webkit-scrollbar {
    display:none
  }
  .bnav-t,.mynav {
    flex:0 0 auto;
    scroll-snap-align:start;
    transform:none;
    flex-direction:row;
    align-items:center;
    gap:8px;
    min-height:50px;
    padding:10px 14px
  }
  .bnav-t:hover,.mynav:hover {
    transform:none
  }
  .bnav-cal,.bnav-meta,.bnav-decks {
    grid-column:auto;
    grid-row:auto;
    align-self:auto;
    height:auto
  }
  .mynav-pv,.bnav-cal .bnav-pv {
    display:none
  }
  .bnav-meta .bnav-pv,.bnav-decks .bnav-pv {
    display:block
  }
  .bnav-meta .bnav-split,.bnav-decks .bnav-split,.bnav-meta .bnav-split-l,.bnav-decks .bnav-split-l {
    display:contents
  }
  .bnav-meta .bnav-split-r,.bnav-decks .bnav-split-r {
    display:none
  }
  .bnav-meta .bnav-split-l>*:not(.bnav-chip),.bnav-decks .bnav-split-l>*:not(.bnav-chip) {
    display:none
  }
  .bnav-meta .bnav-chip,.bnav-decks .bnav-chip {
    position:static;
    display:inline-block;
    margin:0
  }
  .bnav-b>span,.mynav-b>span {
    display:none
  }
  .bnav-hd,.mynav-hd {
    gap:8px
  }
  .bnav-i,.mynav-i {
    font-size:17px
  }
  .bnav-b b,.mynav-b b {
    font-size:13.5px;
    white-space:nowrap
  }
  .bnav-cur {
    display:none
  }
  #myNav {
    background:var(--ink);
    border-bottom:1px solid var(--ink-4);
    padding-top:6px;
    padding-bottom:2px
  }
  #heroCarousel .hc-nav {
    width:44px;
    height:44px
  }
  #heroCarousel .hc-nav::before {
    width:13px;
    height:13px
  }
  .hc-dots {
    gap:4px;
    padding:14px 0 8px
  }
  .hc-dots button,.hc-dots button.is-on {
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent;
    transform:none;
    display:grid;
    place-items:center
  }
  .hc-dots button::before {
    content:'';
    display:block;
    width:11px;
    height:11px;
    border:1px solid var(--brand-2);
    transform:rotate(45deg);
    transition:background .2s ease,border-color .2s ease,transform .2s ease
  }
  .hc-dots button.is-on::before {
    background:var(--gold);
    border-color:var(--gold);
    transform:rotate(45deg) scale(1.25)
  }
  #pager button,.ev-pager button {
    width:40px;
    height:40px
  }
  .fav-btn {
    width:40px;
    height:40px
  }
  a.more,.sec-hd>.more {
    min-height:44px;
    display:inline-flex;
    align-items:center
  }
  .ct-b,.ct-f {
    min-height:40px;
    min-width:40px
  }
  #noticeMeta a {
    min-height:40px;
    display:inline-flex;
    align-items:center
  }
  .fopt {
    min-height:40px
  }
  .rg-go {
    min-height:40px
  }
  .btn {
    min-height:40px
  }
  .bl-c {
    min-height:40px;
    min-width:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center
  }
  .cd-x {
    width:44px;
    height:44px
  }
  #pfTitle {
    min-height:40px
  }
  .ed-b {
    min-width:40px;
    min-height:40px
  }
  .footer-in ul li a {
    min-height:44px;
    display:inline-flex;
    align-items:center
  }
  .pk-kicker,.pk-badge,.pk-ncat,.pk-jp,.pcard-no,.pcard-meta,.pcard-foot,.bnav-cur,.bnav-chip,.bnav-bg,.bnav-mc-w,.mynav-tag,.mynav-hint,.mynav-num i,.badge,.cd-p-s,.cd-p-t,.cd-meta,.dk-meta,.sc-tag,.sc-j,.sc-n,.bl-c,.bl-c .mono,.bl-tag,.bl-n,.rq .q,.lk,.cd-qa .d,#dkDonut text,.ref-out,.ref-lbl,.mc-e,.ed-hint,.dci-sub,.dc-sub,.dc-align,.dci-align,.foot-note {
    font-size:12px !important
  }
  input,textarea,select {
    font-size:16px
  }
  a,button,[role="button"],label,.fopt,.pcard {
    touch-action:manipulation
  }
  * {
    -webkit-tap-highlight-color:rgba(255,224,0,.12)
  }
  .wrap {
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right))
  }
  #site-footer .footer-in {
    padding-bottom:calc(16px +env(safe-area-inset-bottom))
  }
  [id] {
    scroll-margin-top:calc(var(--topbar-h,0px) +64px)
  }
  .sec-head {
    flex-wrap:wrap;
    gap:8px
  }
  .sec-head>#headRight {
    margin-left:0
  }
}
.dd-modal {
  position:fixed;
  inset:0;
  z-index:620;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(10,10,11,.78);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px)
}
.dd-sheet {
  display:flex;
  flex-direction:column;
  width:min(1040px,96vw);
  max-height:92vh;
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:var(--r-panel);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden
}
.dd-hd {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--ink-4);
  flex:none
}
.dd-hd>b {
  font-size:15px;
  color:var(--text);
  white-space:nowrap
}
.dd-sub {
  font-size:12px;
  color:var(--text-3);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.dd-seat {
  margin-left:auto;
  display:flex;
  border:1px solid var(--ink-4);
  border-radius:8px;
  overflow:hidden;
  flex:none
}
.dd-seat button {
  appearance:none;
  border:0;
  background:var(--ink-3);
  color:var(--text-3);
  font:inherit;
  font-size:12.5px;
  padding:6px 15px;
  cursor:pointer;
  transition:background .15s,color .15s
}
.dd-seat button +button {
  border-left:1px solid var(--ink-4)
}
.dd-seat button.on {
  background:var(--gold);
  color: var(--on-accent);
  font-weight:700
}
.dd-x {
  flex:none;
  width:30px;
  height:30px;
  border-radius:8px;
  cursor:pointer;
  background:var(--ink-3);
  color:var(--text-2);
  border:1px solid var(--ink-4);
  font-size:13px
}
.dd-x:hover {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.dd-bd {
  padding:0 18px 18px;
  overflow-y:auto;
  flex:1 1 auto
}
.dd-body {
  padding-top:14px
}
.dd-note {
  margin:0 0 10px;
  font-size:11.5px;
  color:var(--text-3);
  line-height:1.7
}
.dd-note b {
  color:var(--text-2)
}
.dd-note-src {
  color:var(--text-3);
  opacity:.8
}
.dd-ops {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px
}
.dd-btn {
  appearance:none;
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  line-height:1.5;
  padding:7px 14px;
  border-radius:8px;
  color:var(--text-2);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  transition:border-color .15s,color .15s,background .15s
}
.dd-btn:hover:not(:disabled) {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.dd-btn:disabled {
  opacity:.38;
  cursor:not-allowed
}
.dd-btn.main {
  background:var(--gold);
  border-color:var(--gold);
  color: var(--on-accent);
  font-weight:700
}
.dd-btn.main:hover:not(:disabled) {
  background:#ffe94d;
  color: var(--on-accent)
}
.dd-btn.ok {
  border-color:rgba(80,200,140,.5);
  color:#6fdca2
}
.dd-btn.warn {
  border-color:rgba(255,120,120,.45);
  color:#ff8f8f
}
.dd-btn.ghost {
  background:transparent
}
.dd-state {
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  padding:9px 13px;
  margin-bottom:14px;
  border-radius:8px;
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.dd-st {
  display:inline-flex;
  align-items:baseline;
  gap:6px
}
.dd-st i {
  font-style:normal;
  font-size:11.5px;
  color:var(--text-3)
}
.dd-st b {
  font-size:12.5px;
  color:var(--text);
  font-weight:700
}
.dd-hand {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:8px;
  margin-bottom:6px
}
.dd-card {
  display:flex;
  gap:9px;
  align-items:center;
  padding:6px;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:8px;
  min-width:0
}
.dd-card.is-playable {
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,224,0,.25)
}
.dd-art {
  flex:none;
  width:44px;
  height:62px;
  border-radius:5px;
  overflow:hidden;
  background:var(--ink-2);
  display:block
}
.dd-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.dd-info {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px
}
.dd-n {
  font-size:12px;
  line-height:1.35;
  color:var(--text);
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.dd-meta {
  font-size:11px;
  color:var(--text-3)
}
.dd-empty {
  grid-column:1 / -1;
  padding:40px 10px;
  color:var(--text-3);
  font-size:13px;
  text-align:center
}
.dd-h5 {
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:20px 0 10px;
  font-size:13.5px;
  color:var(--text);
  font-weight:700
}
.dd-h5 span {
  font-size:11.5px;
  color:var(--text-3);
  font-weight:400
}
.dd-checks {
  display:flex;
  flex-direction:column;
  gap:7px
}
.dd-chk {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:9px 12px;
  border-radius:8px;
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--ink-4)
}
.dd-chk-t {
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-2)
}
.dd-chk-t b {
  color:var(--text)
}
.dd-chk-tip {
  font-size:11px;
  line-height:1.6;
  color:var(--text-3)
}
.dd-chk.ok {
  border-left-color:#3ecf83
}
.dd-chk.warn {
  border-left-color:#ffb74d
}
.dd-chk.bad {
  border-left-color:#ff5c5c
}
.dd-chk.info {
  border-left-color:var(--gold)
}
/* 模拟器：卡图选择条（2026-10-21 补样式）*/
.dd-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 9px 0 10px;
  padding: 9px;
  max-height: 236px;
  overflow: auto;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 8px
}
.dd-pick {
  flex: none;
  width: 62px;
  padding: 0;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  transition: border-color .12s, box-shadow .12s
}
.dd-pick img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0 0
}
.dd-pick b {
  display: block;
  padding: 3px 3px 4px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.dd-pick:hover {
  border-color: var(--gold)
}
.dd-pick.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255,224,0,.35)
}
.dd-pick.on b {
  color: var(--gold-ink)
}
@media (max-width: 720px) {
  .dd-pick { width: 52px; }
  .dd-picks { max-height: 200px; }
}

.dd-sim {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.dd-sim-l {
  font-size:12.5px;
  color:var(--text-3);
  display:inline-flex;
  align-items:center;
  gap:7px
}
.dd-sel {
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  color:var(--text);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-radius:8px;
  padding:7px 12px;
  max-width:240px
}
.dd-sel:hover {
  border-color:var(--gold)
}
.dd-sim-hint {
  flex:1 1 260px;
  font-size:11px;
  line-height:1.6;
  color:var(--text-3)
}
.dd-sim-out {
  margin-top:10px;
  padding:11px 13px;
  border-radius:8px;
  background:var(--ink-3);
  border:1px solid var(--ink-4)
}
.dd-sim-idle {
  font-size:12px;
  line-height:1.75;
  color:var(--text-3)
}
.dd-sim-idle b {
  color:var(--text-2)
}
.dd-sim-cap {
  font-size:11.5px;
  color:var(--text-3);
  margin-bottom:9px
}
.dd-sim-cap b {
  color:var(--text-2)
}
.dd-sim-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px
}
.dd-sim-t {
  flex:none;
  width:26px;
  font-size:11.5px;
  color:var(--text-3)
}
.dd-sim-bar {
  flex:1 1 auto;
  height:8px;
  border-radius:4px;
  background:var(--ink-2);
  overflow:hidden
}
.dd-sim-bar i {
  display:block;
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(255,224,0,.45),var(--gold))
}
.dd-sim-row>b {
  flex:none;
  width:52px;
  text-align:right;
  font-size:12px;
  color:var(--text)
}
.dd-sim-theo {
  flex:none;
  width:66px;
  text-align:right;
  font-size:11px;
  color:var(--text-3)
}
.dd-foot-note {
  margin:16px 0 0;
  padding:11px 13px;
  border-radius:8px;
  font-size:11.5px;
  line-height:1.8;
  color:var(--text-3);
  background:var(--ink-3);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--brand-2)
}
.dd-foot-note b {
  color:var(--text-2)
}
@media (max-width:680px) {
  .dd-modal {
    padding:10px
  }
  .dd-sheet {
    width:100%;
    max-height:94vh
  }
  .dd-hd {
    flex-wrap:wrap;
    padding:10px 12px;
    gap:8px
  }
  .dd-sub {
    flex:1 1 100%;
    order:3
  }
  .dd-seat {
    margin-left:0
  }
  .dd-bd {
    padding:0 12px 14px
  }
  .dd-hand {
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr))
  }
  .dd-sim-hint {
    flex-basis:100%
  }
}
.pf-vip {
  flex:none;
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  line-height:1.9;
  padding:0 9px;
  border-radius:999px;
  text-decoration:none;
  color: var(--on-accent);
  background:var(--gold);
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.pf-vip:hover {
  filter:brightness(1.08)
}
.pf-vip.off {
  color:var(--text-2);
  background:transparent;
  border:1px solid var(--ink-4);
  font-weight:400
}
.pf-vip.off:hover {
  border-color:var(--gold);
  color: var(--gold-ink)
}
.qk {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px
}
.qk-b {
  position:relative;
  appearance:none;
  cursor:pointer;
  font:inherit;
  text-align:left;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 12px;
  grid-template-rows:auto auto;
  gap:2px 11px;
  align-items:center;
  min-height:62px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text-2);
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  transition:border-color .16s,background .16s,transform .16s
}
.qk-b:hover {
  border-color:rgba(255,224,0,.5);
  background:var(--ink-3);
  transform:translateY(-2px)
}
.qk-b:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px
}
.qk-ic {
  grid-row:1 / span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:9px;
  background:var(--ink-3);
  color:var(--text-3);
  transition:background .16s,color .16s
}
.qk-ic svg {
  width:19px;
  height:19px
}
.qk-bt {
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0
}
.qk-bt b {
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  color:var(--text)
}
.qk-bt i {
  font-style:normal;
  font-size:11.5px;
  line-height:1.4;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.qk-cv {
  width:7px;
  height:7px;
  border-right:1.5px solid var(--text-3);
  border-bottom:1.5px solid var(--text-3);
  transform:translateY(-2px) rotate(45deg)
}
.qk-b.has,.qk-b.on {
  border-color:var(--gold);
  background:rgba(255,224,0,.07)
}
.qk-b.has::before,.qk-b.on::before {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:-1px;
  height:2px;
  border-radius:0 0 2px 2px;
  background:var(--gold)
}
.qk-b.has .qk-ic,.qk-b.on .qk-ic {
  background:rgba(255,224,0,.14);
  color: var(--gold-ink)
}
.qk-b.has .qk-bt i {
  color: var(--gold-ink);
  font-weight:700
}
.qk-b.on {
  box-shadow:inset 0 0 0 1px rgba(255,224,0,.55)
}
.qk-opt {
  appearance:none;
  cursor:pointer;
  font:inherit;
  text-align:left;
  display:flex;
  width:100%;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-radius:8px;
  color:var(--text-2);
  background:transparent;
  border:1px solid transparent
}
.qk-opt:hover {
  background:var(--ink-4);
  color:var(--text)
}
.qk-opt img {
  width:18px;
  height:18px;
  object-fit:contain;
  flex:none
}
.qk-opt b {
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap
}
.qk-opt i {
  margin-left:auto;
  font-style:normal;
  font-size:11px;
  color:var(--text-3);
  white-space:nowrap
}
.qk-opt.on {
  border-color:var(--gold);
  background:rgba(255,224,0,.08);
  color: var(--gold-ink)
}
.qk-opt.on i {
  color:rgba(255,224,0,.75)
}
/* ── 系列：小方块网格（2026-10-21 用户：「这里的系列要换成小方块形式」）────────
   36 个系列原来是一行一个的长列表（41 行 ≈ 1500px，要滚很久才找到 BP10）。
   改成 3 列方块后总高 ≈ 13×68 ≈ 900px，且「系列码」比「系列名」更好认。
   🔴 方块沿用 `.qk-opt` 类（只加 `.qk-tile` 覆盖布局）：点选、多选叠加、
      选中态（.on）、`data-k` 全都走原来那一套，**不要另写一份绑定逻辑**。
   ⚠️ 本段必须排在 `.qk-opt / :hover / .on` 之后 —— 单一类选择器同优先级，靠源码顺序覆盖。 */
.qk-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(78px, 1fr));
  gap:8px;
  padding:2px 0 4px
}
/* 分组标题（补充包 / 预组 / PR卡）在网格里要横跨整行 */
.qk-tiles .qk-grp {
  grid-column:1 / -1;
  padding:8px 2px 1px
}
.qk-tiles .qk-grp:first-child {
  padding-top:2px
}
/* 2026-10-25 店主：「这边字体要全部对齐」。
   原来 `grid-template-rows: auto auto auto` + 只有 name 会换行 ——
   同样一行方块里，名字两行的块把「BPxx」「N 张」挤到不同高度，看着就是没对齐。
   改成**三行定高**（编号 16 / 名字 2 行 26 / 张数 14），名字超过两行省略。
   这样同一行所有方块的基线完全一致，横向也统一居中。 */
.qk-tile {
  display:grid;
  grid-template-rows:16px 26px 14px;
  justify-items:center;
  align-content:center;
  gap:1px;
  width:auto;
  min-height:62px;
  padding:8px 5px 7px;
  border-radius:9px;
  text-align:center;
  background:var(--ink-2);
  border:1px solid var(--ink-4)
}
.qk-tile b {
  font-size:12.5px;
  font-weight:800;
  line-height:1.25;
  color:var(--text);
  letter-spacing:.02em
}
.qk-tile b {
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qk-tile i {
  max-width:100%;
  font-style:normal;
  font-size:10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.3;
  line-height:1.3;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.qk-tile span {
  font-size:10px;
  line-height:1.3;
  color:var(--text-3)
}
.qk-tile:hover {
  background:var(--ink-3);
  border-color:rgba(255,224,0,.45);
  color:var(--text)
}
.qk-tile.on {
  background:rgba(255,224,0,.10);
  border-color:var(--gold);
  color: var(--gold-ink)
}
.qk-tile.on b,.qk-tile.on span {
  color: var(--gold-ink)
}
/* 「不限系列」横跨整行：它是"取消全部"的动作，不是第 37 个系列 */
.qk-tile-all {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:8px 10px
}
.qk-tile-all b {
  font-size:12px
}
.qk-tile-all span {
  font-size:10.5px
}
.qk.qk-side {
  display:contents
}
.qk-side .qk-b {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  justify-items:center;
  align-content:start;
  gap:6px;
  min-height:88px;
  padding:11px 7px 10px;
  text-align:center
}
.qk-side .qk-ic {
  grid-row:auto;
  width:30px;
  height:30px
}
.qk-side .qk-ic svg {
  width:18px;
  height:18px
}
.qk-side .qk-bt {
  align-items:center;
  gap:2px
}
.qk-side .qk-bt b {
  font-size:12.5px;
  line-height:1.3
}
.qk-side .qk-bt i {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
  overflow:hidden;
  font-size:10.5px;
  line-height:1.3
}
.qk-side .qk-cv {
  display:none
}
.qk-grp {
  padding:8px 10px 3px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--text-3)
}
.qk-grp:first-child {
  padding-top:2px
}
.qk-range {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:10px;
  border-top:1px dashed var(--ink-4)
}
.qk-range-t {
  flex:1 1 auto;
  font-size:11.5px;
  color:var(--text-3);
  white-space:nowrap
}
.qk-in {
  width:62px;
  padding:5px 8px;
  font:inherit;
  font-size:12px;
  color:var(--text);
  background:var(--ink-2);
  border:1px solid var(--ink-4);
  border-radius:8px
}
.qk-in::placeholder {
  color:var(--text-3)
}
.qk-in:focus {
  outline:none;
  border-color:var(--gold)
}
.qk-dash {
  color:var(--text-3);
  font-size:12px
}
@media (max-width:640px) {
  .qk {
    gap:8px;
    margin-bottom:10px
  }
  .qk-b {
    grid-template-columns:26px minmax(0,1fr);
    grid-template-rows:auto auto;
    min-height:56px;
    padding:8px 9px;
    gap:1px 8px
  }
  .qk-ic {
    width:26px;
    height:26px;
    border-radius:8px
  }
  .qk-ic svg {
    width:16px;
    height:16px
  }
  .qk-bt b {
    font-size:12px
  }
  .qk-bt i {
    font-size:10.5px
  }
  .qk-cv {
    display:none
  }
}
.bl-h3 {
  margin:26px 0 10px;
  font-size:14px;
  font-weight:600;
  color:var(--text-2)
}
.blcard.rel {
  border-left-color:var(--green)
}
.blcard.rel .blc-badge {
  /* 同上：原 var(--green)=#2EA860 上白字 3.05:1 → 压深到 5.9:1 */
  background:#1F7A45;
  color:#fff
}
.blc-ph {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:34px;
  line-height:1;
  color: var(--gold-ink)
}

/* ── v7（2026-10-21 14:4x）──────────────────────────────────────────── */
/* 灰框：这张牌已经打出去了，手牌原位置留的空壳 */
.gslot.ghost { border: 2px dashed #5b6472; background: rgba(140,150,168,.12);
  display: flex; align-items: flex-end; justify-content: center; }
.gslot.ghost .ghost-t { font-size: 10px; line-height: 1.4; color: #9aa6b8; padding-bottom: 3px; }
/* 绿框 / 红框：这张敌卡能不能打 */
.gcard.ring-ok { box-shadow: 0 0 0 3px #3ddc84, 0 4px 12px rgba(61,220,132,.35); }
.gcard.ring-bad { box-shadow: 0 0 0 3px #ff5d5d, 0 4px 12px rgba(255,93,93,.3); }

/* ── v7-b：对手/战场两行拉开间距、手牌提示换行 ─────────────────────── */
.gm-foe, .gm-field { gap: 26px; }
.gm-hnote { flex: 1 1 100%; margin-top: 4px; }
.ghand-only { flex-wrap: wrap; }

/* ── 灰框（已打出的那张）：灰度卡图 + 虚线框 + 底部「已打出」 ────────── */
.gcard.ghost {
  border: 2px dashed #5b6472;
  background: rgba(140,150,168,.12);
  overflow: hidden;
}
.gcard.ghost img {
  filter: grayscale(1) brightness(.8);
  opacity: .45;
}
.gcard.ghost .ghost-t {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1px 0 2px;
  text-align: center; font-size: 10px; line-height: 1.4;
  color: #cdd6e4; background: rgba(8,14,24,.72);
}

/* 牌组码弹窗里就地展开的分享图（2026-10-21：不再另开一层） */
.dc-img-host { display: none; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--ink-4); }
.dc-img-host.on { display: block; }
.dc-img-host .dci-prev { margin-bottom: 0; }
.dc-img-host .dci-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.dci-acts { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 10px; }
.dci-acts .dci-align { flex: 1 1 auto; font-size: 11.5px; }

/* 图鉴：系列方块收进弹层（2026-10-21 用户「点一个按钮之后才会弹出来」）*/
.dex-sets-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; font: inherit; font-size: 13px; color: var(--text-2);
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: 10px; cursor: pointer;
}
.dex-sets-btn:hover { border-color: rgba(255,224,0,.45); color: var(--text); }
.dex-sets-btn b { color: var(--gold-ink); font-weight: 800; }
.dex-sets-mask .modal { width: min(920px, 100%); }
.dex-sets-mask .dex-sets { max-height: min(62vh, 520px); padding: 0; background: transparent; border: 0; }
.dex-sets-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dex-sets-mask .dci-x { margin-left: auto; }

/* ══ 手机触控下限 40px（2026-10-23）══════════════════════════════════════
   依据 `data/viewports.js` 的 `minTouch: 40`：「手机上点得中」。
   实测（20:13）手机视口下几乎**每页**都被守门人记一笔：
     顶栏 `nav-btn` 56×33 / `member-btn` 82×32（有的页只有 69×23）/ `cart-btn` 60×39；
     另有筛选芯片 `.fopt` 51×35、下拉 `select.input` 133×39、轮播页码点 36×40、
     图例卡片 `.dk-lg` 154×38、图标按钮 `.btn.l3` 34×49、条件页跳转 123×38、正文链接 77×16。

   为什么**只在手机断点**改：
     · PC 上这些尺寸是鼠标友好的，动它会连带改掉 1920×940 的首屏预算；
     · 手机断点抬高度不会引起横向溢出（宽度本来就够），守门人会实测兜底。

   为什么用 `min-height` 而不是 `height`：
     `.member-btn` 在手机媒体查询里写着 `height:32px`，`min-height` 能压过它，
     而 `height` 谁写在后面谁赢 —— 用 min-height 不必去改那些既有规则。
   为什么 `padding-block:0`：高度交给 min-height + flex 居中，避免 8px 上下内边距
   把盒子顶成 40+17+8 的怪高度。 */
@media (max-width: 900px), (max-height: 520px) and (pointer: coarse) {
  .nav-btn,
  .member-btn,
  .cart-btn {
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 通用按钮：手机上一律 40 高；纯图标按钮（点赞/收藏/关闭）宽度也要 40 */
  .btn { min-height: 40px; }
  .btn.l3,
  .dk-lbtn,
  .dk-fbtn { min-width: 40px; }
  /* 筛选芯片（卡库/我的卡组等页的 .fopt） */
  .fopt { min-height: 40px; }
  /* 下拉框（排序等）：原生 select 不吃 min-height，用 height 固定 */
  select.input { height: 40px; }
  /* 职业图例卡片（环境页） */
  .dk-lg { min-height: 40px; }
  /* 轮播页码点：原本 36×40，只有宽度不够 */
  .hc-dots button { min-width: 40px; min-height: 40px; }
  /* 条件页的跳转按钮与「回卡库」正文链接：链接给大一点的可点区域，
     但不改字号与行高，看起来还是正文。 */
  .cnd-jump-btn { min-height: 40px; }
  .cnd-back a {
    display: inline-flex; align-items: center;
    min-height: 40px;
  }

  /* ── 第二批（20:22 实测剩下的）：按页面逐项收口 ──────────────────────
     卡库的网格/列表切换 `.seg button`（无类名，靠父级选中）、
     商城购买键 `.shop-buy`、轮播左右 `.hc-nav`、
     预定/我的预定页 `.pre-go`（正文里的跳转按钮，30 高）、
     规则页 `.rsrc-go`、个人中心 `.lnk`（「立即注册」21 高）、
     我的仓库空态里那个「登录 / 注册」文本链接。 */
  .seg button { min-height: 40px; }
  /* `.pre-go` 在 mypre / myrecall 里是 **`<a>`**：行内元素不吃 min-height，
     必须一起给 display 才长高（这是第一批漏掉它的原因）。 */
  .pre-go,
  .pre-cancel {
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .shop-buy { min-height: 40px; }
  .hc-nav { min-width: 40px; min-height: 40px; }
  .lnk,
  .rsrc-go { min-height: 40px; }
  .ms-empty a {
    display: inline-flex; align-items: center;
    min-height: 40px;
  }
}

/* 预定商品的价格区多两行（预定期间 / 名额余量）——见 shop.html 的 priceHtml。
   2026-10-24 店主：「预定卡片看不见日期时间」。字号比价格小一档、颜色压暗，
   不抢价格，但必须看得清。 */
.shop-price .shop-date {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0;
}
.shop-price .shop-date.full { color: #d9534f; }

/* ══ 商城详情弹窗：预定信息区（2026-10-24 重排版）══════════════════════
   店主：「详细页信息也太少，不能这么空」。
   原来预定日期挤在价格格下面的一行小字里；现在拆成**三个时间节点 + 一条名额进度**，
   等宽字体显示时间点。只在「预定」类商品出现，现售商品不受影响。 */
.shd-pre { margin-top: 14px; }
.shd-tl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  background: var(--ink-2);
}
.shd-tl > i {
  display: flex; flex-direction: column; gap: 4px;
  font-style: normal; min-width: 0;
  position: relative;
}
.shd-tl > i + i { padding-left: 12px; }
.shd-tl > i + i::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--ink-4);
}
.shd-tl em {
  font-style: normal; font-size: 11px; color: var(--text-3); letter-spacing: .04em;
}
.shd-tl b { font-size: 13px; color: var(--text-1); font-weight: 700; }

.shd-quota {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.shd-q-bar {
  flex: 1 1 auto; height: 6px; border-radius: 99px;
  background: var(--ink-3); overflow: hidden;
}
.shd-q-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.shd-quota > b { font-size: 11.5px; color: var(--text-2); font-weight: 600; white-space: nowrap; }

/* ══ 商城详情弹窗：预定信息区（2026-10-24 重排版）══════════════════════
   店主：「详细页信息也太少，不能这么空」。
   原来预定日期挤在价格格下面的一行小字里；现在拆成**三个时间节点 + 一条名额进度**，
   等宽字体显示时间点。只在「预定」类商品出现，现售商品不受影响。 */
.shd-pre { margin-top: 14px; }
.shd-tl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  background: var(--ink-2);
}
.shd-tl > i {
  display: flex; flex-direction: column; gap: 4px;
  font-style: normal; min-width: 0;
  position: relative;
}
.shd-tl > i + i { padding-left: 12px; }
.shd-tl > i + i::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--ink-4);
}
.shd-tl em {
  font-style: normal; font-size: 11px; color: var(--text-3); letter-spacing: .04em;
}
.shd-tl b { font-size: 13px; color: var(--text-1); font-weight: 700; }

.shd-quota {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.shd-q-bar {
  flex: 1 1 auto; height: 6px; border-radius: 99px;
  background: var(--ink-3); overflow: hidden;
}
.shd-q-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.shd-quota > b { font-size: 11.5px; color: var(--text-2); font-weight: 600; white-space: nowrap; }

/* 商品卡上的预定信息行（2026-10-24 返工）：
   **独占整卡宽度**，每条一行，绝不与价格/按钮同行 —— 上一版塞进价格格被挤成竖排。 */
.shop-preline {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 6px;
  font-size: 11px; line-height: 1.55; color: var(--text-3);
  min-width: 0;
}
.shop-preline > i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 商品卡上的预定信息行（2026-10-24 返工）：
   **独占整卡宽度**，每条一行，绝不与价格/按钮同行 —— 上一版塞进价格格被挤成竖排。 */
.shop-preline {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 6px;
  font-size: 11px; line-height: 1.55; color: var(--text-3);
  min-width: 0;
}
.shop-preline > i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 职业方块（2026-10-25）：图标为主、汉字为辅。
   `grid-template-rows` 换成 [图标][名字]，图标 26px 定高，名字 11px。 */
.qk-tile-ico {
  grid-template-rows:26px 14px;
  min-height:60px;
  gap:3px;
}
.qk-tile-ico .qk-ico {
  width:26px; height:26px;
  object-fit:contain;
  display:block;
}
.qk-tile-ico b {
  font-size:11px;
  font-weight:700;
  color:var(--text-2);
  letter-spacing:0;
}

/* ============================================================================
   「专属窗口」(pagesheet) —— 个人中心的入口点开是弹窗，不是跳页
   2026-10-25 店主：「个人中心所有按钮点击之后都会跳出专属窗口」。
   逻辑在 assets/js/pagesheet.js（iframe + `?embed=1`）；这里只管样子。
   颜色全部走 token，深浅两套主题都不用再各写一遍。
   ========================================================================== */
.psheet {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  opacity: 0; transition: opacity .18s ease;
}
.psheet.on { opacity: 1; }
.psheet-bg {
  position: absolute; inset: 0;
  background: rgba(20, 18, 14, .46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html[data-theme="light"] .psheet-bg { background: rgba(56, 48, 26, .30); }

.psheet-box {
  position: relative;
  display: flex; flex-direction: column;
  width: min(1080px, 96vw);
  height: min(86vh, 900px);
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(10px) scale(.995);
  transition: transform .2s cubic-bezier(.16,.84,.34,1);
}
.psheet.on .psheet-box { transform: none; }

/* ── 加宽态（2026-10-26）───────────────────────────────────────────────
   店主：「编辑卡组界面的窗口要变大，不能按照我的窗口界面大小来打开」。
   编辑卡组是长在**专属窗口 iframe 里**的浮层（#mdMask 的 position:fixed 只到
   iframe 边界为止），所以它永远大不了 —— 除非外壳自己变大。
   pagesheet.js 的 setWide() 在编辑器打开 / 关闭时切这个类；
   只管宽高，其它页面（订单 / 图鉴 / 地址…）仍然是 1080 那套默认尺寸。 */
/* 加宽态（2026-10-26）：**只改尺寸**。谁要宽谁自己声明（mydecks.html 一进来就声明，
   因为店主说「我的卡组」要自成一个大窗口）；其它专属窗口保持 1080。 */
.psheet-wide .psheet-box {
  width: min(1440px, 96vw);
  height: min(92vh, 1000px);
}

/* 去壳态（2026-10-26 店主：「这里一定要用外边框给他框住吗？你把这个外框删了只显示这些内容」）：
   编辑卡组时把标题条 `我的卡组 + ✕` 与那圈边框一起收掉，只剩编辑器本身；
   关闭走编辑器自己的「取消 / 保存 / Esc」。必须与 `.psheet-wide` 分开命名 ——
   合成一个类的话，「我的卡组」列表页也会被剥掉标题栏和 ✕（它需要那个关闭键）。 */
.psheet-bare .psheet-hd { display: none; }
.psheet-bare .psheet-box { border: 0; }

.psheet-hd {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--ink-4);
  background: var(--ink-3);
}
.psheet-t {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psheet-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
/* 2026-10-26：「整页打开」按钮与它整条样式链已退休（见 pagesheet.js）。
   专属窗口是这些页面的唯一形态，不再提供"跳到整页"的出口。 */
.psheet-x {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--ink-4); border-radius: 8px;
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.psheet-x:hover { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
/* 关闭图标改成内联 SVG（不再依赖 `✕` 字符：部分安卓 ROM 的默认字体没有 U+2715 字形，
   会渲染成空框 —— 店主看到的就是"没有退出按钮"）。 */
.psheet-x svg { width: 15px; height: 15px; display: block; }
.psheet-x-t {
  /* 文字标签只在手机出现（桌面一个图标足够，标题栏紧凑更好看） */
  display: none;
  margin-left: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.psheet-body { flex: 1 1 auto; min-height: 0; background: var(--ink); }
.psheet-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--ink); }

/* 弹窗开着时锁住背景滚动（否则滚轮会把后面的页面推走，人以为卡了） */
html.is-sheet-open, html.is-sheet-open body { overflow: hidden; }

/* —— 嵌页模式（被上面那个 iframe 加载时）——
   store.js 的 mountShell 见到 `?embed=1` 就不挂顶栏/页脚，并给 <html> 加 .is-embed。
   这里把「窗口内部的整页外壳」也收掉：顶栏高度变量、二级导航、页脚占位。 */
html.is-embed { --topbar-h: 0px; }
html.is-embed #site-header,
html.is-embed #site-footer,
html.is-embed .bnav-my,
/* 2026-10-25 店主：「我的主页里面打开的单图弹窗不带个人资料」。
   资料卡（头像/昵称/打卡/月卡/退出登录）是**每页常驻**的，被 iframe 装进弹窗后
   也跟着进来了 —— 在"我的收藏"窗口里顶着一整条个人信息，既重复又不礼貌。
   所以嵌页模式下把 `#pfCard` 整块收掉：窗口里只留那一页**自己的内容**。 */
html.is-embed #pfCard,
html.is-embed .pf-quick { display: none !important; }
/* 2026-10-26 店主（收集进度截图圈住标题上方那条空白）：「你这里空这么多干嘛」。
   两处成因，一起收：
   ① 只藏了里面的 `.bnav-my`，**外壳 #myNav 还在** —— 高度 0 但挂着 `margin:0 0 22px`，
      在窗口里只贡献 margin（而且会和后面的 54px 上边距折叠，制造"看不见的块"）；
   ② 收集进度那页正文是 `<section class="sec">`，`.sec { margin:54px 0 }` 是**页内**段间距，
      在专属窗口里上方已经有窗口标题栏了，这 54px 就是纯空（实测 18+54=72px）。
   统一口径：窗口里第一个 `.sec` 的上边距清零 —— 只影响"段落之间"的呼吸，
   不动标题自身的排布，也不影响未嵌页的整页版式。 */
html.is-embed #myNav { display: none !important; }
html.is-embed main.wrap > .sec:first-of-type { margin-top: 0; }
html.is-embed main.wrap { padding-top: 18px !important; padding-bottom: 26px !important; }

@media (max-width: 900px) {
  .psheet { padding: 0; }
  /* 🔴 高度用 100% 而不是 100vh：
     `100vh` 是**大视口**（地址栏收起后的高度），比当前可视区高一截；
     而 `.psheet` 是 flex 垂直居中 → 窗口上下各溢出一半，
     **头部（标题 + 关闭按钮）被顶到屏幕上方之外**。
     店主「打开个人中心的按钮后没有退出按钮」就是这个原因。
     `100%` 跟随 `.psheet`（fixed inset:0）的真实高度，永不溢出。
     pagesheet.js 的 fitBox() 还会再用 clientHeight 校一次（双保险）。 */
  .psheet-box { width: 100vw; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .psheet-hd { padding: 8px 8px 8px 14px; gap: 10px; }
  /* 「整页打开」已于 2026-10-26 整体取消，这里不需要按端隐藏 */
  /* 手机上把关闭做成「× 返回」的实体按钮：40px 命中 + 描边，一眼看得见 */
  .psheet-x {
    width: auto; min-width: 84px; height: 40px;
    padding: 0 12px;
    color: var(--text);
    background: var(--ink-2);
  }
  .psheet-x-t { display: inline; }
}