/* Pack Legends：req6 で 新しく作った部品だけの見た目（ほかは shopui.css・ui.css・bui.css）
   ・画面下のデッキ構築ゾーン（#hand2.dz）：1段目 枚数・あと何枚｜デッキを見る　2段目 属性・仲間と術・コストの山　3段目 デッキのカード
   ・パック屋の 各パックの「主まで」の進み具合（.pkTh / .thP）と おすすめ（.pkBest）、見出しの「売ったカード」（.shAuto）
   ・バトル：自動ターン終了の お知らせ（#endTurn.auto）
   枠は shopui.js の ドットの枠（--n-*）を使う */

/* ---- デッキ構築ゾーン ---- */
#mkt #hand2.dz{padding:6px 8px calc(env(safe-area-inset-bottom) + 6px);display:flex;flex-direction:column;gap:5px}
#dzHead{display:flex;align-items:center;gap:8px;min-height:40px}
#mkt #hand2.dz #hLbl{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;font-size:13px}
#mkt #hand2.dz #hLbl b{font-size:14px;white-space:nowrap}
#mkt #hand2.dz #hLbl b em{font-style:normal;font-family:var(--f-deco);font-weight:400;font-size:18px;color:#fff;margin:0 1px}
#mkt #hand2.dz #hLbl .sh{font-size:12px;padding:0 4px;color:#ff8a7a;box-shadow:inset 0 0 0 2px #ff8a7a;line-height:18px;animation:none}
#mkt #hand2.dz #hLbl .ok{font-size:11px;padding:0 4px;color:#c8ffd0;box-shadow:inset 0 0 0 2px #3a8a4a;line-height:18px;white-space:nowrap}
#dzOpen{flex:none;height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 6px;border:6px solid transparent;border-image:var(--n-btn) 3 fill / 6px;background:none;
  filter:drop-shadow(0 2px 0 #06060f);font-family:var(--f-body);font-weight:900;font-size:14px;color:#fff;letter-spacing:.04em;white-space:nowrap;cursor:pointer}
#dzOpen:active{transform:translateY(2px);filter:none}
#mkt #hand2.dz #dStat{display:flex;align-items:center;gap:6px;border-top:2px solid var(--n-line);padding-top:4px;min-height:24px;overflow:visible}
#dStat .dzG{display:inline-flex;align-items:center;gap:5px;padding-right:6px;border-right:2px solid var(--n-line);white-space:nowrap}
#dStat .dzG:last-child{border-right:0;padding-right:0;margin-left:auto}
#dStat .dzTy .ic{display:inline-flex;align-items:baseline;gap:1px;color:var(--n-sub);font-size:10.5px}
#dStat .dzTy .ic b{color:var(--n-txt);font-size:12px;font-weight:900}
#dStat .dzCv{align-items:flex-end;gap:3px}
#dStat .dzCv .cap{align-self:center;font-size:10px;color:var(--n-sub);margin-right:1px}
#dStat .dzCv .cb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:22px;width:12px}
#dStat .dzCv .cb i{display:block;width:8px;background:#7a82e6;box-shadow:inset 0 2px 0 #a8aef6}
#dStat .dzCv .cb small{font-family:var(--f-deco);font-weight:400;font-size:9px;line-height:9px;color:var(--n-sub);margin-top:1px}
#mkt #hand2.dz #handRow{height:50px}
@media (max-width:360px){#dzOpen{font-size:12.5px;gap:4px}#dStat .dzG{gap:3px;padding-right:4px}}

/* ---- パック屋：各パックの「主まで」 ---- */
.pkP.hasTh{flex-wrap:wrap}
.pkTh{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:2px 0 0 2px;padding-top:4px;border-top:2px solid var(--n-line)}
.thP{flex:none;display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 3px 0 1px;border:4px solid transparent;border-image:var(--n-chip) 2 fill / 4px;background:none;
  font-family:var(--f-body);font-size:10.5px;font-weight:800;color:var(--n-txt);cursor:pointer}
.thP img{width:18px;height:18px;object-fit:none;object-position:50% 12%;image-rendering:pixelated;box-shadow:inset 0 -2px 0 var(--tc)}
.thP b{color:var(--tc);font-weight:900}
.thP .pxn{margin-left:1px}
.thP em{font-style:normal;font-size:10px;font-weight:900;color:#3a2000;background:var(--n-gold);padding:0 2px;line-height:13px;margin-left:2px}
.thP.near{border-image-source:var(--n-tag)}
.thP.done{opacity:.6}
.thP:active{transform:translateY(1px)}
.pkBest{flex:1 0 100%;font-size:10.5px;font-weight:900;color:var(--n-gold)}
.pkBest::before{content:"▲ "}
.pkP.best{border-image-source:var(--n-pnlSp)}
/* 見出しの 控えめな「売ったカード」 */
.shH{position:relative}
.shAuto{position:absolute;right:2px;top:0;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 2px;border:4px solid transparent;border-image:var(--n-chip) 2 fill / 4px;background:none;
  font-family:var(--f-body);font-size:10.5px;font-weight:800;color:var(--n-sub);white-space:nowrap;cursor:pointer}

/* ---- バトル：やれることが無いので 自動でターン終了（ボタンを 光らせる） ---- */
#endTurn.auto{animation:dzAuto .25s steps(1) infinite}
@keyframes dzAuto{50%{filter:brightness(1.45)}}

/* ---- レア度：★5（レジェンド・前の★6）＝金、rp＝レア度なし（テーマの主・プロモ）＝前の★5の赤。ui.css・bui.css の r5/r6 を ここで読みかえる ---- */
.card.r5 .nm::before{border-image-source:var(--bui-nm6)}.card.rp .nm::before{border-image-source:var(--bui-nm5)}
.card.magic.r5 .nm::before{border-image-source:var(--bui-nmM6)}.card.magic.rp .nm::before{border-image-source:var(--bui-nmM5)}
.card.magic.r5{border-image-source:var(--ui-oct6)}.card.magic.rp{border-image-source:var(--ui-oct5)}
.card .rs.np{font-size:.62em;letter-spacing:.06em;color:#fff;background:#c8284a;padding:0 .3em;line-height:1.35;text-shadow:none;box-shadow:0 0 0 .08em #0b0818}

/* ---- ロック（鍵）と「ロックと相性◎」 ---- */
.lkT{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 8px;border:6px solid transparent;border-image:var(--n-btn) 3 fill / 6px;background:none;
  filter:drop-shadow(0 2px 0 #06060f);font-family:var(--f-body);font-weight:900;font-size:13px;color:#fff;white-space:nowrap;cursor:pointer;pointer-events:auto}
.lkT.on{border-image-source:var(--n-tglOn);color:#ffe8a0}
.lkT:active{transform:translateY(2px);filter:none}
.lkT.sm{position:absolute;left:-6px;top:42%;z-index:8;height:26px;padding:0 1px;gap:0}
.lkT.sm span{display:none}
.lkT.pv{margin-top:10px}
#cvBtns .lkT{height:44px;font-size:14px}
.lkB{position:absolute;right:2px;top:2px;z-index:6;padding:1px;background:#0b0818;box-shadow:0 0 0 1px #ffd75a;line-height:0}
.lkS{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);z-index:6;white-space:nowrap;padding:0 2px;font-family:var(--f-body);font-size:8px;line-height:11px;font-weight:900;color:#0b2a12;background:#7aff8a;box-shadow:0 0 0 1px #0b0818}
.lkS.big{font-size:10px;line-height:13px;bottom:auto;top:30%}
.asTag.keep{border-color:#ffd75a;color:#ffe8a0;background:#2a2008ee}

/* ---- デッキ詳細＝売る場所（前の 買取屋の機能） ---- */
#deckv .dvHead{gap:6px}
#deckv #dvTitle{display:flex;align-items:baseline;gap:6px}
#deckv #dvTitle .sh{font-size:12px;color:#ff8a7a}
.dvAu{flex:none;display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 3px;border:4px solid transparent;border-image:var(--n-chip) 2 fill / 4px;background:none;
  font-family:var(--f-body);font-size:11px;font-weight:800;color:var(--n-sub);white-space:nowrap;cursor:pointer}
#deckv .dvBar{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
#deckv .dvBar .pill,#deckv .dvBar .dblN{height:32px;padding:0 6px;border:6px solid transparent;border-image:var(--n-btn) 3 fill / 6px;border-radius:0;background:none;box-shadow:none;
  filter:drop-shadow(0 2px 0 #06060f);display:inline-flex;align-items:center;gap:3px;font-family:var(--f-body);font-weight:900;font-size:12px;color:#fff}
#deckv .dvBar .pill:active{transform:translateY(2px);filter:none}
#deckv .dvBar .dblN{border-image-source:var(--n-chip);color:#9fe8ff;filter:none}
#deckv .dvBar .pill.au{color:var(--n-gold)}
#deckv .dvBar .elp.no{opacity:.4}
#deckv .dvBar .elp small{font-family:var(--f-deco);font-weight:400;font-size:12px}
#deckv .dvP{display:flex;align-items:center;justify-content:center;gap:2px}
#deckv .dvP.dbl{color:#9fe8ff}#deckv .dvP em{font-style:normal;font-size:10px;color:#9fe8ff}
#deckv #dvSell:disabled{opacity:.6}