/* The Marketplace's Offers tab laid out like Magic Eden's collection page (rpg/ui-listings.js listingsHTML; owner, 2026-11-03:
   "can we make marketplace look more like magic eden? with a similar layout and all those options"). On top, the market's
   numbers (or the picked thing's); then the filters, the board (cards or rows) and the activity with the order book, side by
   side on a computer, where the window opens out wide (rpg/ui-market.js fitWidth), and stacked on a phone. Website navy
   cards, gold for what's picked, as the rest of the World's windows. Every rule starts at .mkx: the window's own
   `.modal p` (18px) would win over a bare class. */
.mkx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mkx .ls-answer { margin: 0; }
.mkx .pane-note { font-size: 14px; line-height: 1.4; } /* not .modal p's 18px: the notes under the board and the form */

/* the top: what the page is about, and its numbers */
.mkx .mkh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, #1a2663, #141e52); border: 1px solid #34468a; }
.mkx .mkh-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mkx .mkh-art { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.1), transparent 62%), #0a1238; border: 1px solid #2e3d74; font-size: 28px; }
.mkx .mkh-art.k-sparkstone { background: radial-gradient(circle at 50% 55%, rgba(255, 210, 63, 0.24), transparent 62%), #0a1238; }
.mkx .mkh-art.k-guardstone { background: radial-gradient(circle at 50% 55%, rgba(140, 200, 255, 0.24), transparent 62%), #0a1238; }
.mkx .mkh-art.k-lifestone { background: radial-gradient(circle at 50% 55%, rgba(127, 227, 160, 0.24), transparent 62%), #0a1238; }
.mkx .mkh-art .ri { width: 48px; height: 48px; }
.mkx .mkh-card { width: 40px; height: 50px; object-fit: contain; }
.mkx .mkh-id b { display: block; font: 400 20px/1.15 var(--display); color: #fff; }
.mkx .mkh-id small { display: block; color: #c9d2f5; font-size: 14px; line-height: 1.3; }
.mkx .mkh-back { flex: none; min-height: 40px; margin-right: 4px; padding: 0 16px; font-size: 15px; white-space: nowrap; } /* ← All listings: back from a thing's or a seller's page */
.mkx .mkh-stats { flex: 1 1 640px; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px 14px; margin: 0; }
.mkx .mkh-stat { min-width: 0; }
.mkx .mkh-stat dt { color: #b3bde6; font-size: 13px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.mkx .mkh-stat dd { margin: 3px 0 0; }
.mkx .mkh-stat b { display: flex; align-items: center; gap: 5px; font: 400 25px/1.1 var(--display); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mkx .mkh-stat b small { font: 14px/1 var(--ui-font); color: #c9d2f5; }
.mkx .mkh-stat b .fl-trend { font: 14px/1 var(--ui-font); }
.mkx .mkh-stat dd > small { display: block; color: #c9d2f5; font-size: 14px; line-height: 1.35; }
.mkx .mkh-stat .mkh-coin { width: 20px; height: 20px; }
.mkx .mkh-coin { flex: none; border-radius: 50%; }

/* the three columns, scrolled together by the window: none has a scrollbar of its own (owner, 2026-11-03: "side scrolls dont
   look good"). The activity and the order book show their first rows, and a ▾ Show all button the rest. */
.mkx .mkx-body { display: grid; grid-template-columns: 270px minmax(0, 1fr) 390px; gap: 14px; align-items: start; }
.mkx .mkx-body.no-filters { grid-template-columns: minmax(0, 1fr) 390px; }
.mkx .mkx-main { min-width: 0; }
.mkx .mkx-side { display: grid; gap: 10px; align-content: start; }

/* the board's bar: filters, Items or Floors, the search, the order, cards or rows, read again, list one */
.mkx .mkx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.mkx .mkx-ib { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px; background: #0b1440; border: 1px solid #3a4c8a; color: #c9d4ff; font: 400 17px/1 var(--ui-font); cursor: pointer; }
.mkx .mkx-ib:hover { color: #fff; border-color: #5a6db8; }
.mkx .mkx-ib[aria-pressed="true"] { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; color: var(--navy-900); }
.mkx .mkx-ib:disabled { opacity: 0.55; cursor: default; }
.mkx .mkx-fbtn span { font-size: 14px; }
.mkx .mkx-pane { margin: 0; }
.mkx .mkx-pane button { padding: 0 12px; }
.mkx .mkx-q { flex: 1 1 130px; display: flex; align-items: center; gap: 6px; min-width: 0; height: 34px; padding: 0 10px; border-radius: 8px; background: #0b1440; border: 1px solid #3a4c8a; font-size: 14px; }
.mkx .mkx-q:focus-within { border-color: var(--gold); }
.mkx .mkx-q input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; }
.mkx .mkx-sort { height: 34px; padding: 0 8px; border-radius: 8px; background: #0b1440; border: 1px solid #3a4c8a; color: #fff; font: inherit; font-size: 14px; }
.mkx .mkx-views { display: inline-flex; gap: 3px; }
.mkx .mkx-post { height: 34px; }
/* under the bar: 🆕 New (newest first) with how many are fresh, and a word on the order; a fresh listing's NEW tag (on a card,
   over its art's corner); 🏷 Floor beside Price on one at its kind's floor (ui-listings.js FRESH_H, newTag, floorTag) */
.mkx .mkx-fresh { display: flex; align-items: center; gap: 6px 10px; margin: -2px 0 10px; color: #d6ddff; font-size: 15px; line-height: 1.3; }
.mkx .mkx-fresh .ls-fl { margin: 0 2px 0 0; }
.mkx .mkx-new { flex: none; gap: 6px; padding: 0 10px; color: #fff; font-size: 16px; white-space: nowrap; }
.mkx .mkx-new b { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #2fbf71; color: #04210f; font: 400 13px/1 var(--display); text-align: center; }
.mkx .mkx-new[aria-pressed="true"] b { background: var(--navy-900); color: #ffe066; }
.mkx .ls-new { flex: none; padding: 3px 7px; border-radius: 6px; background: #2fbf71; color: #04210f; font: 400 12px/1 var(--display); font-style: normal; letter-spacing: 0.03em; white-space: nowrap; }
.mkx .mk-grid > li.mkc { position: relative; }
.mkx .mk-grid > li.mkc .ls-new { position: absolute; top: 8px; left: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.mkx .ls-fl { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(95, 232, 111, 0.6); background: rgba(95, 232, 111, 0.12); color: #9ff5a8; font-style: normal; letter-spacing: 0.04em; white-space: nowrap; }

/* the board as cards (▦): the art on a dark panel (a gem's tinted by its kind), its name, who and when, the last sale, then
   what it's looking for with the buttons. One with talk under it (offers, a counter, a payment) goes across the row. */
.mkx .ls-board.mk-grid { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 10px; margin: 0; }
.mkx .mk-grid > li.mkc { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 12px; background: #1d2a6c; }
.mkx .mk-grid > li.mkc:hover { border-color: #5a6db8; }
.mkx .mk-grid > li.mkc.mine, .mkx .mk-grid > li.mkc.mine:hover { border-color: rgba(255, 210, 63, 0.7); }
.mkx .mk-grid > li.mkc.ask { border-color: rgba(255, 210, 63, 0.9); }
.mkx .mk-grid > li.mkc .ls-lot { flex: none; flex-direction: column; align-items: stretch; gap: 0; }
.mkx .mk-grid > li.mkc .ls-lot > div { padding: 8px 10px 4px; }
.mkx .mk-grid > li.mkc .ls-ico { align-self: stretch; box-sizing: border-box; width: 100%; height: 108px; padding: 22px calc(50% - 32px); object-fit: contain; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.08), transparent 62%), #0a1238; }
.mkx .mk-grid > li.mkc span.ls-ico { display: grid; place-items: center; padding: 0; font-size: 46px; }
.mkx .mk-grid > li.mkc.k-sparkstone .ls-ico { background: radial-gradient(circle at 50% 55%, rgba(255, 210, 63, 0.22), transparent 62%), #0a1238; }
.mkx .mk-grid > li.mkc.k-guardstone .ls-ico { background: radial-gradient(circle at 50% 55%, rgba(140, 200, 255, 0.22), transparent 62%), #0a1238; }
.mkx .mk-grid > li.mkc.k-lifestone .ls-ico { background: radial-gradient(circle at 50% 55%, rgba(127, 227, 160, 0.22), transparent 62%), #0a1238; }
.mkx .mk-grid > li.mkc .ls-card { align-self: stretch; box-sizing: border-box; width: 100%; height: 150px; padding: 8px; border-radius: 0; object-fit: contain; background: #0a1238; }
.mkx .mk-grid > li.mkc .ls-card.none { font-size: 46px; }
.mkx .mk-grid > li.mkc .ls-what { font-size: 16px; line-height: 1.25; }
.mkx .mk-grid > li.mkc .ls-lot small { color: #c3ccf0; font-size: 14px; line-height: 1.35; }
.mkx .mk-grid > li.mkc .ls-want { font-size: 13px; color: #b3bde6; }
.mkx .mk-grid > li.mkc .ls-what b { color: #fff; }
.mkx .mk-grid > li.mkc .ls-last { display: block; color: #cfd8f0; }
.mkx .mk-grid > li.mkc .ls-last i { display: none; }
.mkx .ls-last img { vertical-align: -2px; border-radius: 50%; }
.mkx .mk-grid > li.mkc .ls-plus { margin: 0; padding: 2px 10px 0; }
.mkx .mk-grid > li.mkc .ls-deal { flex: none; margin: auto 7px 8px; padding: 5px 6px 7px; }
.mkx .mk-grid > li.mkc .ls-price { flex-wrap: wrap; max-width: 100%; padding-right: 6px; font-size: 12.5px; white-space: normal; }
.mkx .mk-grid > li.mkc .ls-price small { padding-left: 2px; color: #c9d2f5; font-size: 14px; white-space: nowrap; }
.mkx .mk-grid > li.mkc .ls-price b { font: 400 19px/1.1 var(--display); }
.mkx .mk-grid > li.mkc .ls-btns { width: 100%; margin: 3px 0 0; }
.mkx .mk-grid > li.mkc .ls-btns .btn { flex: 1 1 auto; min-width: 0; }
.mkx .mk-grid > li.mkc .ls-cpay { flex-basis: 100%; }
.mkx .mk-grid > li.ls-wide { grid-column: 1 / -1; }
.mkx .mk-grid > li.ls-sub { margin-left: 0; border-left-width: 1px; }
/* a group's ▾ N more at the foot of its first card (opens the thing's own page); the card stacked on the others */
.mkx .mk-grid > li.mkc:has(> .ls-more) { box-shadow: 4px 4px 0 -1px #16205a, 4px 4px 0 0 #34468a, 8px 8px 0 -1px #121a4c, 8px 8px 0 0 #2a3a78; margin: 0 8px 8px 0; }
.mkx .ls-more { margin: -2px 8px 8px; padding: 5px 8px; border-radius: 8px; border: 1px dashed rgba(255, 210, 63, 0.55); background: rgba(255, 210, 63, 0.07); color: var(--gold); font: inherit; font-size: 15px; line-height: 1.3; text-align: center; cursor: pointer; }
.mkx .ls-more:hover { background: rgba(255, 210, 63, 0.14); }
.mkx .ls-more small { display: block; color: #c9d2f5; font-size: 13.5px; }

/* 💎 Floors: the floor cards (world.css .fl-*) in the board's place */
.mkx .mkx-main > .fl-wrap { margin: 0; }
.mkx .mkx-gap { flex: 1; }
.mkx .fl-title { margin: 0; color: var(--gold); font: 400 15px/1.3 var(--display); letter-spacing: 0.04em; }
.mkx .fl-title small { display: block; font: 13px/1.35 var(--ui-font); color: #bcc5ea; letter-spacing: 0.02em; }
.mkx .mkx-main > .ls-h { margin-top: 16px; }

/* the left: the filters, each thing up with how many listings and its floor */
.mkx .mkx-filters { padding: 10px; border-radius: 12px; background: linear-gradient(180deg, #1a2663, #141e52); border: 1px solid #34468a; }
.mkx .mkf-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; font-size: 14px; }
.mkx .mkf-top b { font: 400 17px/1.2 var(--display); color: #fff; }
.mkx .mkf-clear { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.mkx .mkf-sec { padding: 6px 0 9px; border-bottom: 1px solid #2a3a78; }
.mkx .mkf-h { display: block; color: #b3bde6; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.mkx .mkf-sec .ls-switch { display: grid; margin: 5px 0 0; }
.mkx .mkf-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0; }
.mkx .mkf-chips button { padding: 3px 10px; border-radius: 999px; border: 1px solid #3a4c8a; background: #0b1440; color: #d6ddff; font: inherit; font-size: 14px; cursor: pointer; }
.mkx .mkf-chips button:hover { color: #fff; }
.mkx .mkf-chips button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; color: var(--navy-900); }
/* A gem's grade (its rarity) in its colour: on its name and on the Gem rarity chips. */
.mkx .ls-gr { font-style: normal; }
.mkx .ls-gr.g0 { color: #c3cbe8; }
.mkx .ls-gr.g1 { color: #7fe3a0; }
.mkx .ls-gr.g2 { color: #8cc8ff; }
.mkx .ls-gr.g3 { color: var(--gold); }
.mkx .mkf-rar button small { opacity: 0.8; font-size: 12.5px; }
.mkx .mkf-rar button.g0:not([aria-pressed="true"]) { border-color: #6b76a3; }
.mkx .mkf-rar button.g1:not([aria-pressed="true"]) { border-color: rgba(127, 227, 160, 0.6); color: #7fe3a0; }
.mkx .mkf-rar button.g2:not([aria-pressed="true"]) { border-color: rgba(140, 200, 255, 0.6); color: #8cc8ff; }
.mkx .mkf-rar button.g3:not([aria-pressed="true"]) { border-color: rgba(255, 210, 63, 0.7); color: var(--gold); }
.mkx .mkf-chips button:disabled { opacity: 0.4; cursor: default; }
/* A seller's name: a tap opens their page (everything they have up). */
.mkx .ls-by { display: inline; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline dotted rgba(255, 255, 255, 0.45); text-underline-offset: 3px; cursor: pointer; }
.mkx .ls-by:hover, .mkx .ls-by:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
/* What you have of what a listing asks, when it's too few, beside its price. */
.mkx .ls-have { flex: 1 0 100%; font-size: 13px; }
.mkx .mkf-cat { border-bottom: 1px solid #2a3a78; }
.mkx .mkf-cat:last-child { border-bottom: 0; }
.mkx .mkf-cat > summary { display: flex; align-items: center; gap: 6px; padding: 8px 2px; list-style: none; cursor: pointer; font: 400 16px/1.2 var(--display); color: #fff; }
.mkx .mkf-cat > summary::-webkit-details-marker { display: none; }
.mkx .mkf-cat > summary small { margin-left: auto; font: 14px/1 var(--ui-font); color: #b3bde6; }
.mkx .mkf-cat > summary::after { content: "▾"; color: #9aa6d6; font: 13px/1 var(--ui-font); transition: transform 0.15s; }
.mkx .mkf-cat:not([open]) > summary::after { transform: rotate(-90deg); }
.mkx .mkf-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 54px; align-items: center; gap: 6px; width: 100%; margin: 0 0 2px; padding: 4px 5px; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.mkx .mkf-item:hover { background: rgba(255, 255, 255, 0.05); }
.mkx .mkf-item.on { background: rgba(255, 210, 63, 0.12); border-color: rgba(255, 210, 63, 0.6); }
.mkx .mkf-art { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: #0a1238; font-size: 16px; }
.mkx .mkf-art.k-sparkstone { background: radial-gradient(circle, rgba(255, 210, 63, 0.25), transparent 70%), #0a1238; }
.mkx .mkf-art.k-guardstone { background: radial-gradient(circle, rgba(140, 200, 255, 0.25), transparent 70%), #0a1238; }
.mkx .mkf-art.k-lifestone { background: radial-gradient(circle, rgba(127, 227, 160, 0.25), transparent 70%), #0a1238; }
.mkx .mkf-name { overflow-wrap: anywhere; line-height: 1.15; }
.mkx .mkf-n { min-width: 22px; padding: 0 6px; border-radius: 6px; background: #0a1238; color: #e2e7ff; font-size: 13.5px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.mkx .mkf-fl { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--gold); font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkx .mkf-fl img { width: 15px; height: 15px; border-radius: 50%; }

/* the right: the latest deals (a chart of the market's days over them, chips for Sales, Swaps or Trades), and the order book */
.mkx .mkr { min-width: 0; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #1a2663, #141e52); border: 1px solid #34468a; }
.mkx .mkr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 19px/1.2 var(--display); color: #fff; }
.mkx .mkr-h .mk-switch { margin: 0 0 0 auto; }
.mkx .mkr-h .mk-switch button { min-height: 28px; padding: 0 13px; font-size: 13px; }
.mkx .mkr .pane-note { margin: 4px 0 0; }
.mkx .mka-kinds { margin: 0 0 6px; }
.mkx .mka-kinds small { color: inherit; opacity: 0.75; font-size: 12.5px; }
/* the list as tall as the screen allows (about five deals on a 780 px one, nine on a 1080), the order book under it */
.mkx .mka { list-style: none; margin: 0 -4px; padding: 0; }
.mkx .mka-row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mkx .mka-row:first-child { border-top: 0; }
.mkx .mka-go { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; }
.mkx button.mka-go { cursor: pointer; }
.mkx button.mka-go:hover, .mkx button.mka-go:focus-visible { background: rgba(255, 255, 255, 0.06); }
.mkx .mka-art { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: #0a1238; font-size: 22px; }
.mkx .mka-art.k-sparkstone { background: radial-gradient(circle, rgba(255, 210, 63, 0.24), transparent 70%), #0a1238; }
.mkx .mka-art.k-guardstone { background: radial-gradient(circle, rgba(140, 200, 255, 0.24), transparent 70%), #0a1238; }
.mkx .mka-art.k-lifestone { background: radial-gradient(circle, rgba(127, 227, 160, 0.24), transparent 70%), #0a1238; }
.mkx .mka-art .ri { width: 34px; height: 34px; }
.mkx .mka-art img[src*="zaza-coin"] { width: 26px; height: 26px; image-rendering: auto; border-radius: 50%; }
.mkx .mka-mid { display: grid; gap: 3px; min-width: 0; }
.mkx .mka-what { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.25; }
.mkx .mka-what small { color: #b3bde6; font-weight: 400; }
.mkx .mka-who { display: flex; align-items: center; gap: 6px; min-width: 0; color: #c3ccf0; font-size: 13.5px; line-height: 1.3; }
.mkx .mka-who > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkx .mka-who b { color: var(--gold); font-weight: 600; }
.mkx .mka-who .fl-ev { flex: none; min-width: 0; padding: 1px 7px; font-size: 12.5px; line-height: 17px; }
.mkx .mka-end { display: grid; justify-items: end; gap: 2px; max-width: 150px; text-align: right; }
.mkx .mka-got { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 5px; color: #e2e7ff; font-size: 14px; line-height: 1.3; }
.mkx .mka-got .fl-lot .ri { width: 18px; height: 18px; }
.mkx .mka-z { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font: 400 19px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.mkx .mka-z img { border-radius: 50%; }
.mkx .mka-sub { color: #d6ddff; font-size: 13px; white-space: nowrap; }
.mkx .mka-ago { color: #a9b4e2; font-size: 12.5px; white-space: nowrap; }
.mkx .mka-gift { color: #ffc2e0; }
/* the market's volume a day: a column a day, today last in gold, the biggest day's labelled; under them today's numbers, or
   the day hovered (a tap focuses one on a phone) */
.mkx .mkc { margin: 0 0 8px; padding: 8px 8px 6px; border-radius: 9px; background: rgba(4, 10, 40, 0.55); }
.mkx .mkc-cols { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0 0 24px; list-style: none; }
.mkx .mkc-day { display: grid; grid-template-rows: 64px auto; gap: 4px; justify-items: center; border-radius: 6px; outline: 0; cursor: default; }
.mkx .mkc-day:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
.mkx .mkc-bar { position: relative; justify-self: stretch; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #3a4c8a; }
.mkx .mkc-bar::before { content: ""; width: min(24px, 70%); height: calc(var(--h) * 0.78); border-radius: 4px 4px 0 0; background: #b48c22; }
.mkx .mkc-day.today .mkc-bar::before { background: var(--gold); }
.mkx .mkc-day:hover .mkc-bar::before, .mkx .mkc-day:focus .mkc-bar::before { background: #ffe680; }
.mkx .mkc-bar em { position: absolute; bottom: calc(var(--h) * 0.78 + 3px); color: #fff; font: 400 12.5px/1 var(--display); font-style: normal; white-space: nowrap; }
.mkx .mkc-day > small { color: #b3bde6; font-size: 12.5px; line-height: 1; }
.mkx .mkc-day.today > small { color: #fff; font-weight: 700; }
.mkx .mkc-line { position: absolute; inset: auto 0 0; visibility: hidden; overflow: hidden; color: #dfe5ff; font-size: 13.5px; line-height: 20px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mkx .mkc-line b { color: #fff; font-weight: 600; }
.mkx .mkc-line small { color: #b3bde6; font-size: 12.5px; }
.mkx .mkc-day.today .mkc-line, .mkx .mkc-day:hover .mkc-line, .mkx .mkc-day:focus .mkc-line { visibility: visible; }
.mkx .mkc-cols:hover .mkc-day.today:not(:hover) .mkc-line, .mkx .mkc-cols:focus-within .mkc-day.today:not(:focus) .mkc-line { visibility: hidden; }
.mkx .mkb-pick { min-width: 0; max-width: 200px; height: 30px; margin-left: auto; padding: 0 6px; border-radius: 7px; background: #0b1440; border: 1px solid #3a4c8a; color: #fff; font: 14px/1 var(--ui-font); }
.mkx .mkb-cols, .mkx .mkb-row { display: grid; grid-template-columns: 1.2fr 0.6fr 0.9fr; gap: 6px; }
.mkx .mkb-cols { margin: 0; padding: 2px 6px; color: #b3bde6; font-size: 13px; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; }
.mkx .mkb-cols span + span, .mkx .mkb-row span + span { text-align: right; }
.mkx .mkb { list-style: none; margin: 0; padding: 0; }
.mkx .mkb.asks { display: flex; flex-direction: column-reverse; } /* cheapest at the foot, by the spread, where it starts */
.mkx .mkb-row { position: relative; padding: 3px 6px; color: #eef1ff; font-size: 15.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.mkx .mkb-row::before { content: ""; position: absolute; inset: 1px 0 1px auto; width: var(--d); border-radius: 3px; }
.mkx .mkb-row span { position: relative; }
.mkx .mkb-row.ask span:first-child { color: #ff9393; }
.mkx .mkb-row.ask::before { background: rgba(214, 60, 60, 0.22); }
.mkx .mkb-row.bid span:first-child { color: #6ee89c; }
.mkx .mkb-row.bid::before { background: rgba(61, 209, 126, 0.2); }
.mkx .mkb-none { padding: 6px; color: #b3bde6; font-size: 14px; text-align: center; }
.mkx .mkb-spread { margin: 4px 0; padding: 5px 6px; border-block: 1px solid #2a3a78; color: #c9d2f5; font-size: 15px; line-height: 1.3; text-align: center; }
.mkx .mkb-spread b { color: #fff; font-weight: 400; font-family: var(--display); font-size: 17px; }
.mkx .mkb-spread small { color: #b3bde6; }
.mkx .mkb-note { margin: 6px 0 0; color: #a9b4e2; font-size: 13px; line-height: 1.4; }
/* ▾ Show all under the activity and the order book, as the board's ▾ N more listings; and the 📈 Activity tab's */
.mkx .mkr-more, .mk-more-btn { display: block; width: 100%; min-height: 40px; margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; border: 1px dashed rgba(255, 210, 63, 0.55); background: rgba(255, 210, 63, 0.07); color: var(--gold); font: 600 15px/1.3 var(--ui-font); text-align: center; cursor: pointer; } /* not the 📈 Activity tab's pixel font */
.mkx .mkr-more:hover, .mk-more-btn:hover { background: rgba(255, 210, 63, 0.14); }
.modal:has(.mk-pane) .mk-more-btn { font-size: 18px; } /* as big as the 📈 Activity tab's lines */

/* The window on a computer: the whole screen on every tab, like the Harbour's (owner, 2026-11-03: "make it occupy full
   screen", then "keep every tab on the marketplace full screen"), away on the 📋 or 🔨 chip too, its ✕ staying in the
   corner; the tabs one row in the middle, their words the Builders window's size (owner, 2026-11-04: "feel a little to
   big fonts on the titles and too spread out.. keep the titles more center a bit like the builders page.. and smaller
   fonts"). */
@media (min-width: 761px) {
  .modal-backdrop:has(> .modal .mk-tabs, > .modal .mk-away) { padding: 0; }
  .modal:has(.mk-tabs, .mk-away) { width: 100% !important; height: 100vh; height: 100dvh; max-height: none; padding: 14px clamp(14px, 1.6vw, 28px) 20px; border-width: 0; border-radius: 0; }
  .modal:has(.mk-tabs, .mk-away) > .modal-x { position: fixed; top: 12px; right: clamp(14px, 1.6vw, 28px); z-index: 6; width: 36px; height: 36px; }
  .modal:has(.mk-tabs, .mk-away) #modalBody > .sub { display: none; }
  .modal:has(.mk-tabs, .mk-away) #modalBody > h2 { margin-bottom: 10px; }
  .modal:has(.mk-tabs) .mk-tabs { width: min(1040px, 100%); margin: 0 auto 12px; }
  .modal:has(.mk-tabs) .mk-tabs button { flex-direction: row; min-height: 50px; gap: 9px; padding: 6px 12px; font-size: 18px; white-space: nowrap; }
  .modal:has(.mk-tabs) .mk-tabs .mk-ti { font-size: 22px; }
  .modal:has(.mk-tabs) .mk-tabs .mk-count { top: 50%; transform: translateY(-50%); right: 8px; min-width: 22px; height: 22px; font-size: 14px; line-height: 22px; }
  /* The other tabs keep their one column, in the middle of the screen, as in the usual window (owner: "on other sections
     keep the previous centered layout"); 📋 Offers alone is laid out across the screen. */
  .modal:has(.mk-tabs) .mk-pane:not(#mkPane-offers), .modal:has(#mkAuction[data-away="1"]) #modalBody > :not(h2) { width: min(712px, 100%); margin-inline: auto; }
}
/* Smaller computers: each tab's icon over its word, as in the usual window. */
@media (min-width: 761px) and (max-width: 1099px) {
  .modal:has(.mk-tabs) .mk-tabs button { flex-direction: column; min-height: 60px; gap: 5px; padding: 6px 4px; font-size: 17px; }
  .modal:has(.mk-tabs) .mk-tabs .mk-ti { font-size: 21px; }
  .modal:has(.mk-tabs) .mk-tabs .mk-count { top: 4px; right: 4px; transform: none; }
}
/* Laptops: narrower filters and side, so the board keeps three cards a row. */
@media (max-width: 1400px) {
  .mkx .mkx-body { grid-template-columns: 240px minmax(0, 1fr) 340px; }
  .mkx .mkx-body.no-filters { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* Narrower computers: the activity and the order book go under the board, side by side. */
@media (max-width: 1220px) {
  .mkx .mkx-body { grid-template-columns: 220px minmax(0, 1fr); }
  .mkx .mkx-body.no-filters { grid-template-columns: minmax(0, 1fr); }
  .mkx .mkx-side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}
/* Phones: one column, the numbers a strip to swipe, the filters folded behind ☰ Filters, two cards a row. */
@media (max-width: 760px) {
  .mkx .mkh { padding: 8px 10px; gap: 8px; }
  .mkx .mkh-stats { flex: 1 1 100%; display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 0 24px 2px 0; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .mkx .mkh-stat { flex: none; }
  .mkx .mkh-stat b { font-size: 19px; }
  .mkx .mkh-stat dt { font-size: 12px; }
  .mkx .mkh-stat dd > small { font-size: 13px; }
  .mkx .mkx-body, .mkx .mkx-body.no-filters { grid-template-columns: minmax(0, 1fr); }
  .mkx .mkx-q { order: -1; flex-basis: 100%; }
  .mkx .ls-board.mk-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
  .mkx .mk-grid > li.mkc .ls-ico { height: 92px; padding: 14px calc(50% - 32px); }
  .mkx .mk-grid > li.mkc .ls-card { height: 130px; }
  .mkx .mk-grid > li.mkc .ls-want { font-size: 11px; }
}

/* ---------------------------------------------------------------- ✨ Rare goods: the card skins' showcase
   goods-shop.js cardShowHTML: one card at a time on your own fight box as in a raid (rpg/ui-rpg.js gbaBox), shown big,
   in your rank's colour --rk; ◀ ▶ at its sides, a dot for each card, then the card's name, price and Buy (owner,
   2026-11-04: "more a slide card", "showcase in bigger the card style", "click to the sides", "SHOW THE FIGHT ONE ONLY").
   The box is drawn at its fight size (320 px) and zoomed, so its words and bars grow with it. On a phone it takes the whole
   width and the arrows sit under it, either side of the dots. */
.modal:has(.mk-tabs) .gd-showcase { margin: 6px 0 4px; }
.modal:has(.mk-tabs) .gd-show { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 10px 12px; }
.modal:has(.mk-tabs) .gd-show-cap { grid-column: 2; grid-row: 1; margin: 0; text-align: center; font: 400 13px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #a9b3d6; }
.modal:has(.mk-tabs) .gd-show-go { grid-row: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2px solid var(--rk); background: rgba(8, 12, 34, 0.88); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 #000a2e; }
.modal:has(.mk-tabs) .gd-show-go.prev { grid-column: 1; } .modal:has(.mk-tabs) .gd-show-go.next { grid-column: 3; }
.modal:has(.mk-tabs) .gd-show-go:hover { background: color-mix(in srgb, var(--rk) 30%, #0b1022); }
.modal:has(.mk-tabs) .gd-show-go:active { translate: 0 1px; box-shadow: 0 2px 0 #000a2e; }
.modal:has(.mk-tabs) .gd-show-fight { grid-column: 2; grid-row: 2; justify-self: center; width: 320px; zoom: 1.7; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.modal:has(.mk-tabs) .gd-show-fight .gba { pointer-events: none; }
.modal:has(.mk-tabs) .gd-show-fight.from-next { animation: gd-show-next 0.24s ease-out; }
.modal:has(.mk-tabs) .gd-show-fight.from-prev { animation: gd-show-prev 0.24s ease-out; }
@keyframes gd-show-next { from { transform: translateX(24px); opacity: 0.2; } }
@keyframes gd-show-prev { from { transform: translateX(-24px); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .modal:has(.mk-tabs) .gd-show-fight.from-next, .modal:has(.mk-tabs) .gd-show-fight.from-prev { animation: none; } }
.modal:has(.mk-tabs) .gd-show-dots { grid-column: 2; grid-row: 3; display: flex; justify-content: center; gap: 9px; margin: 2px 0; }
.modal:has(.mk-tabs) .gd-show-dots button { width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 2px solid #3a4470; background: #141a36; cursor: pointer; }
.modal:has(.mk-tabs) .gd-show-dots button:hover { border-color: var(--rk); }
.modal:has(.mk-tabs) .gd-show-dots button.on { border-color: #fff; background: var(--rk); }
.modal:has(.mk-tabs) .gd-showcase .gd-show-buy { margin-top: 8px; }
@media (max-width: 760px) { .modal:has(.mk-tabs) .gd-show-fight { zoom: 1.3; } }
@media (max-width: 560px) {
  .modal:has(.mk-tabs) .gd-show { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .modal:has(.mk-tabs) .gd-show-cap { grid-column: 1 / -1; }
  .modal:has(.mk-tabs) .gd-show-fight { grid-column: 1 / -1; width: 100%; zoom: 1; }
  .modal:has(.mk-tabs) .gd-show-go { grid-row: 3; width: 40px; height: 40px; font-size: 13px; }
}