/* blackmarket (UX redesign 2026-10-06): one market, BUY / SELL tabs. Two columns on a computer, stacked on a phone. */
html.lay-desk .pgScr.bmScr { max-width:1240px; }
.bmScr { padding-bottom:18px; }
.bmTabs { display:flex; margin:4px 0 12px; }
.bmTabs button { flex:1; font-size:18px; padding:10px 4px 11px; }
.bmTabs button.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 60%,var(--yl3)); }

.bmCols { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); align-items:start; }
.bmScr { container:pg / inline-size; } /* M2: see loadout.css */
@container pg (min-width:820px) {
  .bmSell { grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); }
  .bmBuy { grid-template-columns:210px minmax(0,1fr); }
  .bmOpts, .bmFilt { position:sticky; top:8px; }
}
.bmPane { background:var(--panelBg); border:3px solid var(--ol); border-radius:16px; box-shadow:var(--panelSh); padding:12px; min-width:0; }
.bmPh { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.bmPh h2 { margin:0; font:400 21px var(--fh); color:var(--yl1); text-shadow:var(--so); letter-spacing:.3px; flex:1; min-width:0; }
.bmPhR { display:flex; gap:6px; align-items:center; }
.bmSort { min-height:34px; padding:4px 8px; font:700 13px var(--fb); border-radius:10px; }

/* ---- shared tiles ---- */
.bmArt { position:relative; display:block; aspect-ratio:1/1; border-radius:11px; border:2.5px solid var(--ol); background:radial-gradient(circle at 50% 40%, var(--r3, #aee2ff) 0, var(--r1, #52b4ff) 35%, var(--r2, #1c5fcc) 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.35); overflow:hidden; }
.bmArt > img, .bmArt > .art, .bmArt > span { position:absolute; inset:9%; width:82%; height:82%; object-fit:contain; display:flex; align-items:center; justify-content:center; font-size:34px; }
.bmQ { position:absolute; right:5px; bottom:3px; font:400 16px var(--fh); font-style:normal; color:#fff; text-shadow:var(--so2); }
.bmRar { position:absolute; left:5px; bottom:4px; font:400 10.5px var(--fh); font-style:normal; color:#fff; background:rgba(8,20,45,.75); border-radius:7px; padding:1px 6px 2px; letter-spacing:.3px; text-transform:uppercase; }
.bmN { display:block; font:400 14px var(--fh); color:#fff; text-shadow:var(--so2); line-height:1.1; margin-top:6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.bmWhy { display:flex; align-items:center; gap:4px; font:800 11.5px var(--fb); color:var(--mut); margin-top:4px; }
.bmWhy svg, .bmNone svg, .bmLk small svg, .bmLock svg { width:12px; height:12px; flex:none; }

/* ---- faces ---- */
.bmFace { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:50%; border:2px solid var(--ol); background:var(--c, #2a6fc0); overflow:hidden; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.bmFace img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bmFace .ini { font:400 12px var(--fh); color:#fff; text-shadow:var(--so2); }
.bmFace.pic .ini { display:none; }
.bmFace.sm { width:28px; height:28px; } .bmFace.sm .ini { font-size:10px; }
.bmFace.xs { width:22px; height:22px; border-width:1.5px; } .bmFace.xs .ini { font-size:9px; }
.bmFace.pl { background:#26466f; } .bmFace.pl svg { width:13px; height:13px; }

/* ---- SELL: stash grid ---- */
.bmGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; }
.bmItem { position:relative; padding:7px; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(180deg,#235ea8,#173f7a); box-shadow:inset 0 2px 0 rgba(140,205,255,.25), 0 3px 0 rgba(4,12,30,.5); cursor:pointer; user-select:none; transition:transform .08s; }
.bmItem:hover { transform:translateY(-1px); }
.bmItem.on { border-color:var(--gr2); box-shadow:0 0 0 3px var(--gr1), inset 0 2px 0 rgba(200,255,180,.3), 0 3px 0 rgba(4,12,30,.5); }
.bmItem.no { cursor:default; opacity:.72; } .bmItem.no:hover { transform:none; }
.bmItem.no .bmArt { filter:grayscale(.65); }
.bmChk { position:absolute; z-index:2; left:4px; top:4px; width:26px; height:26px; border-radius:8px; border:2.5px solid var(--ol); background:#e8f2ff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.bmChk svg { width:17px; height:17px; opacity:0; color:#fff; }
.bmItem.on .bmChk { background:linear-gradient(180deg,var(--gr1),var(--gr2)); } .bmItem.on .bmChk svg { opacity:1; }
.bmVal { display:block; margin-top:3px; font:800 12px var(--fb); }
.bmVal.mut { color:var(--mut); }
.bmTip { display:block; margin-top:3px; font:800 11px var(--fb); color:#9ff0c8; line-height:1.2; }

/* ---- SELL: the two choices ---- */
.bmOpts .empty { padding:20px 8px; }
.bmChoice { border:3px solid var(--ol); border-radius:14px; padding:11px; margin-bottom:10px; box-shadow:inset 0 2px 0 rgba(255,255,255,.2), 0 3px 0 rgba(4,12,30,.5); }
.bmChoice h3 { margin:0; font:400 20px var(--fh); color:#fff; text-shadow:var(--so); letter-spacing:.3px; text-transform:uppercase; }
.bmSub { margin:3px 0 9px; font:700 12.5px var(--fb); color:#e4f1ff; }
.bmNow { background:linear-gradient(180deg,#2d8a3a,#17582a); }
.bmList { background:linear-gradient(180deg,#2a6fc0,#173f7a); }
.bmLines { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.bmLine { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"ic nm pr" "ic to pr"; column-gap:8px; align-items:center; padding:5px 7px; border-radius:10px; background:rgba(5,25,15,.4); }
.bmLine > .ic { grid-area:ic; }
.bmLn { grid-area:nm; font:800 13px var(--fb); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bmLn em, .bmTo em { font-style:normal; color:#b4ffb0; }
.bmTo { grid-area:to; display:flex; align-items:center; gap:5px; font:700 12px var(--fb); color:#d4ffd0; min-width:0; }
.bmTo > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bmPr { grid-area:pr; font-weight:800; }
.bmNone { font:700 12px var(--fb); color:#ffe2a8; margin:0 0 8px; display:flex; flex-direction:column; gap:3px; }
.bmNone > div { display:flex; gap:5px; align-items:flex-start; }
.bmTotal { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:4px 0 10px; font:400 16px var(--fh); color:#fff; text-shadow:var(--so2); }
.bmTotal .gold { font:400 28px var(--fh); text-shadow:var(--so); }
.bmTotal.sm .gold { font-size:18px; }
.bmLock { display:flex; gap:5px; align-items:center; color:#ffe2a8 !important; margin:0 0 8px; }
.bmMine { margin-top:8px; }
.bmHint { display:flex; gap:8px; align-items:center; padding:9px 11px; border-radius:12px; border:2.5px solid var(--ol); background:#0d2a55; font:800 13px var(--fb); color:#fff; }
.bmHint svg { width:18px; height:18px; flex:none; color:var(--blue); }
.bmHint a { color:var(--blue); text-decoration:underline; }

/* ---- BUY: filters ---- */
.bmCats { display:flex; flex-direction:column; gap:6px; }
.bmCats button, .bmWho button { border:2.5px solid var(--ol); border-radius:12px; padding:8px 12px 9px; background:linear-gradient(180deg,#2a6cbc,#1a4c90); box-shadow:inset 0 2px 0 rgba(140,205,255,.3), 0 2px 0 rgba(0,0,0,.3); font:400 15px var(--fh); color:#fff; text-shadow:var(--so2); text-align:left; cursor:pointer; }
.bmCats button.on, .bmWho button.on { background:linear-gradient(180deg,var(--yl1),var(--yl2) 60%,var(--yl3)); }
.bmLbl { margin:12px 0 6px; font:400 15px var(--fh); color:var(--yl1); text-shadow:var(--so2); }
.bmWho { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.bmWho button { padding:7px 2px 8px; font-size:13px; text-align:center; }
.bmLocked { display:flex; flex-direction:column; gap:6px; }
.bmLk { display:flex; gap:7px; align-items:center; opacity:.8; }
.bmLk .bmFace { filter:grayscale(.7); }
.bmLk b { display:block; font:400 13px var(--fh); color:#fff; text-shadow:var(--so2); }
.bmLk small { display:flex; gap:3px; align-items:center; font:700 11px var(--fb); color:var(--mut); }
@container pg (max-width:819px) {
  .bmCats { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .bmCats button { flex:none; padding:6px 11px 7px; font-size:13px; }
  .bmLocked { flex-direction:row; flex-wrap:wrap; }
}

/* ---- BUY: feed ---- */
.bmShop { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.bmCard { display:flex; flex-direction:column; padding:7px; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(180deg,#235ea8,#173f7a); box-shadow:inset 0 2px 0 rgba(140,205,255,.25), 0 3px 0 rgba(4,12,30,.5); min-width:0; }
.bmCard.player { background:linear-gradient(180deg,#3a4fa8,#22306e); }
.bmTag { display:flex; align-items:center; gap:5px; margin:-2px 0 6px; padding:2px 7px 2px 2px; border-radius:12px; font:400 12px var(--fh); color:#fff; text-shadow:var(--so2); min-width:0; }
.bmTag > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bmTag.dl { background:linear-gradient(180deg,#2f9a3e,#1b6a2a); }
.bmTag.pl { background:linear-gradient(180deg,#5a6fd0,#34459a); }
.bmMeta { display:block; font:700 11.5px var(--fb); color:var(--mut); margin-top:2px; }
.bmBtns { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:7px; }
.bmBtns .btn { flex:1 1 auto; min-width:0; }
.bmBtns .bmWhy, .bmBtns .pill { margin:4px auto 0; }

@media (max-width:520px) {
  .bmGrid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px; }
  .bmShop { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .bmN { font-size:12.5px; }
  .bmPane { padding:9px; border-radius:14px; }
  .bmTotal .gold { font-size:24px; }
}