/* 墨契 · 联机图鉴 / 牌组 / 我的卡牌 / 在线商店（配套 js/pvp/collection.js）
   只在 #pvp-panel 里生效；类名 p 前缀，避开 style.css 的 .card / .panel。 */

.pvpcol { position: relative; display: flex; flex-direction: column; width: min(1080px, 100%); flex: 1 1 auto; min-height: 0; margin: 0 auto; padding: 4px 0 40px; }
/* .pvpcol 里真正的页是 section.pvpcodex（viewCodex 的 wrap）。图鉴是百科范式两栏
   （左详情 / 右缩略图网格），排布细节全在 css/pvp-codex.css，这里只管"吃满剩余高度"。 */
.pvpcodex, .pvpcards, .pvpshop, .pvpdeck { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pvpcodex { flex-direction: row; }
.pvpcol > .pvp-panelbar, .pvpcards > *, .pvpshop > *, .pvpdeck > * { flex: 0 0 auto; }
.pvpcards > .pvpcards-scroll { flex: 1 1 0; min-height: 80px; }
.pvpcol h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: 6px; color: #f3e6cb; font-weight: 600; }
.pvpcol-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pvpcol-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pvpcol-sub { font-size: 13px; color: #9c8a70; letter-spacing: 1px; }
.pempty { margin: 18px 0; color: #9c8a70; font-size: 15px; line-height: 1.8; }

/* 页头数字：金币 / 包位 / 收藏 */
.pvpcol-stats {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px;
  font-size: 13px; color: #cbb591;
}
.pstat {
  padding: 3px 10px; border-radius: 999px; letter-spacing: 1px;
  background: rgba(24, 17, 11, 0.86); border: 1px solid rgba(201, 162, 74, 0.28);
}
.pstat i { font-style: normal; color: #9c8a70; }
.pstat b { color: #f0d79a; }
.pstat.is-user { color: #f0d79a; border-color: rgba(201, 162, 74, 0.5); }
.pstat.is-warn { color: #e0a878; border-color: rgba(179, 120, 52, 0.45); }

/* 筛选小标签 */
.pvpcol-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.pchip {
  padding: 5px 14px; font-family: var(--serif); font-size: 13px; letter-spacing: 2px; cursor: pointer;
  color: #cbb591; background: rgba(18, 12, 8, 0.8); border: 1px solid rgba(201, 162, 74, 0.25); border-radius: 999px;
}
.pchip.is-on { color: #ffe9bd; border-color: rgba(233, 201, 138, 0.8); background: rgba(92, 62, 32, 0.8); }
.pchip.r-common.is-on { border-color: rgba(190, 180, 160, 0.8); }
.pchip.r-special.is-on { border-color: rgba(120, 180, 200, 0.85); }
.pchip.r-limited.is-on { border-color: rgba(200, 150, 230, 0.85); }
.pchip.r-elite.is-on { border-color: rgba(233, 176, 90, 0.9); }
.pchip:focus-visible { outline: 2px solid rgba(233, 201, 138, 0.7); outline-offset: 2px; }

/* ---------------------------------------------------------------- 联机图鉴 */
.pvpcodex-name { font-size: 18px; color: #f6ead0; letter-spacing: 2px; }
.pvpcodex-meta { margin-top: 5px; font-size: 12px; color: #c9a24a; letter-spacing: 1px; }
.pvpcodex-text { margin-top: 8px; font-size: 14px; line-height: 1.8; color: #ddcfae; }
.pvpcodex-flavor { margin-top: 6px; font-size: 13px; line-height: 1.7; color: #8f7f68; }
.pvpcodex-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }


.pcol-cell {
  position: relative; box-sizing: border-box; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 0; border-radius: 3px;
  background: linear-gradient(180deg, rgba(44, 32, 22, 0.92), rgba(18, 12, 8, 0.95));
  border: 1px solid rgba(201, 162, 74, 0.22);
}
.pcol-cell.is-locked { filter: grayscale(1) brightness(0.55); }
.pcol-cell.is-picked { border-color: rgba(233, 201, 138, 0.95); box-shadow: 0 0 0 1px rgba(233, 201, 138, 0.5); }
.pcol-cell.r-special { border-color: rgba(120, 180, 200, 0.45); }
.pcol-cell.r-limited { border-color: rgba(200, 150, 230, 0.5); }
.pcol-cell.r-elite { border-color: rgba(233, 176, 90, 0.65); }
.pcol-lock { position: absolute; right: 3px; top: 2px; font-size: 11px; color: #d9c089; text-shadow: 0 1px 2px #000; }
.pcol-cost {
  position: absolute; left: 3px; top: 3px; min-width: 15px; height: 15px; line-height: 15px;
  border-radius: 50%; font-size: 10px; text-align: center; color: #1a120a;
  background: radial-gradient(circle at 40% 35%, #ffe6ae, #c9a24a);
}
.pcol-name {
  display: block; width: 100%; margin-top: 2px; font-size: 10px; line-height: 1.25; text-align: center;
  color: #efdfc0; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcol-count {
  position: absolute; right: 3px; bottom: 14px; font-size: 10px; font-weight: 400;
  color: #ffe9bd; text-shadow: 0 1px 2px #000;
}

/* ---------------------------------------------------------------- 我的卡牌 */
.pvpcards-grid {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.pcards-cell {
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 3px;
  background: rgba(20, 14, 9, 0.72); border: 1px solid rgba(201, 162, 74, 0.2);
}
.pcards-cell.r-special { border-color: rgba(120, 180, 200, 0.4); }
.pcards-cell.r-limited { border-color: rgba(200, 150, 230, 0.45); }
.pcards-cell.r-elite { border-color: rgba(233, 176, 90, 0.6); }
.pcards-meta { display: flex; flex-direction: column; font-size: 11px; color: #9c8a70; line-height: 1.5; }
.pcards-meta b { color: #efdfc0; font-weight: 500; font-size: 12px; }

/* ---------------------------------------------------------------- 在线商店 */
.pvpshop-slots { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pvpshop-slot {
  flex: 1 1 180px; min-height: 118px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--serif); color: #f0d79a;
  background: linear-gradient(180deg, rgba(48, 33, 20, 0.92), rgba(20, 13, 8, 0.95));
  border: 1px solid rgba(201, 162, 74, 0.45); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.12);
}
.pvpshop-slot.is-used { cursor: not-allowed; opacity: 0.45; border-style: dashed; box-shadow: none; }
.pvpshop-slot:focus-visible { outline: 2px solid rgba(233, 201, 138, 0.7); outline-offset: 3px; }
.pvpshop-slot:not(:disabled):active { transform: scale(0.985); }
.pvpshop-seal { font-size: 30px; letter-spacing: 2px; color: #ffdf9e; }
.pvpshop-label { font-size: 13px; letter-spacing: 2px; color: #cbb591; }
.pvpshop-hint { margin: 10px 0 0; font-size: 13px; color: #9c8a70; }
.pvpshop-open { margin-top: 16px; }
.pvpshop-open h4 { margin: 0 0 10px; font-size: 16px; letter-spacing: 4px; color: #f3e6cb; font-weight: 500; }
.pvpshop-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.pvpshop-card {
  width: 132px; padding: 8px; border-radius: 3px;
  background: rgba(20, 14, 9, 0.8); border: 1px solid rgba(201, 162, 74, 0.25);
  animation: pvpcard-in 260ms ease both;
}
.pvpshop-card.r-special { border-color: rgba(120, 180, 200, 0.5); }
.pvpshop-card.r-limited { border-color: rgba(200, 150, 230, 0.55); }
.pvpshop-card.r-elite { border-color: rgba(233, 176, 90, 0.75); box-shadow: 0 0 14px rgba(233, 176, 90, 0.28); }
.pvpshop-rarity { margin-top: 6px; font-size: 12px; letter-spacing: 2px; text-align: center; color: #c9a24a; }
.pvpshop-card.r-elite .pvpshop-rarity { color: #ffd98a; }
@keyframes pvpcard-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pvpshop-card { animation: none; } }

/* ---------------------------------------------------------------- 牌组编辑器 */
.pvpdeck-meter {
  position: relative; height: 6px; margin: 12px 0 6px; border-radius: 999px; overflow: hidden;
  background: rgba(12, 8, 5, 0.9); border: 1px solid rgba(201, 162, 74, 0.22);
}
.pvpdeck-meter i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a30, #e8c07a); }
.pvpdeck-meter.is-bad i { background: linear-gradient(90deg, #7a2c22, #c9583f); }
.pvpdeck-note { margin: 0 0 10px; font-size: 13px; color: #9c8a70; }
.pvpdeck-meter.is-bad + .pvpdeck-note { color: #e08b78; }
.pvpdeck-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pvpdeck-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px;
  background: rgba(22, 15, 10, 0.8); border: 1px solid rgba(201, 162, 74, 0.16);
}
.pvpdeck-row.r-special { border-left: 3px solid rgba(120, 180, 200, 0.7); }
.pvpdeck-row.r-limited { border-left: 3px solid rgba(200, 150, 230, 0.7); }
.pvpdeck-row.r-elite { border-left: 3px solid rgba(233, 176, 90, 0.85); }
.pvpdeck-cost {
  flex: 0 0 auto; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%;
  font-size: 12px; color: #1a120a; background: radial-gradient(circle at 40% 35%, #ffe6ae, #c9a24a);
}
.pvpdeck-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #efdfc0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvpdeck-n { flex: 0 0 auto; font-size: 13px; color: #c9a24a; letter-spacing: 1px; }
.pvpdeck-minus, .pvpdeck-plus {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 15px; line-height: 1;
  color: #d9c089; background: rgba(12, 8, 5, 0.85); border: 1px solid rgba(201, 162, 74, 0.3); border-radius: 3px;
}
.pvpdeck-minus:hover, .pvpdeck-plus:hover { color: #ffe9bd; border-color: rgba(233, 201, 138, 0.8); }
.pvpdeck-pool { margin-top: 16px; }
.pvpdeck-poolrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ppool-cell {
  cursor: pointer; padding: 6px 10px; font-family: var(--serif); font-size: 12px; letter-spacing: 1px;
  display: inline-flex; gap: 6px; align-items: center; color: #ddcfae;
  background: rgba(20, 14, 9, 0.8); border: 1px solid rgba(201, 162, 74, 0.25); border-radius: 3px;
}
.ppool-cell i { font-style: normal; color: #c9a24a; }
.ppool-cell.r-limited { border-color: rgba(200, 150, 230, 0.45); }
.ppool-cell.r-elite { border-color: rgba(233, 176, 90, 0.6); }

/* ---------------------------------------------------------------- 小屏 */
@media (max-width: 980px) {
  .pvpcards-scroll { height: min(44vh, 340px); }
  .pvpcards-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ---------------------------------------------------------------- 卡面纹理（共享）
   旧做法是每条卡内联一整副 768×1024 的 SVG（260 张 = 47 万个 DOM 节点）。
   现在纹理只定义一次：背景渐变 = 阵营色变量 --art-a/--art-b，叠一层共享的斜刻线 + 网点，
   每张卡就只是一个带 data-family 的空 div —— 零请求、零 SVG、零额外节点。 */
.pcol-art, .pcards-art, .pcard-art.pmini-art {
  position: relative; overflow: hidden; border-radius: 2px;
  background:
    repeating-linear-gradient(135deg, rgba(225, 204, 162, 0.10) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 34%, var(--art-a, #435048) 0%, var(--art-b, #101a18) 78%);
}
/* 共享刻纹层：所有卡面共用同一段 radial 网点，浏览器只光栅化一次 */
.pcol-art::after, .pcards-art::after, .pcard-art.pmini-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: radial-gradient(rgba(233, 214, 176, 0.22) .6px, transparent .7px);
  background-size: 5px 5px;
}
[data-family="human"],  [data-family="child"], [data-family="king"]    { --art-a: #5a5140; --art-b: #171d1a; }
[data-family="vermin"], [data-family="spider"]                          { --art-a: #4a4436; --art-b: #151310; }
[data-family="beast"],  [data-family="wolf"], [data-family="boar"]      { --art-a: #3d4c40; --art-b: #0f1613; }
[data-family="fowl"],   [data-family="crow"], [data-family="moth"]      { --art-a: #414a52; --art-b: #11161a; }
[data-family="fish"],   [data-family="turtle"], [data-family="snake"]   { --art-a: #3a4f52; --art-b: #0d1517; }
[data-family="stag"], [data-family="tree"], [data-family="cat"],
[data-family="wax"],  [data-family="lantern"]                           { --art-a: #4d4736; --art-b: #16130e; }
.pcard.is-mini { position: relative; padding: 0; border: 0; background: none; }
.pcard.is-mini .pcard-art { height: 100%; width: 100%; display: block; }
.pcard.is-mini .pcard-cost {
  position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; line-height: 18px;
}
.pcard.is-mini .pcard-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px;
  font-size: 11px; text-align: center; background: linear-gradient(transparent, rgba(8, 6, 4, 0.86));
}

/* ---------------------------------------------------------------- 图鉴虚拟列表 */
/* 卡格不再自带 <img>：.pcol-art 本身就是纹理层 */
.pcol-art {
  display: block; width: 100%; flex: 0 0 auto;
  background-image:
    repeating-linear-gradient(135deg, rgba(225, 204, 162, 0.10) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 34%, var(--art-a, #435048) 0%, var(--art-b, #101a18) 78%);
}
.pcol-cell { contain: layout paint style; }

/* 搜索行 + 计数 */
.pvpcol-searchrow { display: flex; gap: 10px; align-items: center; margin: 10px 0 0; }
.pvpcol-search {
  flex: 1 1 auto; min-width: 0; max-width: 320px; padding: 6px 12px; font-family: var(--serif); font-size: 13px;
  letter-spacing: 1px; color: #efdfc0; background: rgba(18, 12, 8, 0.85);
  border: 1px solid rgba(201, 162, 74, 0.3); border-radius: 999px; outline: none;
}
.pvpcol-search:focus { border-color: rgba(233, 201, 138, 0.8); }
.pvpcol-search::placeholder { color: #7d6e58; }
.pvpcol-count { flex: 0 0 auto; font-size: 12px; letter-spacing: 1px; color: #9c8a70; }

/* 「我的卡牌」虚拟网格：自己滚，格子按窗口挂载 */
.pvpcards-scroll {
  position: relative; margin-top: 12px; padding: 0 12px;
  height: min(52vh, 460px); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; contain: strict;
  border-top: 1px solid rgba(201, 162, 74, 0.16); border-bottom: 1px solid rgba(201, 162, 74, 0.16);
}
.pvpcards-scroll:focus-visible { outline: 2px solid rgba(233, 201, 138, 0.5); outline-offset: -2px; }
.pvpcards-track {
  position: relative; display: grid; gap: 12px; align-content: flex-start; box-sizing: border-box;
}
.pcards-cell { contain: layout paint style; }
.pcards-art {
  position: relative; overflow: hidden; flex: 0 0 auto; border-radius: 2px;
  background-image:
    repeating-linear-gradient(135deg, rgba(225, 204, 162, 0.10) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 34%, var(--art-a, #435048) 0%, var(--art-b, #101a18) 78%);
}
/* ---------------------------------------------------------------- 横屏（390 高）收紧图鉴页头
   390 高的屏上，标题+统计+两排胶囊+搜索框吃掉 244px，网格只剩 52px 可见。
   这里把页头压成一份：标题缩小、胶囊单行横滚、搜索与统计并排。 */
@media (max-height: 460px) {
  .pvpcol { padding: 2px 0 8px; }
  .pvpcol h3 { font-size: 16px; letter-spacing: 3px; margin: 0 0 2px; }
  .pvpcol-sub { font-size: 11px; }
  .pvpcol-head { gap: 8px; }
  .pvpcol-head .btn.btn-sm { min-height: 28px; padding: 4px 10px; font-size: 12px; }
  .pvpcol-stats { margin: 4px 0 0; gap: 6px; font-size: 11px; }
  .pstat { padding: 2px 8px; }
  /* 两排胶囊压成一行可横滚的条，省掉一整排高度 */
  .pvpcol-chips {
    margin: 6px 0 0; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .pvpcol-chips::-webkit-scrollbar { display: none; }
  .pchip { flex: 0 0 auto; padding: 3px 10px; font-size: 11px; letter-spacing: 1px; }
  .pvpcol-searchrow { margin: 6px 0 0; }
  .pvpcol-search { min-height: 30px; padding: 4px 10px; font-size: 12px; }
}
/* 横屏再收紧一档：返回条与图鉴标题并排，统计并进副标题，两排胶囊合并成一排 */
@media (max-height: 460px) {
  #pvp-panel { padding-bottom: 4px; }
  .pvp-panelbar { padding: 0 0 4px; }
  .pvp-panelbar .pbtn { min-height: 26px; padding: 3px 10px; font-size: 12px; }
  .pvpcol { padding: 0 0 4px; }
  .pvpcol-head { align-items: center; }
  .pvpcol h3 { font-size: 15px; letter-spacing: 2px; }
  .pvpcol-sub { font-size: 10px; letter-spacing: 0; }
  .pvpcol-head .btn.btn-sm { min-height: 24px; padding: 2px 8px; font-size: 11px; }
  .pvpcol-stats { margin: 3px 0 0; gap: 5px; font-size: 10px; }
  .pstat { padding: 1px 7px; }
  .pvpcol-chips { margin: 5px 0 0; gap: 5px; }
  .pchip { padding: 2px 9px; font-size: 10px; letter-spacing: 0; }
  .pvpcol-searchrow { margin: 5px 0 0; }
  .pvpcol-search { min-height: 26px; padding: 2px 8px; font-size: 11px; }
  .pcol-cell { border-radius: 2px; }
}