/* Pack Legends：お店の画面（買い物の時間）のドットUI。部品の画像は shopui.js が作る（--n-*：8×8・角は2ドット落とし・枠は1ドット → 2倍で 6px）
   色：背景は深いネイビー／パネルは少し明るい紺／金は お金と価格だけ／マゼンタは 選択中のタブ・特別なパック・レア演出だけ
   日本語は丸ゴシック、数字は ドットの数字（.pxn） */
:root{--n-bg:#08070f;--n-txt:#eef0ff;--n-sub:#aaa8cc;--n-dim:#8a86b0;--n-gold:#ffd75a;--n-mg:#c8428a;--n-line:#231f40;--n-vi:#7a4ad8}
.pxi2,.pxn{display:block;flex:none;image-rendering:pixelated;pointer-events:none;-webkit-user-drag:none}
.nf{border:6px solid transparent;border-image:var(--n-pnl) 3 fill / 6px;image-rendering:pixelated;background:none}

/* ---- 上部：所持金｜第◯夜・あなた VS 相手・★｜残り秒｜勝負 ---- */
#mkt #mTop{top:calc(env(safe-area-inset-top) + 6px);left:6px;right:6px;margin:0 auto;max-width:528px;height:60px;gap:4px;align-items:stretch}
#mkt #money{flex:1 1 0;min-width:0;padding:0 2px;gap:4px;justify-content:center;border:6px solid transparent;border-image:var(--n-hud) 3 fill / 6px;background:none;filter:drop-shadow(0 2px 0 #06060f);text-shadow:none;font-size:0}
#mkt #money small{font-family:var(--f-body);font-weight:900;font-size:11px;color:var(--n-gold);align-self:flex-end;margin:0 0 9px 0}
#mkt #scoreBar{position:relative;top:auto;left:auto;transform:none;flex:0 0 auto;width:116px;padding:0 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:6px solid transparent;border-image:var(--n-hud) 3 fill / 6px;background:none;filter:drop-shadow(0 2px 0 #06060f);font-family:var(--f-body);font-weight:800;white-space:nowrap}
#scoreBar .nt{margin:0;font-size:13px;line-height:1;color:var(--n-txt);font-weight:900;letter-spacing:.06em}
#scoreBar .who{display:flex;align-items:baseline;justify-content:center;gap:3px;max-width:100%;font-size:10.5px;line-height:1.1}
#scoreBar .who .nm{max-width:4.4em;overflow:hidden;text-overflow:ellipsis}
#scoreBar .who .vs{font-family:var(--f-deco);font-weight:400;font-size:10px;color:var(--n-sub)}
#scoreBar .me{color:#9fe8ff}#scoreBar .op{color:#ffb0cc}
#scoreBar .pp{display:flex;align-items:center;gap:5px}
#scoreBar .pips{display:flex;gap:1px;font-size:0}
#scoreBar .pips i{width:14px;height:14px;background:var(--n-starOff) 0 0/100% 100% no-repeat;image-rendering:pixelated;filter:none!important}
#scoreBar .pips i svg{display:none}
#scoreBar .pm i.on{background-image:var(--n-starM)}#scoreBar .po i.on{background-image:var(--n-starO)}
#scoreBar .pp .sep{width:2px;height:10px;background:#2e2a52}
#scoreBar .rdy{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);margin:0;padding:0 4px;font-size:10px;line-height:14px;color:#c8ffd0;background:#0c2a14;box-shadow:0 0 0 2px #7aff8a,0 0 0 4px #06060f}
#mkt #timer{margin:0;flex:0 0 56px;width:56px;height:56px;align-self:center}
#timer canvas{display:block;width:56px;height:56px;image-rendering:pixelated}
#mkt #timer b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-deco);font-weight:400;font-size:16px;line-height:1;color:#fff;text-shadow:var(--ol1)}
#mkt #timer b small{font-family:var(--f-body);font-weight:800;font-size:8px;color:var(--n-sub);margin-top:1px;text-shadow:none}
#mkt #timer.warn b{color:#ff8a7a}
#mkt #readyBtn{align-self:center;height:56px;min-height:0;flex:0 0 auto;padding:0 6px;gap:3px;border:6px solid transparent;border-image:var(--n-btnSp) 3 fill / 6px;background:none;
  filter:drop-shadow(0 2px 0 #06060f);font-family:var(--f-body);font-weight:900;font-size:16px;color:#fff;text-shadow:0 2px 0 #5a0e3a;letter-spacing:.04em}
#mkt #readyBtn:active{transform:translateY(2px);filter:none}
#mkt #readyBtn.glow{animation:nGlow 1s steps(1) infinite}
@keyframes nGlow{50%{filter:drop-shadow(0 2px 0 #06060f) brightness(1.22)}}
/* 2段目：⚙ と 今夜の属性（つよい／よわい） */
#mSub{position:absolute;top:calc(env(safe-area-inset-top) + 70px);left:6px;right:6px;margin:0 auto;max-width:528px;height:30px;display:flex;align-items:center;gap:6px;padding-left:38px;pointer-events:none}
#mkt #wxBar{position:static;height:30px;padding:0 6px;gap:3px;border:6px solid transparent;border-image:var(--n-hud) 3 fill / 6px;background:none;filter:drop-shadow(0 2px 0 #06060f);font-family:var(--f-body);font-weight:800;font-size:11px;color:var(--n-sub);white-space:nowrap}
#wxBar .wl{color:var(--n-sub)}#wxBar .wl.up{color:#ffb08a}#wxBar .wl.dn{color:#9ab8ff;margin-left:6px}#wxBar .wl.sl{color:#ffe08a;margin-left:6px;white-space:nowrap}#wxBar .wl{white-space:nowrap}
#wxBar .elt{font-size:10px;margin:0 1px}
#mkt.on ~ #gearBtn{top:calc(env(safe-area-inset-top) + 70px);left:max(6px,calc(50% - 264px));width:32px;height:30px;border:6px solid transparent;border-image:var(--n-hud) 3 fill / 6px;background:none;filter:drop-shadow(0 2px 0 #06060f)}
#mkt.on ~ #gearBtn svg{width:16px;height:16px}

/* ---- タブ：3つ 同じ大きさ・同じ作り。選んでいる所だけ マゼンタ ---- */
#mkt #tabs{gap:6px;padding:0 6px;height:42px}
#mkt #tabs button{position:relative;flex:1 1 0;min-width:0;height:42px!important;flex-direction:row;gap:5px;padding:0 2px;border:6px solid transparent;border-image:var(--n-tab) 3 fill / 6px;background:none;
  font-family:var(--f-body);font-weight:800;font-size:12.5px;color:var(--n-sub);text-shadow:none;white-space:nowrap;transition:none}
#mkt #tabs button .pxi2{opacity:.72}
#mkt #tabs button.on{border-image-source:var(--n-tabOn);color:#fff}
#mkt #tabs button.on .pxi2{opacity:1}
#mkt #tabs button.on::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-5px;width:10px;height:5px;background:#c8b0ff;clip-path:polygon(0 0,100% 0,100% 20%,80% 20%,80% 60%,60% 60%,60% 100%,40% 100%,40% 60%,20% 60%,20% 20%,0 20%)}
#mkt #tabs button .bang{position:absolute;margin:0;top:-8px;right:-4px;width:16px;height:16px;border-radius:0;line-height:16px;font-size:12px;background:var(--n-gold);color:#3a2000;box-shadow:0 0 0 2px #06060f}
@media (max-width:360px){#mkt #tabs button{font-size:11.5px;gap:3px}}

/* ---- 本文：深いネイビーのパネル（上のほうは 町がうっすら見える） ---- */
#mkt #panel{border-top:0;border-radius:0;box-shadow:none;background:linear-gradient(#08070fb8 0 18px,#08070fd8 18px 36px,#08070ff0 36px 54px,#08070f 54px)}
#mkt #pBody{padding:8px 8px 0}
#mkt #pBody.dk{padding-top:8px}
.shH{display:flex;flex-direction:column;gap:2px;padding:2px 4px 0}
.shH b{font-size:19px;line-height:1.15;font-weight:900;color:#fff;letter-spacing:.06em;text-shadow:0 2px 0 #06060f}
.shH small{font-size:11.5px;line-height:1.3;font-weight:700;color:var(--n-sub)}
.shDiv{position:relative;height:2px;margin:6px 4px 10px;background:var(--n-line)}
.shDiv i{position:absolute;left:62%;top:-3px;width:8px;height:8px;background:var(--n-bg);box-shadow:inset 0 0 0 2px #3a3468}

/* パックのパネル：絵｜名前・保証の札・中身の帯・内訳・価格と購入ボタン */
.pkList{display:flex;flex-direction:column;gap:8px;padding:0 0 12px}
.pkP{position:relative;display:flex;gap:8px;padding:2px 2px 2px 0;border:6px solid transparent;border-image:var(--n-pnl) 3 fill / 6px;image-rendering:pixelated}
.pkP.spc{border-image-source:var(--n-pnlSp)}
.pkP.soldo{border-image-source:var(--n-pnlOut)}
.pkA{position:relative;flex:none;width:68px;display:flex;align-items:center;justify-content:center}
.pkA img{display:block;width:64px;height:92px;image-rendering:pixelated;-webkit-user-drag:none;transition:transform .1s steps(2)}
.pkP.took .pkA img{transform:translateY(-6px)}
.pkP.soldo .pkA img{filter:grayscale(1) brightness(.5)}
.pkTag{position:absolute;left:-8px;top:-10px;z-index:1;padding:0 3px;border:4px solid transparent;border-image:var(--n-tag) 3 fill / 4px;font-size:10.5px;line-height:13px;font-weight:900;color:#fff;white-space:nowrap}
.pkP.soldo .pkTag{filter:grayscale(1) brightness(.7)}
.pkM{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:1px}
.pkH{display:flex;align-items:center;gap:6px;min-width:0;height:18px}
.pkN{flex:none;font-size:15px;line-height:1;font-weight:900;color:#fff;white-space:nowrap}
.pkH small{min-width:0;font-size:10.5px;font-weight:700;color:var(--n-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkG{margin-left:auto;flex:none;padding:0 4px;font-size:10px;line-height:14px;font-weight:900;color:#fff;background:#5a1238;box-shadow:inset 0 0 0 2px var(--n-mg)}
.pkBar{display:block;height:8px;padding:1px;background:#06060f;box-shadow:inset 0 0 0 1px #2a2448}
.pkFill{display:flex;gap:1px;height:100%;min-width:3px;transition:width .6s steps(8)}   /* のこりの袋の 割合（買うたびに 縮む） */
.pkBar i{display:block;height:100%;min-width:2px}
.pkP.soldo .pkBar{filter:grayscale(1) brightness(.5)}
.pkS{font-size:11px;line-height:1.2;font-weight:700;color:var(--n-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkC{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.pkCl{flex:none;font-size:10px;font-weight:700;color:var(--n-dim)}
.chip{flex:none;display:inline-flex;align-items:center;gap:1px;padding:0 2px;border:4px solid transparent;border-image:var(--n-chip) 2 fill / 4px;font-size:11px;line-height:14px;font-weight:800;color:#dfe2ff}
.chip em{font-style:normal;font-family:var(--f-deco);font-weight:400;font-size:12px;margin-right:2px}
.chip.none{color:var(--n-dim);font-weight:700;font-size:10.5px}
.pkP.soldo .pkH,.pkP.soldo .pkS,.pkP.soldo .pkC{opacity:.55}
.pkB{display:flex;align-items:center;gap:5px;margin-top:1px}
.pkPr{flex:0 0 auto;min-width:78px;display:flex;align-items:center;gap:3px}
.pkPr small{align-self:flex-end;margin-bottom:3px;font-size:11px;font-weight:900;color:var(--n-gold)}
.pkPr.soldo{font-size:13px;font-weight:900;color:#8a8ca8}
.pbB,.pbT{flex:1 1 0;min-width:0;height:40px;padding:0;border:6px solid transparent;border-image:var(--n-btn) 3 fill / 6px;display:flex;align-items:center;justify-content:center;gap:4px;
  font-family:var(--f-body);font-size:14px;font-weight:900;color:#fff;text-shadow:0 1px 0 #06060f;filter:drop-shadow(0 2px 0 #06060f);white-space:nowrap}
.pbB.spc{border-image-source:var(--n-btnSp)}
.pbT{flex-direction:column;gap:0;font-size:11px;line-height:1.15}
.pbT b{font-weight:900}.pbT em{font-style:normal;color:#ffb0dc}
.pbT small{display:flex;align-items:center;gap:2px;font-size:10px;font-weight:900;color:var(--n-gold)}
.pkP.one .pbB{flex:0 1 150px;margin-left:auto}
.pbB:active,.pbT:active{transform:translateY(2px);filter:none}
.pbB.no,.pbT.no{filter:grayscale(.6) brightness(.6) drop-shadow(0 2px 0 #06060f)}
.pbB.off,.pbT.off{border-image-source:var(--n-btnOff);color:#7a7c98;text-shadow:none;filter:none}
.pbT.off small{color:#7a7c98}
#pBody.pend .pbB,#pBody.pend .pbT{opacity:.45}
.pkP.shk{animation:pkShk .3s steps(6)}
@keyframes pkShk{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.fxFly2{position:fixed;left:0;top:0;z-index:45;pointer-events:none;image-rendering:pixelated;transform-origin:50% 50%;-webkit-user-drag:none}

/* ---- 下部：自動売却・売ったカード｜デッキの枚数と属性 ＋ 手札 ---- */
#mkt #hand2{padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);background:var(--n-bg);border-top:2px solid var(--n-line);box-shadow:none}
#bPlates{display:flex;gap:6px;margin-bottom:6px}
.bpl{flex:1 1 0;min-width:0;min-height:58px;padding:0 2px;border:6px solid transparent;border-image:var(--n-pnl) 3 fill / 6px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.bpRow{display:flex;align-items:center;gap:5px;width:100%;min-height:22px;padding:0;text-align:left;font-family:var(--f-body);font-size:12px;font-weight:800;color:var(--n-txt);white-space:nowrap}
button.bpRow:active{transform:translateY(1px)}
.bpRow.sub{font-size:11px;color:var(--n-sub);font-weight:700;border-top:2px solid var(--n-line);padding-top:2px}
.bpRow .bpT{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bpRow em{margin-left:auto;font-style:normal;font-weight:900;color:var(--n-txt)}
.tgl{position:relative;margin-left:auto;flex:none;width:44px;height:22px;border:6px solid transparent;border-image:var(--n-tgl) 3 fill / 6px}
.tgl i{position:absolute;left:-2px;top:-2px;width:14px;height:14px;background:#5a5c80;box-shadow:inset 0 2px 0 #8a8cb0}
.tgl b{position:absolute;right:-1px;top:-3px;font-family:var(--f-deco);font-weight:400;font-size:9px;line-height:16px;color:#8a8ca8}
.tgl.on{border-image-source:var(--n-tglOn)}.tgl.on i{left:auto;right:-2px;background:#eaffee;box-shadow:inset 0 -2px 0 #7aff8a}.tgl.on b{right:auto;left:0;color:#c8ffd0}
#mkt #hand2 .lbl{position:static;display:flex;align-items:center;gap:5px;font-family:var(--f-body);font-weight:800;font-size:12px;color:var(--n-txt);min-width:0;white-space:nowrap}
#mkt #hand2 .lbl b{font-weight:900}
#mkt #hand2 .lbl.over{color:#ff8a7a}
#mkt #dStat{position:static;height:auto;display:flex;align-items:center;gap:6px;font-family:var(--f-body);font-weight:800;font-size:11px;color:var(--n-txt);border-top:2px solid var(--n-line);padding-top:2px;min-height:20px;white-space:nowrap;overflow:hidden}
#dStat .de{display:inline-flex;align-items:center;gap:1px}
#dStat .de .elt{font-size:9px;margin:0 1px 0 0}
#dStat .de.z{opacity:.4}
#mkt #handRow{height:50px}
#mkt .mini{border-width:2px}

/* ---- 買取屋・シングルカード：同じ決まり（パネル・見出し・ボタン） ---- */
#mkt #pBody .sbar{padding:2px 2px 6px;gap:5px}
#mkt #pBody .sbar .pill,#mkt #pBody .sbar .dblN{height:32px;padding:0 6px;border:6px solid transparent;border-image:var(--n-btn) 3 fill / 6px;border-radius:0;background: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;box-shadow:none}
#mkt #pBody .sbar .pill:active{transform:translateY(2px);filter:none}
#mkt #pBody .sbar .elp.no{opacity:.4}
#mkt #pBody .sbar .dblN{border-image-source:var(--n-chip);color:#9fe8ff;filter:none}
#mkt #pBody .sbar .elp small{font-family:var(--f-deco);font-weight:400;font-size:12px}
#mkt #pBody:not(.dk) .sgrid{top:118px}
#mkt #pBody:not(.dk) .shH b{flex:none;white-space:nowrap}
#mkt #pBody:not(.dk) .shH{flex-direction:row;align-items:baseline;gap:8px;margin-bottom:6px}
#mkt #pBody:not(.dk) .shH small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mkt #pBody .sellAll{left:8px;right:8px;bottom:8px;min-height:46px;border:6px solid transparent;border-image:var(--n-btnSp) 3 fill / 6px;background:none;filter:drop-shadow(0 2px 0 #06060f);
  font-family:var(--f-body);font-weight:900;font-size:16px;color:#fff;text-shadow:0 2px 0 #5a0e3a}
#mkt #pBody .sellAll:disabled{border-image-source:var(--n-btnOff);color:#8a8ca8;text-shadow:none;filter:none}
#mkt .sgrid .sp{border-radius:0;background:#08070f;box-shadow:0 0 0 2px #06060f}
#mkt .dkCase{margin:0 0 10px;padding:4px 4px 6px;border:6px solid transparent;border-image:var(--n-pnlSp) 3 fill / 6px;border-radius:0;background:none;box-shadow:none}
#mkt .dkCaseT{font-family:var(--f-body);font-weight:900;font-size:12px;color:#ffb0dc;letter-spacing:.2em}
#mkt .dkGrid{padding:8px 0 12px}
#mkt button.dkP{height:32px;padding:0 8px;border:6px solid transparent;border-image:var(--n-btn) 3 fill / 6px;border-radius:0;background:none;filter:drop-shadow(0 2px 0 #06060f);color:var(--n-gold);font-size:13px}
#mkt button.dkP:active{transform:translateY(2px);filter:none}
#mkt div.dkP{border-radius:0;border:6px solid transparent;border-image:var(--n-btnOff) 3 fill / 6px;background:none;color:#8a8ca8}
#mkt .dkN,#mkt .dkWant,#mkt .dkRiv{border-radius:0}
#mkt .dkWant{animation:none}
#mkt .dkEmpty{margin-top:6px}
#mkt #hand2 .lbl .sh{font-size:11px;font-weight:900;color:#ff8a7a;animation:blink .8s infinite}
#mkt #hand2 .lbl.over{animation:none}
#mkt #hand2 .dsub{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--n-sub);font-size:10px;font-weight:800}
#mkt #hand2 .dsub svg{width:11px;height:11px}
#hand2 .dcv2{margin-left:auto;flex:none;display:flex;align-items:flex-end;gap:2px;height:12px;padding:0 1px;border-bottom:2px solid var(--n-line)}
#hand2 .dcv2 i{display:block;width:5px;background:#7a82e6}
#mkt #pBody .shH{margin-bottom:6px}
#mkt #pBody .shH + .shDiv{margin-top:0}
#mkt #mTop,#mkt #mSub{z-index:4}
#bpAuto .bpRow .bpT{font-size:11.5px;letter-spacing:-.02em}
.tgl{width:40px}
#hand2 .dsub .ic{display:inline-flex;align-items:center;gap:1px}
#mkt #labels .bubble{z-index:5;white-space:normal;width:max-content;max-width:150px;font-size:12px;line-height:1.3;text-align:center}
#dStat .dsub + .dcv2{display:none}
#mkt #money{padding:0;gap:2px}
#mkt #money small{margin-left:1px}
#mkt #scoreBar{width:112px}
#mkt #readyBtn{padding:0 3px;gap:2px;font-size:15px}

/* 中央の札（ラウンド・あなた VS 相手・星）を 逆台形に（見本の形。段は2ドットずつ＝ドットの斜め） */
#mkt #scoreBar{width:142px;border:0;border-image:none;background:none;isolation:isolate;filter:drop-shadow(0 2px 0 #06060f);padding:0 18px}
#mkt #scoreBar::before,#mkt #scoreBar::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
#mkt #scoreBar::before{background:#3a3468;clip-path:polygon(0px calc(0.00% + 0px), 0px 12.50%, 2px calc(12.50% + 0px), 2px 25.00%, 4px calc(25.00% + 0px), 4px 37.50%, 6px calc(37.50% + 0px), 6px 50.00%, 8px calc(50.00% + 0px), 8px 62.50%, 10px calc(62.50% + 0px), 10px 75.00%, 12px calc(75.00% + 0px), 12px 87.50%, 14px calc(87.50% + 0px), 14px calc(100% - 0px), calc(100% - 14px) calc(100% - 0px), calc(100% - 14px) calc(87.50% + 0px), calc(100% - 12px) 87.50%, calc(100% - 12px) calc(75.00% + 0px), calc(100% - 10px) 75.00%, calc(100% - 10px) calc(62.50% + 0px), calc(100% - 8px) 62.50%, calc(100% - 8px) calc(50.00% + 0px), calc(100% - 6px) 50.00%, calc(100% - 6px) calc(37.50% + 0px), calc(100% - 4px) 37.50%, calc(100% - 4px) calc(25.00% + 0px), calc(100% - 2px) 25.00%, calc(100% - 2px) calc(12.50% + 0px), calc(100% - 0px) 12.50%, calc(100% - 0px) calc(0.00% + 0px))}
#mkt #scoreBar::after{background:linear-gradient(#151228 0 6px,#0a0916 6px);clip-path:polygon(2px calc(0.00% + 2px), 2px 12.50%, 4px calc(12.50% + 0px), 4px 25.00%, 6px calc(25.00% + 0px), 6px 37.50%, 8px calc(37.50% + 0px), 8px 50.00%, 10px calc(50.00% + 0px), 10px 62.50%, 12px calc(62.50% + 0px), 12px 75.00%, 14px calc(75.00% + 0px), 14px 87.50%, 16px calc(87.50% + 0px), 16px calc(100% - 2px), calc(100% - 16px) calc(100% - 2px), calc(100% - 16px) calc(87.50% + 0px), calc(100% - 14px) 87.50%, calc(100% - 14px) calc(75.00% + 0px), calc(100% - 12px) 75.00%, calc(100% - 12px) calc(62.50% + 0px), calc(100% - 10px) 62.50%, calc(100% - 10px) calc(50.00% + 0px), calc(100% - 8px) 50.00%, calc(100% - 8px) calc(37.50% + 0px), calc(100% - 6px) 37.50%, calc(100% - 6px) calc(25.00% + 0px), calc(100% - 4px) 25.00%, calc(100% - 4px) calc(12.50% + 0px), calc(100% - 2px) 12.50%, calc(100% - 2px) calc(0.00% + 2px))}