/* Markets (client/panels-market.js) */
.mk-root { min-height: 100%; display: flex; flex-direction: column; margin: -12px -12px 0; background: radial-gradient(ellipse at 50% 20%, #5a4a2e, #2a2014 70%); }
#panel .pn-wrap.mk-root { padding-bottom: 0; min-height: calc(100% + 12px); } /* tab bar sits flush at the bottom even on short tabs (as in the Clan Duel) */
.mk-awning { position: relative; height: 54px; background:
  radial-gradient(circle at 50% 100%, transparent 14px, transparent 0) , repeating-linear-gradient(90deg, #f3d9b0 0 34px, #c8573c 34px 68px);
  -webkit-mask: radial-gradient(circle 17px at 17px 54px, transparent 16px, #000 17px) 0 0 / 34px 100% repeat-x;
          mask: radial-gradient(circle 17px at 17px 54px, transparent 16px, #000 17px) 0 0 / 34px 100% repeat-x;
  box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.mk-rubies { position: absolute; right: 10px; top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 800 14px/1 system-ui; }
.mk-res { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px 4px; }
.mk-res span { padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font: 700 12px/1.2 system-ui; } .mk-res b { font-weight: 900; }
.mk-body { flex: 1; padding: 8px 12px 16px; }
.mk-merchant { position: relative; height: 150px; margin: 6px 0 12px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 25% 40%, var(--c-amber-hi), #e3902c 45%, #8a3a1a 100%); border: 3px solid var(--c-amber); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.mk-dealer { position: absolute; left: 8px; bottom: -8px; width: 120px; height: 150px; display: grid; justify-items: center; align-content: end; }
.mk-dealer .hat { font-size: 54px; line-height: .8; margin-bottom: -16px; position: relative; z-index: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.mk-dealer .face { font-size: 90px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); }
.mk-bubble { position: absolute; left: 130px; right: 10px; top: 12px; padding: 8px 12px; border-radius: 12px; background: #fff8ec; color: #4a3a2a; font: 600 14px/1.3 system-ui; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.mk-bubble::before { content: ''; position: absolute; left: -10px; top: 18px; border: 6px solid transparent; border-right: 10px solid #fff8ec; }
.mk-refresh { position: absolute; left: 10px; bottom: 8px; display: grid; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.45); }
.mk-refresh small { font: 700 11px/1 system-ui; color: #f3e6cf; } .mk-refresh b { font: 900 18px/1.1 ui-monospace, Menlo, monospace; color: #fff; }
.mk-refresh-btn { position: absolute; right: 10px; bottom: 10px; min-width: 120px; height: 44px; border-radius: 10px; border: 0; font: 900 20px/1 system-ui; color: #fff;
  background: linear-gradient(#ffcf5a, #d9901f); box-shadow: 0 4px 0 #8a5a10; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.mk-refresh-btn.free { background: linear-gradient(var(--c-good-hi), #4fa52b); box-shadow: 0 4px 0 #2e6b18; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 6px 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#ffe7b8, #f5cf8a); box-shadow: 0 0 0 2px #c8913a, 0 5px 0 #a8742a, 0 8px 12px rgba(0,0,0,.35); }
.mk-card:active { transform: translateY(2px); }
.mk-qty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; color: #3a2a14; font: 900 14px/1 system-ui; }
.mk-qty button { width: 25px; height: 25px; padding: 0; border: 1px solid #b18442; border-radius: 7px; background: linear-gradient(#fff1cf,#e7bf73); color: #3a2a14; font: 900 18px/1 system-ui; }
.mk-card.sold, .mk-card.locked { filter: grayscale(.7) brightness(.8); cursor: default; }
.mk-tile { position: relative; width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 2px rgba(0,0,0,.25); }
.mk-tile.blue { background: linear-gradient(#5fb8ef, #2f7fc4); } .mk-tile.grey { background: linear-gradient(#a4aab2, #5e6670); }
.mk-tile.orange { background: linear-gradient(#ffb15a, #e0782a); } .mk-tile.purple { background: linear-gradient(#c48cf0, #7a3fb0); }
.mk-tile .ic { font-size: 36px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.mk-tile b { position: absolute; right: 4px; bottom: 2px; font: 900 13px/1 system-ui; color: #fff; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.mk-sub { font: 700 10px/1.2 system-ui; color: #6b4a1e; text-align: center; min-height: 24px; }
.mk-price { align-self: end; width: calc(100% + 12px); margin-top: 4px; padding: 7px 0 8px; border-radius: 0 0 10px 10px; text-align: center; background: #fbe9c4; border-top: 1px solid #e3bd7a; font: 700 15px/1 system-ui; color: #4a3a2a; }
.mk-price b { font-weight: 900; color: #3a2a14; }
.mk-free { color: #3fae2b; font-weight: 900; font-size: 18px; text-shadow: 0 1px 0 #fff; }
.mk-sold { color: #8a6a4a; font-weight: 800; } .mk-lock { color: #7a5a3a; font-size: 12px; font-weight: 800; }
.mk-disc { position: absolute; left: -8px; top: -10px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-20deg);
  background: radial-gradient(circle at 40% 35%, var(--c-good-hi), #3a9a2a); color: #fff; font: 900 12px/1 system-ui; text-shadow: 0 1px 0 rgba(0,0,0,.4); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.mk-disc.red { background: radial-gradient(circle at 40% 35%, #ff8a5a, #d6402a); }
.mk-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px 0 12px; border-radius: 12px; background: linear-gradient(135deg, #f5cf8a, #e3a64a); color: #3a2a14; box-shadow: 0 0 0 2px #c8913a; }
.mk-banner.vip { background: linear-gradient(135deg, var(--c-amber-pale), var(--c-amber)); } .mk-banner.ally { background: linear-gradient(135deg, #b9d8f5, #6fa6dc); }
.mk-banner .big { font-size: 40px; } .mk-banner b { display: block; font: 900 17px/1.2 system-ui; } .mk-banner small { font-size: 12px; opacity: .85; }
.mk-x { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #fbe9c4; box-shadow: 0 0 0 2px #c8913a; }
.mk-x select, .mk-x input { background: #fff; color: #3a2a14; border-color: #c8913a; }
.mk-x-out { font: 800 15px/1.2 system-ui; color: #3a2a14; text-align: center; }
.mk-x-go { height: 48px; border-radius: 10px; border: 0; font: 900 18px/1 system-ui; color: #fff; background: linear-gradient(var(--c-good-hi), #4fa52b); box-shadow: 0 4px 0 #2e6b18; }
.mk-tabs { position: sticky; bottom: 0; display: flex; gap: 2px; align-items: stretch; padding: 6px 6px calc(8px + var(--safe-bottom)); overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(#5a3c20, #3a2614); border-top: 3px solid #8a6038; box-shadow: 0 -6px 14px rgba(0,0,0,.45); }
.mk-back { flex: 0 0 48px; height: 48px; align-self: center; border-radius: 50%; border: 0; font-size: 24px; color: #fff; background: radial-gradient(circle at 50% 35%, #a4785a, #6b4a2e); box-shadow: 0 0 0 2px #e8c79a; }
.mk-tab { position: relative; flex: 1 0 72px; padding: 6px 4px; border: 0; border-radius: 10px 10px 4px 4px; background: none; display: grid; justify-items: center; gap: 2px; color: #fff; }
.mk-tab .ic { font-size: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.mk-tab b { font: 900 12px/1.1 system-ui; text-align: center; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.mk-tab.on { background: linear-gradient(var(--c-amber-hi), #e3a03a); box-shadow: 0 -2px 0 #fff3c8 inset; }
.mk-tab .hud-bdg { top: 2px; right: 6px; }
/* tap = what it is, double-tap = buy; Quick buy switch makes one tap buy */
.mk-quick { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.28); color: #f3e6c8; font-weight: 700; font-size: 13px; cursor: pointer; user-select: none; }
.mk-quick input { display: none; }
.mk-quick .sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #5a4a3a; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); transition: background .15s; }
.mk-quick .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mk-quick.on .sw { background: #3fae55; }
.mk-quick.on .sw::after { transform: translateX(16px); }
.mk-info { display: grid; gap: 8px; }
.mk-info-line { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-weight: 700; }
.mk-info-price { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px 0; font-weight: 800; }

/* ---------- Exchange: the Trading Post (panels-market.js exchangeTab) ---------- */
.mk-xbody { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.mk-xhero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #4a2f14, #1f140a); border: 2px solid #d9a336; box-shadow: 0 6px 18px #0008, inset 0 0 24px #0006; }
.mk-xhero::after { content: ""; position: absolute; inset: -50% auto -50% -40%; width: 30%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, #fff2, transparent); animation: mkSweep 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes mkSweep { 0% { left: -40%; } 50%, 100% { left: 130%; } }
.mk-xhero-t { display: grid; gap: 2px; color: #f6e7c4; }
.mk-xhero-t small { font: 900 10px/1 system-ui; letter-spacing: 3px; color: #ffd27a; }
.mk-xhero-r { flex: 1; min-width: 0; display: grid; gap: 5px; } .mk-xhero-r small { font-size: 11px; color: #d7c39a; }
.mk-xrate { display: flex; align-items: baseline; gap: 4px; }
.mk-xrate b { font: 900 32px/1 system-ui; color: #ffd86b; text-shadow: 0 0 14px #ffb84a99, 0 2px 0 #5a3500; } .mk-xrate span { font: 900 18px/1 system-ui; color: #f6e7c4; }
.mk-xbar { height: 7px; border-radius: 4px; background: #0007; overflow: hidden; box-shadow: inset 0 0 0 1px #d9a33655; }
.mk-xbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #e08a1c, #ffe07a); box-shadow: 0 0 8px #ffcf5a; }

/* the balance scale: give on the left pan, get on the right; the beam tips with the deal */
.mk-xscene { position: relative; flex: 1 0 220px; min-height: 220px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #6b4318 0%, #2a1a0b 60%, #160d05 100%); border: 2px solid #7a5420; box-shadow: inset 0 0 40px #000a; }
.mk-xglow { position: absolute; left: 50%; top: 4%; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(#ffcf6a55, transparent 65%); animation: mkGlow 3s ease-in-out infinite; }
@keyframes mkGlow { 50% { opacity: .55; transform: scale(1.08); } }
.mk-xpost { position: absolute; left: 50%; top: 40px; bottom: 26px; width: 12px; margin-left: -6px; border-radius: 6px; background: linear-gradient(90deg, #8a5a1c, #ffd27a 45%, #8a5a1c); box-shadow: 0 0 10px #0009; }
.mk-xpost .cap { position: absolute; left: 50%; top: -12px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #d9a336 55%, #7a4f10); box-shadow: 0 0 12px #ffcf5a; z-index: 2; }
.mk-xfoot { position: absolute; left: 50%; bottom: 14px; width: 120px; height: 16px; margin-left: -60px; border-radius: 50% 50% 8px 8px; background: linear-gradient(#ffd27a, #8a5a1c); box-shadow: 0 6px 14px #000c; }
.mk-xarm { --a: 0deg; position: absolute; left: 20%; right: 20%; top: 36px; height: 8px; border-radius: 4px; background: linear-gradient(#ffe7a8, #b07a26); box-shadow: 0 2px 6px #000a;
  transform: rotate(var(--a)); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.mk-xpan { position: absolute; top: 4px; width: 128px; display: grid; justify-items: center; transform-origin: 50% 0; transform: rotate(calc(var(--a) * -1)); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.mk-xpan.l { left: -64px; } .mk-xpan.r { right: -64px; }
.mk-xpan .chain { width: 84px; height: 70px; background: linear-gradient(to bottom right, transparent calc(50% - 1px), #d9a336aa calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
  linear-gradient(to bottom left, transparent calc(50% - 1px), #d9a336aa calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.mk-xpan .dish { position: relative; width: 112px; height: 20px; margin-top: -2px; border-radius: 0 0 56px 56px / 0 0 20px 20px; background: linear-gradient(#ffe7a8, #a8701e); box-shadow: 0 6px 10px #000a, inset 0 2px 0 #fff8; }
.mk-xpile { position: absolute; left: 0; right: 0; bottom: 14px; height: 60px; }
.mk-xpile i { position: absolute; bottom: 0; left: 50%; font-style: normal; font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 3px #000b); opacity: 0; transform: translate(-50%, -30px) scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mk-xpile i img { width: 30px; height: 30px; }
.mk-xpile i:nth-child(1) { margin-left: -26px; } .mk-xpile i:nth-child(3) { margin-left: 26px; }
.mk-xpile i:nth-child(4) { margin-left: -13px; bottom: 22px; } .mk-xpile i:nth-child(5) { margin-left: 13px; bottom: 22px; }
.mk-xpile i.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.mk-xtag { display: grid; justify-items: center; gap: 2px; margin-top: 10px; padding: 5px 10px; border-radius: 10px; background: #0009; border: 1px solid #d9a33688; min-width: 92px; }
.mk-xtag small { font: 900 9px/1 system-ui; letter-spacing: 2px; color: #ffd27a; } .mk-xtag b { font: 900 17px/1 system-ui; color: #fff3d6; } .mk-xtag.get b { color: #8ff07a; text-shadow: 0 0 8px #5fd04a88; }

/* the choice */
.mk-xcard { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: linear-gradient(#3b2714, #1d130a); border: 2px solid #d9a336; box-shadow: 0 8px 18px #0008; }
.mk-xlbl { font: 900 10px/1 system-ui; letter-spacing: 2px; color: #ffd27a; }
.mk-xrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mk-xt { display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border: 2px solid #5a3e1c; border-radius: 12px; background: linear-gradient(#2c1d0e, #1a1108); color: #f6e7c4; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.mk-xt .ic { font-size: 24px; line-height: 1.1; } .mk-xt .ic img { width: 28px; height: 28px; }
.mk-xt b { font: 800 11px/1.1 system-ui; } .mk-xt small { font: 700 10px/1 system-ui; color: #c9b28a; }
.mk-xt.on { border-color: #ffcf5a; background: linear-gradient(#6b4318, #3a2410); box-shadow: 0 0 0 1px #ffcf5a, 0 0 16px #ffb84a99; transform: translateY(-2px); }
.mk-xt.dim { opacity: .35; }
.mk-xswap { justify-self: center; width: 40px; height: 40px; margin: -4px 0; border-radius: 50%; border: 2px solid #ffcf5a; background: radial-gradient(#ffe7a8, #c88a2a); font: 900 20px/1 system-ui; color: #3a2410; box-shadow: 0 3px 0 #7a4f10, 0 0 12px #ffb84a88; cursor: pointer; }
.mk-xswap.spin { animation: mkSpin .26s linear; } @keyframes mkSpin { to { transform: rotate(180deg); } }
.mk-xamtrow { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.mk-xamt { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid #d9a336; background: #120b05; color: #ffd86b; font: 900 21px/1 system-ui; }
.mk-xpicks { display: flex; gap: 4px; } .mk-xpicks button { height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #d9a33699; background: #2c1d0e; color: #ffd27a; font: 800 12px/1 system-ui; }
.mk-xslide { width: 100%; accent-color: #ffb84a; }
.mk-x-go { position: relative; overflow: hidden; }
.mk-x-go:disabled { filter: grayscale(.7); opacity: .6; }
.mk-x-go .shine { position: absolute; inset: 0 auto 0 -40%; width: 30%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #fff8, transparent); animation: mkSweep 2.6s ease-in-out infinite; }
.mk-burst { position: fixed; z-index: 9999; pointer-events: none; }
.mk-burst i { position: absolute; font-style: normal; font-size: 24px; transform: translate(-50%, -50%); animation: mkBurst 1.1s cubic-bezier(.2, .8, .3, 1) var(--d) both; }
.mk-burst i img { width: 26px; height: 26px; }
@keyframes mkBurst { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-xglow, .mk-xhero::after, .mk-x-go .shine, .mk-burst i { animation: none !important; } .mk-xarm, .mk-xpan { transition: none; } }

/* the stall behind the scale */
.mk-xscene { background: #1a0f06; }
.mk-xwall { position: absolute; inset: 0; background: linear-gradient(#0000 45%, #0009), radial-gradient(ellipse at 50% 40%, #0000 35%, #0007 100%), url(market/exchange.webp) center 40% / cover no-repeat; }
.mk-xtable { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(#8a5a2a, #5a3616 40%, #2e1b0b); border-top: 2px solid #b07a3c; box-shadow: 0 -6px 14px #0008; }
.mk-xtable::before { content: ""; position: absolute; inset: 4px 0 0; background: repeating-linear-gradient(90deg, #0000 0 70px, #0003 70px 72px); }
.mk-xfoot { bottom: 22px; z-index: 1; }
.mk-xpost { bottom: 34px; }
.mk-xglow { top: 0; }
.mk-xmotes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mk-xmotes i { position: absolute; left: var(--x); bottom: -6px; width: 3px; height: 3px; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 4px #ffcf6a; opacity: 0; animation: mkMote var(--s) linear var(--d) infinite; }
@keyframes mkMote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 85% { opacity: .5; } 100% { transform: translate(18px, -230px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-xlamp, .mk-xlamp .body, .mk-xlamp .halo, .mk-xmotes i { animation: none !important; } .mk-xmotes { display: none; } }
/* the painting always shows its full width, sitting on the bottom (its dark ceiling runs on into the scene's own dark);
   the scale stands on the painted counter, whose top is 38% of the picture's height up from its bottom edge */
.mk-xscene { container-type: size; }
.mk-xwall { background: radial-gradient(ellipse at 50% 70%, #0000 40%, #0006 100%), url(market/exchange.webp) center bottom / 100% auto no-repeat, #0d0703; }
.mk-xtable { display: none; }
.mk-xfoot { bottom: calc(100cqw * .5625 * .37); }
.mk-xpost { bottom: calc(100cqw * .5625 * .37 + 10px); }
/* the scene fills the screen again (owner), the scale is a short one standing on the painted counter: its leg is 170px tall */
.mk-xarm { left: 22%; right: 22%; top: calc(100% - 100cqw * .5625 * .37 - 180px); }
.mk-xpost { top: calc(100% - 100cqw * .5625 * .37 - 176px); }
/* the painting fills the whole scene again (owner); a scene narrower than the 16:9 picture (every phone) shows it at full
   height, so the painted counter is 37% up from the bottom: the short scale stands on it */
.mk-xwall { background: radial-gradient(ellipse at 50% 45%, #0000 35%, #0007 100%), linear-gradient(#0000 55%, #0008), url(market/exchange.webp) center / cover no-repeat, #0d0703; }
.mk-xfoot { bottom: 36%; }
.mk-xpost { top: auto; bottom: calc(36% + 10px); height: 170px; }
.mk-xarm { top: calc(64% - 180px); }
.mk-xpost { height: 210px; } .mk-xarm { top: calc(64% - 220px); } /* a little taller (owner) */
/* one fixed size on every device (owner 2026-10-24: on a phone the box got shorter than the leg, on a wide screen the beam
   went off the top). The box is 300px tall; the painting shows its full height, centred (533px wide), its sides fading into
   the dark on a wide box, so its counter is always 186px down; the scale's numbers below all follow from that. */
.mk-xscene { flex: 0 0 auto; height: 300px; min-height: 0; container-type: normal; }
.mk-xwall { background:
  linear-gradient(90deg, #0d0703 0, #0d0703 calc(50% - 266px), #0d070300 calc(50% - 236px), #0d070300 calc(50% + 236px), #0d0703 calc(50% + 266px), #0d0703 100%),
  radial-gradient(ellipse at 50% 45%, #0000 35%, #0007 100%), linear-gradient(#0000 55%, #0008),
  url(market/exchange.webp) center / auto 100% no-repeat, #0d0703; }
.mk-xpost { top: 62px; bottom: auto; height: 122px; }
.mk-xfoot { top: 178px; bottom: auto; }
.mk-xarm { top: 58px; left: calc(50% - min(30%, 170px)); right: calc(50% - min(30%, 170px)); }
/* the tiles fit a 360px phone: a button's own minimum width made four of them overflow the card */
.mk-xt { min-width: 0; overflow: hidden; } .mk-xt b, .mk-xt small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-xpicks button { min-width: 0; padding: 0 8px; }
.mk-xamtrow { min-width: 0; } .mk-xamt { width: 0; }