/* ===========================================================================
   Market page — browsing is the page; one quiet tab row under the title switches
   Buy · Sell · My listings · My bids (the head is the same on every view).
   Layered on app.css + shell.css. Borderless: surfaces separate by tone
   (--surface-1/2/3) and soft shadow. The only lines are the rarity edge of
   item tiles and the focus ring. CSS motion is entrances/status only; the eligible
   PS99 detail viewer animates supplied 3D clips while visible. No btn-shine or
   scrollbar overrides (the global purple bars apply).
   Desktop: filter sidebar + grid, right cart drawer, sticky pricing panel.
   < 900px: filter bottom sheet, cart bottom sheet, docked pricing panel.
   =========================================================================== */

/* no `isolation`/z-index here: the phone filter sheet and docked pricing panel live inside
   this element and must stack above the fixed tab bar (z 50) and header */
.mk-page { position: relative; overflow-x: clip; min-height: 70vh; }
.mk-glow { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.mk-glow-a { top: -160px; left: 50%; width: min(1100px, 100%); height: 560px; transform: translateX(-62%); background: radial-gradient(closest-side, rgba(139, 92, 246, .18), rgba(139, 92, 246, .04) 55%, transparent 75%); }
.mk-glow-b { top: 120px; right: -80px; width: min(640px, 80%); height: 520px; background: radial-gradient(closest-side, rgba(124, 58, 237, .1), transparent 72%); }

html.mk-lock, html.mk-lock body { overflow: hidden; }

/* ---------------------------------------------------------------- motion (entrances only) */
@keyframes mk-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes mk-slide-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes mk-pop { 40% { transform: scale(1.08); } }
@keyframes mk-pop-in { from { opacity: 0; transform: scale(.55); } }
@keyframes mk-gone { to { opacity: 0; transform: scale(.86) translateY(12px); filter: blur(2px); } }
@keyframes mk-flash { 0% { background-color: rgba(139, 92, 246, .45); } }
@keyframes mk-row-flash { 0%, 45% { background-color: rgba(139, 92, 246, .2); box-shadow: 0 0 28px rgba(139, 92, 246, .3); } }
@keyframes mk-dock-in { from { opacity: 0; transform: translateY(40px) scale(.97); } }
/* entrance only (`backwards`): a filled transform animation would turn the panel into the
   containing block for the fixed filter sheet / docked pricing panel inside it */
.mk-in { animation: mk-rise 420ms var(--ease-out-quart) backwards; }

/* ---------------------------------------------------------------- page head */
/* The head is the same on every view (rule 17: nothing jumps on a switch): the title, one line, then the section tabs
   (rule 6) — title → line 6px, line → tabs 10px, tabs → game bar 14px. */
.mk-head { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin-bottom: 14px; }
.mk-head-copy { min-width: 0; }
.mk-fee-promotion { margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(139, 92, 246, .24); border-radius: 10px; background: rgba(139, 92, 246, .07); color: var(--foreground); font-size: 13px; line-height: 1.5; }
.mk-fee-promotion strong { color: #b99aff; }
.mk-fee-promotion small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pp-promotion-note { margin: 10px 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.ml-fee-est { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.mk-asset-tabs { display: flex; width: max-content; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 12px; background: var(--surface-1); }
.mk-asset-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600; }
.mk-asset-tabs a[aria-current="page"] { color: var(--foreground); background: var(--accent-soft); }
.mk-asset-tabs a:hover { color: var(--foreground); background: var(--surface-2); }
.mk-asset-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mk-head .page-title { font-size: clamp(34px, 4.4vw, 48px); letter-spacing: -.02em; background: linear-gradient(180deg, #fff 35%, #d6c8ff 120%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: mk-rise 500ms var(--ease-out-quart) backwards; }
.mk-head .page-sub { max-width: 660px; text-wrap: pretty; animation: mk-rise 500ms var(--ease-out-quart) 80ms backwards; }
/* Buy · Sell · My listings · My bids: the profile's tabs (.pf-tab) — text, the accent bar under the active one, no
   track line, no pill or filled segment; small neutral count capsules. The first tab's text lines up with the title. */
.mk-nav { display: flex; align-items: center; gap: 4px; margin-top: 10px; animation: mk-rise 500ms var(--ease-out-quart) 140ms backwards; }
.mk-nav-t { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .55); white-space: nowrap;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.mk-nav-t:first-child { margin-left: -14px; }
.mk-nav-t:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.mk-nav-t.on { color: #fff; }
.mk-nav-t::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px rgba(139, 92, 246, .6);
  opacity: 0; transform: scaleX(.4); transition: opacity 160ms var(--ease-out), transform 240ms var(--ease-out-quart); }
.mk-nav-t.on::after { opacity: 1; transform: none; }
/* the tab the page opens on is set before the first frame: no bar slide on arrival (market.js adds .is-ready) */
.mk-nav:not(.is-ready) .mk-nav-t, .mk-nav:not(.is-ready) .mk-nav-t::after { transition: none; }
.mk-nav-t.is-wait { visibility: hidden; } /* market.js: the "My" tabs hold their room until /api/me answers */
.mk-nav-t .s { display: none; } /* the short label (phones <= 480px) */
.mk-nav-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }
.mk-nav-n.is-bad { background: rgba(240, 86, 90, .2); color: #ff8f92; } /* outbid on a running auction */

/* ---------------------------------------------------------------- game bar */
.mk-gamebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
/* header mode (rule 21), My listings / My bids: no game to pick, so the Games button steps aside (shell.css) — and so do
   the fits rule 12 makes room for it with, which shell.css keys on the button being in the group, not on its being
   shown: the header of a page without it (the spacer, the Discord chip at 901–1040px, the user chip and the balance's
   shrink at 401–640px, the wallet glyph at 341–400px; shell.css is the gate page's too, left as it is this round) */
:root:has(#mk-gamebar[hidden]) .site-header .bar > .header-spacer { display: block; }
:root:has(#mk-gamebar[hidden]) .site-header .bar > .header-actions { margin-left: 0; }
@media (min-width: 900.02px) and (max-width: 1040px) { :root:has(#mk-gamebar[hidden]) .header-actions .discord-chip { display: inline-flex; } }
@media (min-width: 400.02px) and (max-width: 640px) {
  :root:has(#mk-gamebar[hidden]) .header-actions .auth-slot > .bal-group + .user-menu { display: block; }
  :root:has(#mk-gamebar[hidden]) .header-actions .auth-slot > .bal-group { flex-shrink: .001; }
}
@media (min-width: 340.02px) and (max-width: 400px) {
  :root:has(#mk-gamebar[hidden]) .header-actions .bal-chip .bc-ico { display: block; }
  :root:has(#mk-gamebar[hidden]) .header-actions .bal-chip { padding-left: 8px; }
}
.mk-games .gt { position: relative; }
.mk-games .gt:active { transform: scale(.96); }
.gt-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); transition: background-color 150ms; }
.gt-n:empty { display: none; }
.gt-n.is-wait { visibility: hidden; } /* market.js: holds a count's room until /api/stats answers (no tab jumps) */
.gt.on .gt-n { background: rgba(255, 255, 255, .22); color: #fff; }
.gt-n.soon { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; background: rgba(248, 183, 77, .14); color: #f8c46d; }
.gt.on .gt-n.soon { background: rgba(255, 255, 255, .22); color: #fff; }


/* ---------------------------------------------------------------- browse layout */
.mk-browse { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; }
.mk-scrim { display: none; }
/* Desktop: no inner scroller and no entrance of its own (it rises with the browse panel; an own animation replayed
   whenever the viewport crossed 900px, the phone rule turning it off). Taller than the room under the header, it
   travels with the page and stops at the edge the visitor scrolls towards (bottom edge 16px above the window's going
   down, top edge 14px under the header going up): market.js fitSide() sets its sticky top and a margin spacer. Never a
   scroll-anchoring candidate (that spacer moves its layout box while it stays put on screen). */
.mk-side {
  position: sticky; top: calc(var(--header-h) + 14px);
  display: flex; flex-direction: column; border-radius: 18px;
  background: var(--surface-1); box-shadow: var(--shadow-card);
  overflow-anchor: none;
}
.mk-side-head { display: none; }
.mk-side-body { flex: 1; min-height: 0; padding: 14px 14px 8px; }
.mk-side-foot { padding: 8px 14px 14px; }
.mk-side-apply { display: none; }
.mk-fl { display: block; margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }
.mk-side-body > .mk-search + .mk-fl { margin-top: 14px; } /* the search box needs no label of its own (aria-label) */
.mk-search .input { height: 42px; border-radius: 12px; background-color: var(--surface-2); }
.mk-search:focus-within { border-radius: 12px; }
/* the sort <select> is enhanced into a custom dropdown: style its visible trigger */
.mk-side .csel-trigger { height: 42px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 500; }
.mk-side .csel-trigger:hover, .mk-side .csel-trigger[aria-expanded="true"] { background: var(--surface-3); }
.mk-price-range { display: flex; align-items: center; gap: 8px; }
.mk-num { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--surface-2); cursor: text; transition: box-shadow 150ms, background-color 150ms; }
.mk-num:hover { background: var(--surface-3); }
.mk-num span { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .58); }
.mk-num input { flex: 1; width: 100%; min-width: 0; border: none; outline: none; background: none; color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-num input::placeholder { color: rgba(255, 255, 255, .5); font-weight: 500; } /* >= 4.5:1 on surface-2 */
.mk-num:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.mk-num.bad { background: rgba(219, 59, 62, .16); animation: shake 400ms; }
.mk-num.bad span, .mk-num.bad input { color: #ff8a8c; }
.mk-num input.is-bad, .pp-input input.is-bad, .ml-input input.is-bad { color: #ff8a8c; }
.mk-dash { width: 10px; height: 2px; border-radius: 2px; flex: none; background: rgba(255, 255, 255, .15); }

.mk-fg { margin-top: 18px; animation: mk-rise 380ms var(--ease-out-quart) backwards; animation-delay: calc(var(--gi, 0) * 70ms); }
.mk-fg-head { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 2px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .58); transition: color 150ms; }
.mk-fg-head:hover { color: #fff; }
.mk-fg-head svg { transition: transform 280ms var(--ease-out-fluid); }
.mk-fg.closed .mk-fg-head svg { transform: rotate(-90deg); }
.mk-fg-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out-fluid); }
.mk-fg.closed .mk-fg-body { grid-template-rows: 0fr; }
.mk-fg-fold { min-height: 0; overflow: hidden; }
.mk-facets .rrow { width: 100%; height: 36px; padding: 0 8px; text-align: left; animation: mk-slide-in 300ms var(--ease-out-quart) backwards; animation-delay: calc(var(--ri, 0) * 25ms + 60ms); }
.mk-facets .rrow .rrow-label { font-size: 13px; color: rgba(255, 255, 255, .72); min-width: 0; }
.mk-facets .rrow.checked .rrow-label { color: #fff; }
.mk-facets .rrow-count { color: rgba(255, 255, 255, .55); } /* app.css .3 alpha measured 2.65:1 on surface-1 */
/* a tier with nothing listed right now (MM2 lists every tier): quiet, still clickable */
.mk-facets .rrow.is-zero:not(.checked) .rrow-label { color: rgba(255, 255, 255, .42); }
.mk-facets .rrow.is-zero:not(.checked):hover .rrow-label { color: rgba(255, 255, 255, .62); }
.mk-facets .rrow.is-zero:not(.checked) .rrow-swatch { opacity: .4; box-shadow: none; }
.mk-facets .rrow.is-zero:not(.checked) .rrow-count { color: rgba(255, 255, 255, .3); }
/* fresh lists replacing the last visit's (market.js loadFacets): no second entrance */
.mk-facets.is-calm .mk-fg, .mk-facets.is-calm .rrow { animation: none; }
/* placeholder rows until the first lists arrive: a group head (27px) and rows (36px) as tall as the real ones */
.mk-fg-skel { display: grid; animation: none; }
.mk-fg-skel-h { width: 64px; height: 11px; margin: 8px 2px; border-radius: 6px; }
.mk-fg-skel-row { height: 28px; margin: 4px 0; border-radius: 10px; }
.mk-facets .rrow.checked { background: rgba(var(--rc), .1); }
.mk-rr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rr-right { display: flex; align-items: center; gap: 10px; flex: none; }
.mk-facets .rrow-box { transition: background-color 150ms, transform 250ms var(--ease-out-quart); }
.mk-facets .rrow.checked .rrow-box { transform: scale(1.08); box-shadow: 0 0 10px rgba(139, 92, 246, .5); }
.rrow-swatch.sw-grad { background: linear-gradient(135deg, #ff5f6d, #ffc371, #7cff6b, #4fd1ff, #b36bff); box-shadow: 0 0 6px rgba(167, 139, 250, .4); }
.mk-fg-empty { margin: 16px 2px 0; font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- results */
.mk-results { min-width: 0; }
.mk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; margin-bottom: 12px; }
.mk-msearch, .mk-filter-btn { display: none; }
.mk-count { margin: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.mk-count b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.mk-active { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.mk-tok { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #e6ddff; background: rgba(139, 92, 246, .14); max-width: 220px; transition: background-color 150ms, transform 200ms var(--ease-out-quart); animation: mk-pop-in 280ms var(--ease-out-quart) backwards; animation-delay: calc(var(--ti, 0) * 40ms); }
.mk-tok span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tok svg { width: 12px; height: 12px; flex: none; opacity: .7; transition: transform 250ms var(--ease-out-quart); }
.mk-tok:hover { background: rgba(139, 92, 246, .26); }
.mk-tok:hover svg { transform: rotate(90deg); opacity: 1; }
.mk-tok:active { transform: scale(.95); }
.mk-tok-clear { height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .5); transition: color 150ms; }
.mk-tok-clear:hover { color: #fff; }

.mk-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; min-height: 260px; align-content: start; transition: opacity 220ms var(--ease-out), filter 220ms; }
.mk-grid.is-refreshing { opacity: .42; filter: saturate(.5); pointer-events: none; }
/* Each page of 60 listings ("Load more") is a chunk: a grid with the same columns and gaps across the whole row (60
   cards fill whole rows at 2–6 columns, so the rows are the same as one grid's). A chunk "Load more" added is skipped
   while off screen — no style, layout or paint for its cards — which keeps scrolling and re-sorting a grid of
   hundreds of cards light; its clip is widened by the card hover shadow's reach (only where the browser can:
   otherwise no skipping). The first chunk has no box of its own (display: contents): page 1 — the first view every
   visitor gets — lays out as one grid exactly as before the chunks (a nested grid costs every first load extra layout)
   and is never contained (containment would draw it a device pixel off when the grid starts on a half pixel). The
   hovered chunk sits above the next one, as the lifted card did over the next row (a hovered page-1 card has its own
   z-index). */
.mk-chunk { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; min-width: 0; }
.mk-chunk:first-child { display: contents; }
.mk-chunk:hover { z-index: 1; }
@supports (content-visibility: auto) and (overflow-clip-margin: 1px) {
  .mk-chunk + .mk-chunk { content-visibility: auto; contain-intrinsic-size: auto 2400px; overflow-clip-margin: 64px; }
}
/* the placeholder card (shell.css .skc, the listing card's own anatomy): its foot is the seller line's room and the
   "Add to cart" button's shape — 60px, 66px with the phone's 40px button (the real .mk-foot) */
.skc .sk-f { width: 100%; height: 34px; margin-top: 26px; border-radius: 10px; }
@media (max-width: 899px) { .skc .sk-f { height: 40px; } }
/* the count's number while the first answer is out: a quiet bar of a two-digit number's width, never "0" */
.num-skel { display: inline-block; width: 22px; height: 12px; border-radius: 6px; vertical-align: -1px; background: rgba(255, 255, 255, .08); }
.mk-grid-msg { grid-column: 1 / -1; border-radius: 20px; padding: 18px 0; background: radial-gradient(60% 90% at 50% 0%, rgba(139, 92, 246, .1), transparent 70%), var(--surface-1); animation: mk-rise 420ms var(--ease-out-quart) backwards; }

/* listing card additions (card itself = shared .icard) */
.mk-card .ic-foot { padding: 0 10px 10px; }
/* listing + inventory grids: a long name gets a second line instead of losing the part that tells items apart
   ("PUMPKIN SET (2019)", "… PENGUIN (FR)" vs "(R)"; longer still, market.js fitNames() keeps its last word:
   "MEGA NEON STRAWBERRY SHORTCAKE… (R)"), and a long price pushes the value under it instead of cutting it.
   The cards of a row share its lines (subgrid rows: art · label · name · price line · footer), so their names,
   prices and footers stay level whatever wraps in one of them; without subgrid the strip fills the card and the
   price line keeps the row's common bottom edge. */
.mk-grid .ic-name, .mk-inv-grid .ic-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: break-word; }
.mk-grid .ic-strip, .mk-inv-grid .ic-strip { flex: 1 0 auto; }
.mk-grid .ic-meta, .mk-inv-grid .ic-meta { flex-wrap: wrap; row-gap: 1px; margin-top: auto; padding-top: 3px; }
@supports (grid-template-rows: subgrid) {
  .mk-grid > .icard, .mk-chunk > .icard, .mk-inv-grid > .icard { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  .mk-inv-grid > .icard { grid-row: span 4; } /* no footer */
  .mk-grid .ic-strip, .mk-inv-grid .ic-strip { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 3; row-gap: 1px; }
  .mk-grid .ic-meta, .mk-inv-grid .ic-meta { margin-top: 0; align-self: start; }
}
.mk-psv { display: inline-flex; align-items: center; min-width: 0; }
.mk-val { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.mk-val > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-psv .vicon { width: 11px; height: 11px; }
/* the value number sits on the price's baseline: the number sets the chip's baseline and the coin is centred on it
   (with the empty coin first, the coin's bottom edge was the baseline and the number rode ~2px high; centring the
   row instead still leaves the 11px number ~2px off the 13.5px price) */
.mk-grid .ic-meta, .mk-inv-grid .ic-meta { align-items: baseline; }
.mk-psv .mk-val { align-items: baseline; }
.mk-psv .mk-val .vicon { align-self: center; }
.mk-psv .mk-val { color: rgba(255, 255, 255, .6); font-weight: 600; }
.mk-foot { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; width: 100%; height: 100%; min-width: 0; }
.mk-official { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.mk-official svg { width: 12px; height: 12px; flex: none; color: var(--accent-hover); }
.mk-official > span { min-width: 0; }
.mk-verified { display: inline-flex; flex: none; color: var(--accent-hover); font-style: normal; filter: drop-shadow(0 0 4px rgba(139, 92, 246, .6)); }
.mk-av { width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; background: #1a1f2b; }
.mk-av-i { display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 260) 70% 58%), hsl(calc(var(--h, 260) + 40) 70% 40%)); }
.mk-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 34px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .06); transition: background-color 160ms, color 160ms, transform 220ms var(--ease-out-quart), box-shadow 200ms; }
.mk-add svg { flex: none; transition: transform 250ms var(--ease-out-quart); }
.mk-add:hover { color: #fff; background: rgba(139, 92, 246, .26); }
.mk-add:hover svg { transform: translateX(-1px) rotate(-8deg); }
.mk-add:active { transform: scale(.94); }
.mk-add.in { color: #fff; background: var(--grad-accent); box-shadow: 0 4px 14px rgba(139, 92, 246, .38); }
.mk-add.pop { animation: mk-pop 320ms var(--ease-out-quart); }
.mk-own { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .06); transition: background-color 160ms, color 160ms, transform 220ms var(--ease-out-quart); }
.mk-own::after { content: ''; position: absolute; inset: -3px 0; } /* a 40px hit area around the 34px button */
.mk-own svg { flex: none; width: 13px; height: 13px; }
.mk-own:hover { color: #fff; background: rgba(139, 92, 246, .26); }
.mk-own:active { transform: scale(.94); }
.mk-card .ic-art { position: relative; }
.mk-deal { position: absolute; left: 7px; top: 7px; z-index: 3; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #052e16; background: linear-gradient(135deg, #5ef08e, #16a34a); box-shadow: 0 2px 10px rgba(34, 197, 94, .45); animation: mk-pop-in 420ms var(--ease-out-quart) backwards; animation-delay: calc(var(--rd, 0ms) + 220ms); white-space: nowrap; }
.mk-card.is-deal .ic-price { color: #5ef08e; }
.mk-card.mk-gone { animation: mk-gone 280ms var(--ease-out) forwards; pointer-events: none; }

/* load more */
.mk-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 6px; animation: mk-rise 380ms var(--ease-out-quart) backwards; }
.mk-more-note { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-more-bar { width: 220px; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.mk-more-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--grad-accent); box-shadow: 0 0 10px rgba(139, 92, 246, .8); transition: width 600ms var(--ease-out-quart); }
.mk-more-btn { min-width: 210px; border-radius: 14px; background: var(--surface-2); }
.mk-more-btn:hover { background: var(--surface-3); }

/* recently sold (all sellers, this game) */
.mk-recent { margin-top: 36px; animation: mk-rise 420ms var(--ease-out-quart) backwards; }
.mk-recent .mk-h2 .live-dot { margin-right: 2px; }
.mk-recent-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.mk-sold { --rc: 139, 92, 246; flex: none; width: 214px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--surface-1); scroll-snap-align: start; animation: mk-slide-in 360ms var(--ease-out-quart) backwards; animation-delay: calc(var(--si, 0) * 45ms); transition: transform 220ms var(--ease-out-quart); }
.mk-sold:hover { transform: translateY(-2px); }
.mk-sold-art { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 60%, rgba(var(--rc), .28), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 -2px 0 rgba(var(--rc), .75); /* item thumbnail rarity edge */ }
.mk-sold-art img { width: 42px; height: 42px; object-fit: contain; }
.mk-sold-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mk-sold-t { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--rc)); }
.mk-sold-n { font-size: 11.5px; font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sold-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mk-sold-row b { font-size: 13px; font-variant-numeric: tabular-nums; }

/* section headings shared by browse + sell */
.mk-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }

/* ---------------------------------------------------------------- cart FAB */
.mk-cart-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 18px; border-radius: 999px;
  color: #fff; font-weight: 700; background: var(--grad-accent);
  box-shadow: 0 14px 36px rgba(124, 58, 237, .5);
  transition: transform 260ms var(--ease-out-quart), box-shadow 260ms var(--ease-out);
}
.mk-cart-fab:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(124, 58, 237, .62); }
.mk-cart-fab:active { transform: scale(.95); }
.mk-cart-fab svg { flex: none; }
.mk-cart-fab.fab-in { animation: mk-fab-in 560ms var(--ease-out-quart) backwards; }
.mk-cart-fab.bump { animation: mk-bump 480ms var(--ease-out-quart); }
@keyframes mk-fab-in { 0% { opacity: 0; transform: translateY(30px) scale(.6); } 60% { opacity: 1; transform: translateY(-4px) scale(1.05); } 100% { transform: none; } }
@keyframes mk-bump { 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.96) rotate(2deg); } }
.mk-fab-l { font-size: 14.5px; }
.mk-fab-total { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 14.5px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .16); }
.mk-fab-n { position: absolute; top: -6px; right: -4px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; color: #5b21b6; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.mk-fly { position: fixed; z-index: 300; pointer-events: none; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(139, 92, 246, .7)); will-change: transform; }

/* ---------------------------------------------------------------- cart drawer */
.mk-cart-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(3, 4, 8, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 320ms var(--ease-out); }
.mk-cart-scrim.open { opacity: 1; }
.mk-cart {
  position: fixed; z-index: 95; top: 0; right: 0; bottom: 0; width: min(430px, 100vw);
  display: flex; flex-direction: column; background: var(--surface-1);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .55);
  transform: translateX(104%); transition: transform 400ms var(--ease-out-fluid);
}
.mk-cart.open { transform: none; }
.mk-cart::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px; pointer-events: none; background: radial-gradient(70% 100% at 80% 0%, rgba(139, 92, 246, .14), transparent 70%); }
.mc-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 18px 18px 10px; }
.mc-head h2 { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: 20px; font-weight: 800; }
.mc-n { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 700; background: rgba(139, 92, 246, .18); color: #d6c8ff; }
.mc-clear { height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .5); transition: color 150ms, background-color 150ms; }
.mc-clear:hover { color: #ff8587; background: rgba(219, 59, 62, .1); }
.mc-body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 14px 12px; overscroll-behavior: contain; }
.mc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-item { --rc: 139, 92, 246; position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--surface-2); transition: opacity 220ms, transform 220ms var(--ease-out), background-color 150ms; animation: mk-slide-in 380ms var(--ease-out-quart) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.mc-item:hover { background: var(--surface-3); }
.mc-item.out { opacity: 0; transform: translateX(34px); }
.mc-item.changed { background: rgba(248, 183, 77, .09); }
.mc-thumb { position: relative; width: 60px; height: 60px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(var(--rc), .28), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 -2px 0 rgba(var(--rc), .75); /* item thumbnail rarity edge */ transition: opacity 150ms; }
.mc-thumb.is-busy { opacity: .55; cursor: progress; }
.mc-was { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; }
.mc-srv span em { margin-left: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #f8b74d; }
.mc-thumb img { width: 50px; height: 50px; object-fit: contain; transition: transform 260ms var(--ease-out-quart); }
.mc-thumb:hover img { transform: scale(1.1) rotate(-3deg); }
.mc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-type { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--rc)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-name { font-size: 13px; font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; min-width: 0; font-size: 11.5px; color: var(--muted); }
.mc-meta:empty { display: none; }

.mc-meta .pill { height: 18px; padding: 0 7px; font-size: 10px; font-style: normal; }
.mc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-right: 26px; }
.mc-price { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mc-mkt { font-size: 11px; color: rgba(255, 255, 255, .4); white-space: nowrap; }
.mc-x { position: absolute; top: 50%; right: 8px; width: 28px; height: 28px; margin-top: -14px; border-radius: 9px; display: grid; place-items: center; color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .04); transition: color 150ms, background-color 150ms, transform 250ms var(--ease-out-quart); }
.mc-x::after { content: ''; position: absolute; inset: -7px; }
.mc-x:hover { color: #fff; background: #c53033; transform: rotate(90deg); }
.mc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 18px 0 8px; padding: 30px 18px 22px; border-radius: 18px; background: var(--surface-2); }
.mc-empty-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px; color: var(--accent-hover); background: rgba(139, 92, 246, .14); animation: mk-pop-in 420ms var(--ease-out-quart) backwards; }
.mc-empty h3 { font-size: 17px; }
.mc-empty p { margin: 0; max-width: 300px; font-size: 13.5px; color: var(--muted); }
.mc-empty .btn { margin-top: 12px; }
.mc-foot { position: relative; z-index: 1; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); background: #0b0e14; box-shadow: 0 -16px 32px rgba(0, 0, 0, .25); }
.mc-rows .wrow { padding: 7px 2px; font-size: 13.5px; }
.mc-rows .wrow:last-child { border-bottom: none; }
.mc-rows .wrow b.muted { color: var(--muted); font-weight: 600; }
.mc-rows .wrow b.pos { color: var(--success); }
.mc-short { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: rgba(219, 59, 62, .12); animation: mk-rise 320ms var(--ease-out-quart) backwards; }
.mc-short span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.mc-short b { font-size: 14px; color: #ff8a8c; font-variant-numeric: tabular-nums; }
.mc-short .btn { flex: none; gap: 5px; }
.mc-short .btn svg { flex: none; }
.mc-short.shake { animation: shake 400ms; }
.mc-go { margin-top: 12px; }
.mc-fine, .mkd-fine { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.mc-fine svg, .mkd-fine svg { flex: none; margin-top: 1px; color: var(--accent-hover); }

/* ---------------------------------------------------------------- listing modal */
.mk-detail-modal { width: min(840px, 100%); padding: 0; overflow: hidden auto; }
.mk-detail { --rc: 139, 92, 246; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 460px; }
.mkd-close { position: absolute; top: 14px; right: 14px; z-index: 6; }
.mkd-art-wrap { position: relative; display: grid; place-items: center; padding: 40px 30px; overflow: hidden; background: radial-gradient(60% 55% at 50% 46%, rgba(var(--rc), .3), transparent 72%), linear-gradient(180deg, #121522, #0a0c13); }
.mkd-art-wrap::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%); }
.mkd-art-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--rc)); box-shadow: 0 0 24px rgba(var(--rc), .9); }
.mkd-art { position: relative; width: min(300px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.mkd-art::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rc), .3), transparent 70%); filter: blur(14px); }
.mkd-art img { position: relative; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .6)); animation: mkd-pop 620ms var(--ease-out-quart) both; }
.mkd-art.fx-rainbow img { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .6)) drop-shadow(0 0 9px rgba(255, 95, 109, .5)) drop-shadow(0 0 22px rgba(79, 209, 255, .4)) saturate(1.2); }
.mkd-art.fx-chroma img { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .6)) drop-shadow(0 0 9px rgba(34, 211, 238, .55)) drop-shadow(0 0 22px rgba(244, 114, 182, .4)); }
.mkd-art.fx-mega img { filter: drop-shadow(0 20px 32px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(236, 72, 153, .8)) drop-shadow(0 0 22px rgba(168, 85, 247, .45)); }
.mkd-art.fx-neon img { filter: drop-shadow(0 0 8px rgba(74, 222, 128, .9)) drop-shadow(0 0 20px rgba(74, 222, 128, .45)); }
.mkd-art.is-3d-ready > .mk-img { opacity: 0; animation: none; }
.mkd-3d { position: absolute; inset: 0; z-index: 2; }
.mkd-3d-stage { position: absolute; inset: 0 0 46px; overflow: hidden; border-radius: 16px; touch-action: none; cursor: grab; }
.mkd-3d-stage:active { cursor: grabbing; }
.mkd-3d-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mkd-3d-stage canvas { display: block; width: 100%; height: 100%; }
.mkd-3d-tools { position: absolute; left: 50%; bottom: 0; display: flex; gap: 6px; transform: translateX(-50%); white-space: nowrap; }
.mkd-3d-btn { min-height: 38px; padding: 0 10px; border-radius: 10px; color: rgba(255, 255, 255, .88); background: rgba(10, 12, 19, .82); box-shadow: 0 5px 18px rgba(0, 0, 0, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; transition: color 150ms, background-color 150ms; }
.mkd-3d-btn:hover:not(:disabled) { color: #fff; background: rgba(139, 92, 246, .72); }
.mkd-3d-btn:disabled { opacity: .42; cursor: default; }
.mkd-view-control { position: absolute; top: 14px; left: 16px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(100% - 80px); }
.mkd-view-toggle { min-height: 40px; padding: 0 13px; border: 0; border-radius: 10px; color: var(--foreground); background: var(--surface-secondary); box-shadow: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mkd-view-toggle:hover:not(:disabled) { background: var(--surface-tertiary); }
.mkd-view-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mkd-view-toggle:disabled { cursor: wait; color: var(--muted); }
.mkd-view-status { max-width: 245px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: left; }
.mkd-view-status:empty { display: none; }
.has-3d-control .mkd-art-badges { top: 62px; }
.has-3d-control .mkd-art > .mk-img { animation: none; }
.mkd-art-badges, .mkd-game { z-index: 3; }
@keyframes mkd-pop { 0% { opacity: 0; transform: scale(.7) rotate(-6deg); } 60% { opacity: 1; transform: scale(1.04) rotate(1deg); } 100% { transform: none; } }
.mkd-art-badges { position: absolute; top: 16px; left: 16px; display: flex; gap: 4px; flex-wrap: wrap; }
.mkd-art-badges .vb { height: 22px; padding: 0 9px; font-size: 10.5px; }
.mkd-game { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mkd-game img { opacity: .85; }
.mkd-info { display: flex; flex-direction: column; min-width: 0; padding: 30px 26px 24px; }
.mkd-info > * { animation: mk-rise 420ms var(--ease-out-quart) backwards; }
.mkd-info > *:nth-child(2) { animation-delay: 40ms; }
.mkd-info > *:nth-child(3) { animation-delay: 80ms; }
.mkd-info > *:nth-child(4) { animation-delay: 110ms; }
.mkd-info > *:nth-child(5) { animation-delay: 140ms; }
.mkd-info > *:nth-child(6) { animation-delay: 170ms; }
.mkd-info > *:nth-child(7) { animation-delay: 200ms; }
.mkd-type { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: rgb(var(--rc)); }
.mkd-name { margin: 4px 44px 12px 0; font-size: 26px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.mkd-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkd-price { font-size: 34px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mkd-cmp { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mkd-cmp.good { color: #3ee48b; background: rgba(5, 202, 98, .14); }
.mkd-cmp.over { color: #f8c46d; background: rgba(248, 183, 77, .13); }
.mkd-cmp.even { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); }
.mkd-gauge { position: relative; height: 6px; margin: 14px 0 2px; border-radius: 6px; background: rgba(255, 255, 255, .07); }
.mkd-gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: inherit; background: var(--grad-accent); box-shadow: 0 0 10px rgba(139, 92, 246, .7); transform-origin: left; animation: mkd-grow 900ms var(--ease-out-quart) 250ms backwards; }
.mkd-gauge span { position: absolute; top: -4px; bottom: -4px; left: var(--m); width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .7); }
@keyframes mkd-grow { from { transform: scaleX(0); } }
.mkd-gauge-cap { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.mkd-gauge-cap span { display: inline-flex; align-items: center; gap: 6px; }
.mkd-gauge-cap i { width: 10px; height: 4px; border-radius: 2px; }
.mkd-gauge-cap .c-price { background: var(--grad-accent); }
.mkd-gauge-cap .c-mkt { width: 3px; height: 10px; background: #fff; }
.mkd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.mkd-facts > div { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.mkd-facts dt { font-size: 11px; font-weight: 600; color: var(--muted); }
.mkd-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkd-facts .vicon { width: 13px; height: 13px; }
.mkd-demand { grid-column: 1 / -1; }
.mkd-demand dd { display: flex; align-items: center; gap: 10px; }
.mkd-demand dd b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mkd-meter { flex: 1; display: flex; gap: 3px; }
.mkd-meter i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.mkd-meter i.on { background: linear-gradient(90deg, #8b5cf6, #b197ff); box-shadow: 0 0 6px rgba(139, 92, 246, .5); animation: mkd-seg 300ms var(--ease-out-quart) backwards; animation-delay: calc(var(--i) * 40ms + 300ms); }
@keyframes mkd-seg { from { opacity: 0; transform: scaleY(.2); } }
.mkd-stock { margin-bottom: 14px; }
.mkd-stock .mk-official { font-size: 12px; }
.mkd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.mkd-actions.mk-in { animation: mk-rise 320ms var(--ease-out-quart) backwards; }
.mkd-actions .btn-lg { height: 50px; border-radius: 14px; gap: 8px; }
.mkd-cart { background: var(--surface-2); }
.mkd-cart:hover { background: var(--surface-3); }
.mkd-cart.in { background: rgba(139, 92, 246, .22); }
.mkd-cart svg { flex: none; }
.mkd-confirm { grid-column: 1 / -1; padding: 2px 14px; border-radius: 14px; background: var(--surface-2); }
.mkd-confirm .wrow:last-child { border-bottom: none; }
.mkd-confirm.is-short { background: rgba(219, 59, 62, .1); }
.mkd-btns { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.mkd-btns [data-back] { background: var(--surface-2); }
.mkd-actions .form-error { grid-column: 1 / -1; margin: 0; }
/* game states (staff console → Controls): the results' one quiet line while the game is under maintenance or the market
   is paused (rule 6: in the results, never in the head), and the reason wherever Buy / checkout / List are off — a warm
   tone only: no border, no pill (rule 3) */
.mk-gs { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: #ffe2b0; background: rgba(248, 183, 77, .08); }
.mk-gs[hidden] { display: none; }
.mkd-paused, .mc-paused, .pp-paused { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: #ffe2b0; background: rgba(248, 183, 77, .08); }
.mkd-paused svg, .mc-paused svg, .pp-paused svg { flex: none; margin-top: 2px; color: #f8c46d; }
.mkd-actions .mkd-paused { grid-column: 1 / -1; margin: 0; }
.mc-paused { margin: 10px 0 2px; }
.mk-add.is-paused { opacity: .5; }
.mkd-own { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mkd-actions > .btn-block { grid-column: 1 / -1; background: var(--surface-2); }
.mkd-actions > .btn-block:hover { background: var(--surface-3); }

/* ---------------------------------------------------------------- success modal */
.mk-success-modal { width: min(480px, 100%); overflow: hidden auto; }
.mk-success { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mks-top { position: relative; width: 100%; height: 116px; display: grid; place-items: center; }
.mks-check { position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 24px; animation: pop-spring 480ms var(--ease-out-quart) both; }
.mks-check.is-ok { color: #fff; background: linear-gradient(150deg, #34d399, #059669); box-shadow: 0 14px 34px rgba(5, 150, 105, .45); }
.mks-check svg { width: 36px; height: 36px; stroke-width: 2.6; }
.mks-halo { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .45), transparent 64%); animation: mks-halo 900ms var(--ease-out-quart) backwards; }
@keyframes mks-halo { from { transform: scale(.6); opacity: 0; } }
.mks-confetti { position: absolute; left: 50%; top: 70%; z-index: 3; }
.mks-confetti i { position: absolute; width: 7px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: mks-conf 1.6s var(--ease-out) forwards; animation-delay: var(--d); }
.mks-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes mks-conf {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  10% { opacity: 1; }
  50% { transform: translate(calc(var(--x) * .75), var(--y)) rotate(calc(var(--r) * .5)); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 200px)) rotate(var(--r)); }
}
.mks-title { margin-top: 8px; font-size: 24px; font-weight: 800; }
.mks-sub { margin: 6px 0 16px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.mks-sub b { color: #fff; }
.mks-items { width: 100%; max-height: 236px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 124px)); justify-content: center; gap: 8px; }
.mks-it { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 14px; background: var(--surface-2); animation: pop-spring 480ms var(--ease-out-quart) backwards; animation-delay: calc(var(--i) * 60ms + 220ms); }
.mks-it img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.mks-it span { max-width: 100%; font-size: 10.5px; font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mks-it b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mks-more { display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--muted); }
.mks-rows { width: 100%; margin: 14px 0 4px; text-align: left; }
.mks-rows .wrow:last-child { border-bottom: none; }
.mks-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mks-actions [data-close] { background: var(--surface-2); }

/* ---------------------------------------------------------------- sell view */
/* [your items | the pricing column]: the column is always there from 900px, so the items' width never changes */
.mk-sell-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.mk-sell-main { min-width: 0; }
/* "Your BGSI items" with one quiet meta line on its baseline ("4 available · 3 listed · 5 withdraw only") */
.mk-sell-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-height: 28px; margin: 2px 0 12px; }
.mk-sell-head .mk-h2 { margin: 0; }
.mk-inv-meta { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .48); }
.mk-inv-meta i { font-style: normal; padding: 0 2px; color: rgba(255, 255, 255, .28); } /* + the spaces around it: the line wraps between parts */
.mk-inv-meta span { white-space: nowrap; }
.mk-meta-skel { display: inline-block; width: 190px; height: 12px; vertical-align: -1px; opacity: .5; }
/* the toolbar is its own row with fixed sizes: selecting, clearing or searching never moves the search or the button */
.mk-sell-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mk-inv-search { flex: 1 1 auto; min-width: 0; max-width: 420px; }
.mk-inv-search .input { width: 100%; height: 40px; background-color: var(--surface-2); }
/* "Select all": a custom checkbox (role=checkbox; the box shows empty / a dash (some) / a check (all)); the label
   never changes */
.mk-selall { flex: none; display: inline-flex; align-items: center; gap: 10px; width: 128px; height: 40px; margin-left: auto; padding: 0 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: #fff; background: var(--surface-2); white-space: nowrap; transition: background-color 150ms; }
.mk-selall:hover:not(:disabled) { background: var(--surface-3); }
.mk-selall:disabled { color: rgba(255, 255, 255, .4); cursor: default; }
.mk-cb { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; background: rgba(255, 255, 255, .12); transition: background-color 150ms; }
.mk-cb svg { width: 12px; height: 12px; }
.mk-cb path { opacity: 0; transition: opacity 120ms; }
.mk-selall[aria-checked="true"] .mk-cb, .mk-selall[aria-checked="mixed"] .mk-cb { background: var(--accent); }
.mk-selall[aria-checked="true"] .mk-cb .ck, .mk-selall[aria-checked="mixed"] .mk-cb .dash { opacity: 1; }
.mk-inv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* picking never moves a card: no lift in this grid, not even on hover or press (the hover shadow and the art's zoom
   are the feedback), so selecting / deselecting under the pointer keeps every top edge; a selected card's art rests
   (the ring and the check say it). Touch screens never get the hover effects at all (shell.css) */
.mk-inv-grid .icard.clickable:hover, .mk-inv-grid .icard.clickable:active { transform: none; }
.mk-inv-grid .icard.selected .ic-art img, .mk-inv-grid .icard.selected:hover .ic-art img { transform: none; }
.mk-inv-card.st-listed { cursor: pointer; }
.mk-inv-card.st-listed .ic-disabled { backdrop-filter: grayscale(.85); -webkit-backdrop-filter: grayscale(.85); }
.mk-inv-card.st-listed .ic-disabled span { color: #fff; background: rgba(124, 58, 237, .55); box-shadow: 0 4px 12px rgba(124, 58, 237, .35); }
.mk-inv-card.st-withdrawing .ic-disabled span { color: #ffd48a; background: rgba(120, 80, 10, .6); }
.mk-inv-card.st-hold .ic-disabled span { color: #ffd48a; background: rgba(120, 80, 10, .6); }
.mk-inv-card.st-listed:hover .ic-disabled span { background: rgba(124, 58, 237, .85); }
.mk-inv-none { margin: 14px 2px; font-size: 13.5px; }
.mk-gate { padding: 22px 20px; border-radius: 22px; background: radial-gradient(60% 80% at 50% 0%, rgba(139, 92, 246, .13), transparent 70%), var(--surface-1); animation: mk-rise 440ms var(--ease-out-quart) backwards; }
.mk-gate .empty-state { padding: 12px 12px 8px; }
.mk-gate .empty-state h3 { font-size: 19px; }
.mk-gate .empty-state p { max-width: 440px; font-size: 14px; }
/* no items in the game: one compact card — the copy (icon tile, title, one line, the deposit button) beside the steps */
.mk-ei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; max-width: 900px; margin: 0 auto; }
.mk-ei-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-left: 8px; }
.mk-ei-ic { margin-bottom: 4px; }
.mk-ei-copy h3 { font-size: 20px; }
.mk-ei-copy p { margin: 0 0 6px; max-width: 400px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-align: left; background: var(--surface-2); animation: mk-rise 420ms var(--ease-out-quart) backwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
.mk-steps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 13px; background: var(--grad-accent); box-shadow: 0 4px 14px rgba(139, 92, 246, .45); }
.mk-steps span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.mk-steps strong { display: block; margin-bottom: 2px; font-size: 13.5px; color: #fff; }

/* pricing panel */
.mk-pp { position: sticky; top: calc(var(--header-h) + 14px); display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 28px); border-radius: 20px; background: var(--surface-1); box-shadow: var(--shadow-card); animation: mk-rise 440ms var(--ease-out-quart) 80ms backwards; }
/* nothing selected: one small card, painted with the grid (no entrance of its own) */
.mk-pp.is-empty { animation: none; background: radial-gradient(80% 60% at 50% 0%, rgba(139, 92, 246, .12), transparent 70%), var(--surface-1); }
.pp-empty { padding: 24px 20px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pp-empty-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 16px; color: var(--accent-hover); background: rgba(139, 92, 246, .14); }
.pp-empty-ico svg { width: 24px; height: 24px; }
.pp-empty h3 { font-size: 16px; }
.pp-empty > p { margin: 6px 0 0; max-width: 290px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pp-peekbar { display: none; }
.pp-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; }
.pp-head h3 { font-size: 18px; font-weight: 800; }
.pp-bulk { display: flex; align-items: center; gap: 6px; padding: 0 18px 12px; }
.pp-bulk span { margin-right: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.pp-bulk button { height: 30px; padding: 0 11px; border-radius: 9px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .75); background: var(--surface-2); transition: all 150ms; }
.pp-bulk button:hover { color: #fff; background: rgba(139, 92, 246, .22); }
.pp-bulk button:active, .pp-quick button:active { transform: scale(.94); }
/* two rows always fit (market.js fitSticky keeps the panel at least that tall); while more are below, the list fades
   out at its foot (a mask only — no scrollbar styling, rule 4) */
.pp-rows { flex: 1 1 auto; min-height: 268px; overflow-y: auto; display: grid; gap: 8px; align-content: start; padding: 0 12px 4px; overscroll-behavior: contain; }
/* an auction adds the Duration row: ~1.5 rows reserved, so the foot and "Start N auctions" fit a 900px-tall laptop
   screen as the view opens (the second row peeks under the fade) */
@media (min-width: 900px) { .mk-pp.is-auction .pp-rows { min-height: 200px; } }
.pp-rows.can-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
.pp-row { --rc: 139, 92, 246; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface-2); transition: background-color 160ms, opacity 200ms, transform 200ms var(--ease-out); }
.pp-row.fresh { animation: mk-slide-in 380ms var(--ease-out-quart) backwards; }
.pp-row.out { opacity: 0; transform: translateX(22px) scale(.98); }
.pp-row.bad { background: rgba(219, 59, 62, .1); }
.pp-row.shake { animation: shake 400ms; }
.pp-thumb { position: relative; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(var(--rc), .28), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 -2px 0 rgba(var(--rc), .75); /* item thumbnail rarity edge */ }
.pp-thumb img { width: 44px; height: 44px; object-fit: contain; }
.pp-main { min-width: 0; }
.pp-top { display: flex; align-items: center; gap: 6px; }
.pp-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-x { position: relative; flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04); transition: all 160ms; }
.pp-x::after { content: ''; position: absolute; inset: -8px; }
.pp-x svg { width: 12px; height: 12px; }
.pp-x:hover { color: #fff; background: #c53033; transform: rotate(90deg); }
.pp-sub { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-price { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pp-input, .ml-input { display: flex; align-items: center; gap: 3px; flex: none; width: 104px; height: 34px; padding: 0 10px; border-radius: 10px; background: #0b0e14; cursor: text; transition: box-shadow 150ms, background-color 150ms; }
.pp-input:focus-within, .ml-input:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.pp-row.bad .pp-input { background: rgba(219, 59, 62, .18); }
.pp-row.bad .pp-input span, .pp-row.bad .pp-input input { color: #ff9092; }
.pp-input span, .ml-input span { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .4); }
.pp-input input, .ml-input input { width: 100%; min-width: 0; border: none; outline: none; background: none; color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-input.flash { animation: mk-flash 600ms var(--ease-out); }
.pp-quick { flex: 1; min-width: 0; display: flex; gap: 4px; }
.pp-quick button { flex: 1; min-width: 0; height: 34px; padding: 0 2px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .05); transition: all 150ms; }
.pp-quick button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.pp-quick button.on { color: #fff; background: rgba(139, 92, 246, .3); }
.pp-quick button:disabled { opacity: .3; pointer-events: none; }
.pp-recv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.pp-recv b { color: #fff; font-variant-numeric: tabular-nums; }
.pp-row.bad .pp-fee-l { color: #ff8587; font-weight: 600; }
.pp-foot { margin: 6px 10px 10px; padding: 6px 12px 12px; border-radius: 16px; background: var(--surface-2); }
.pp-foot .wrow { padding: 7px 2px; }
.pp-net-row { border-bottom: none !important; }
.pp-net-row b { font-size: 17px; }
.pp-foot b.is-unset { color: var(--muted); font-weight: 600; } /* "—" until a row has a price */
.pp-foot .btn-lg { margin-top: 8px; }

/* MY LISTINGS: Active | Sold (the My bids look), one row per listing in every game */
.ml-row {
  --rc: 139, 92, 246;
  display: grid; grid-template-columns: 56px minmax(0, 1.6fr) minmax(76px, .6fr) minmax(150px, 1fr) minmax(92px, .7fr) auto;
  gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: var(--surface-1);
  transition: background-color 150ms, opacity 220ms, transform 220ms var(--ease-out);
  animation: mk-rise 380ms var(--ease-out-quart) backwards; animation-delay: calc(var(--i, 0) * 40ms);
}
.ml-row:hover { background: #121620; }
/* editing a price: its column is never narrower than the editor (field + save + cancel), the name gives way */
.ml-row.editing { grid-template-columns: 56px minmax(0, 1.6fr) minmax(76px, .6fr) minmax(max-content, 1fr) minmax(92px, .7fr) auto; }
.ml-row.flash { animation: mk-row-flash 1.6s var(--ease-out); }
.ml-row.out { opacity: 0; transform: translateX(26px); }
.ml-head { display: contents; }
.ml-thumb { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(var(--rc), .3), rgba(255, 255, 255, .03) 70%); position: relative; }
.ml-thumb img { width: 46px; height: 46px; object-fit: contain; transition: transform 260ms var(--ease-out-quart); }
.ml-thumb[data-view] { cursor: pointer; }
.ml-thumb[data-view]:hover img, button.ml-thumb:hover img { transform: scale(1.1) rotate(-3deg); }
.ml-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* name and sub-line take a second line before an ellipsis (narrow rows, long names: "… PENGUIN (FR)") */
.ml-name, .ml-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.ml-name { font-size: 13.5px; font-weight: 700; text-transform: uppercase; color: #fff; }
a.ml-name { transition: color 150ms; }
/* touch widths: the name link is a 40px tap target (rule 11); the padding is the hit area, the negative margin keeps the row */
@media (max-width: 899px) { a.ml-name { padding: 10.5px 0; margin: -10.5px 0; } }
a.ml-name:hover { color: var(--accent-hover); }
.ml-lbl .s { display: none; } /* the short label (phones) */
.ml-sub { font-size: 12px; color: var(--muted); }
.ml-sub em { font-style: normal; font-weight: 700; }
.ml-age { white-space: nowrap; } /* "listed 27m ago" stays one piece: a long kind wraps before it */
.ml-col { min-width: 0; }
.ml-col > span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ml-col > span i { font-style: normal; font-weight: 700; }
.ml-col > span i.over { color: #f8c46d; }
.ml-col > span i.under { color: #3ee48b; }
.pp-input input:focus-visible, .ml-input input:focus-visible, .mk-num input:focus-visible, .mk-search .input:focus-visible { box-shadow: none; }
.ml-col b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ml-view { display: flex; align-items: center; gap: 8px; }
.ml-view b { font-size: 15px; }
.ml-edit { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .05); transition: all 150ms; }
.ml-edit:hover { color: #fff; background: rgba(139, 92, 246, .3); transform: rotate(-8deg); }
.ml-editor { display: flex; align-items: center; gap: 4px; animation: mk-pop-in 220ms var(--ease-out-quart) backwards; }
.ml-input { width: 96px; }
.ml-input.shake { animation: shake 400ms; }
.ml-ok, .ml-no { position: relative; width: 32px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; transition: all 150ms; }
.ml-ok { color: #fff; background: var(--grad-accent); box-shadow: 0 4px 12px rgba(139, 92, 246, .35); }
.ml-ok:hover { filter: brightness(1.12); }
.ml-ok.is-loading { color: transparent; }
.ml-ok.is-loading::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin 700ms linear infinite; }
.ml-no { color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .05); }
.ml-no:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ml-act { display: flex; gap: 6px; justify-content: flex-end; }
.ml-act .btn { gap: 6px; }
.ml-act .btn svg { flex: none; }
.ml-unlist { min-width: 76px; background: var(--surface-2); }
.ml-unlist:hover { color: #ff8587; background: rgba(219, 59, 62, .16); }
.ml-err { grid-column: 1 / -1; margin: 0 !important; }
/* a sale: Sold for · Fee · You got (green), no action */
.ml-row.is-sold .ml-recv b { color: #3ee48b; }
.ml-row.is-skel { animation: none; }
.ml-row.is-skel .skel { display: block; opacity: .4; }
.ml-row.is-skel .ml-thumb { border-radius: 12px; }
.ml-sk-btn { width: 76px; height: 34px; border-radius: 10px; }

.mk-cheap { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.mk-cheap li { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--surface-2); }
.mk-cheap span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-cheap em { font-style: normal; font-size: 12px; color: var(--muted); }

/* docked pricing sheet backdrop (phones) — under the header + tab bar (z 50), over the page */
.mk-pp-scrim { display: none; }

/* ---------------------------------------------------------------- auctions */
/* sidebar: Format = All · Buy now · Auctions (one segmented control; a tinted fill marks the choice) */
.mk-format { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.mk-format button { height: 36px; min-width: 0; padding: 0 4px; border-radius: 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .62); transition: background-color 150ms, color 150ms; }
.mk-format button:hover { color: #fff; background: var(--surface-3); }
.mk-format button.on { color: #fff; background: rgba(139, 92, 246, .3); }
/* a coming-soon game (market.js paintGsLine): the filters stay in place, dimmed and inert — nothing to filter yet */
.mk-browse.is-soon :is(.mk-side-body, .mk-side-foot, .mk-msearch, .mk-filter-btn) { opacity: .45; pointer-events: none; }

/* auction card: the footer keeps the fixed card's tracks — an 18px line (countdown · bids) where the seller line
   is, the elapsed bar in the 8px gap under it, then the 34px (40px < 900px) button row */
/* contain: the row's box is fixed (18px, the card's width), so a ticking countdown re-lays out this row only, never
   the whole grid (with hundreds of auction cards that was a full-grid layout every second) */
.mk-auc-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 18px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .55); contain: size layout; }
.mk-auc-time { display: inline-flex; align-items: center; gap: 4px; flex: none; color: rgba(255, 255, 255, .82); }
.mk-auc-time svg { flex: none; opacity: .75; }
.mk-auc-time b { display: inline-block; min-width: 6.4ch; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-auc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.mk-auc-n em { font-style: normal; font-weight: 700; }
.mk-auc-n .is-ok { color: #3ee48b; }
.mk-auc-n .is-bad { color: #ff8587; }
.mk-auc-bar { position: absolute; left: 0; right: 0; bottom: -5.5px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .07); pointer-events: none; }
.mk-auc-bar i, .mkd-auc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-accent); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 1s linear; }
.mk-auc-row.is-ending .mk-auc-time, .mkd-auc.is-ending .mkd-auc-top b { color: #f8b74d; }
.mk-auc-row.is-ending .mk-auc-bar i, .mkd-auc.is-ending .mkd-auc-bar i { background: linear-gradient(90deg, #f59e0b, #f8b74d); }
.mk-card.is-ended .mk-auc-time { color: rgba(255, 255, 255, .5); }
.mk-card.is-ended .mk-auc-bar i { background: rgba(255, 255, 255, .22); }
.mk-bid-row { display: flex; gap: 6px; height: 34px; min-width: 0; }
.mk-bid, .mk-lead, .mk-auto, .mk-hist { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 10px; font-size: 12.5px; font-weight: 600; transition: background-color 160ms, color 160ms, transform 220ms var(--ease-out-quart); }
.mk-bid { flex: 1; min-width: 0; gap: 4px; padding: 0 6px; white-space: nowrap; color: #ece6ff; background: rgba(139, 92, 246, .2); }
.mk-bid b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.mk-bid:hover { background: rgba(139, 92, 246, .36); }
.mk-lead { flex: 1; min-width: 0; gap: 6px; color: #3ee48b; background: rgba(5, 202, 98, .1); }
.mk-lead svg { flex: none; }
.mk-lead:hover { background: rgba(5, 202, 98, .16); }
.mk-auto, .mk-hist { flex: none; width: 34px; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .06); }
.mk-auto:hover, .mk-hist:hover { color: #fff; background: rgba(139, 92, 246, .26); }
.mk-grid.is-tight .mk-hist { display: none; } /* cards too narrow for three buttons (market.js fitBids) */
.mk-bid:active, .mk-lead:active, .mk-auto:active, .mk-hist:active { transform: scale(.94); }
.mk-bid-row .mk-own, .mk-ended { flex: 1; min-width: 0; height: 100%; }
.mk-ended { display: grid; place-items: center; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); }

/* auction detail: the history sits under the art (one dark column), the bid box under the name */
.mk-detail.is-auction { grid-template-areas: "art info" "hist info"; grid-template-rows: auto 1fr; }
.mk-detail.is-auction .mkd-art-wrap { grid-area: art; }
.mk-detail.is-auction .mkd-info { grid-area: info; }
.mkd-hist { grid-area: hist; min-width: 0; padding: 4px 22px 22px; background: #0a0c13; }
.mkd-hist.flash-sec { animation: mk-row-flash 1.6s var(--ease-out); }
.mkd-hist-head { display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 4px; }
.mkd-hist-head h3 { font-size: 14px; font-weight: 800; }
.mkd-hist-head em { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(139, 92, 246, .16); color: #cbb8ff; }
.mkd-hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mkd-hrow { display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(76px, auto) 34px; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
.mkd-hrow:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.mkd-hrow.is-you { background: rgba(139, 92, 246, .13); }
.mkd-hname { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .72); }
.mkd-hrow.is-you .mkd-hname { font-weight: 800; color: #fff; }
.mkd-hauto { grid-column: 2; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.mkd-hrow b { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
.mkd-hrow time { grid-column: 4; text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mkd-hrow.is-skel { background: none; }
.mkd-hrow.is-skel .skel { grid-column: 1 / -1; height: 14px; border-radius: 7px; opacity: .45; }
.mkd-hempty { margin: 0; padding: 10px; border-radius: 10px; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .025); }
.mkd-hall { width: 100%; height: 36px; margin-top: 6px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent-hover); background: rgba(139, 92, 246, .08); transition: background-color 150ms; }
.mkd-hall:hover { background: rgba(139, 92, 246, .16); }
.mkd-hall.is-skel { background: rgba(255, 255, 255, .025); }
.mkd-cur { display: flex; flex-direction: column; min-width: 0; }
.mkd-cur-k { display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mkd-cur-k em { font-style: normal; font-weight: 600; color: rgba(255, 255, 255, .45); }
.mkd-cur-k em::before { content: '·'; margin-right: 6px; }
.mk-detail.is-auction .mkd-price-row { align-items: flex-end; }
.mk-detail.is-auction .mkd-cmp { margin-bottom: 6px; }
.mkd-auc { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.mkd-auc-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mkd-auc-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mkd-auc-k svg { align-self: center; }
.mkd-auc-top b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkd-auc.is-ended .mkd-auc-top b { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.mkd-auc-top em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: #f8c46d; }
.mkd-auc-bar { display: block; height: 4px; margin: 10px 0 0; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.mkd-auc.is-ended .mkd-auc-bar i { background: rgba(255, 255, 255, .22); }
.mkd-auc-st { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.mkd-auc-st.is-ok { color: #3ee48b; }
.mkd-auc-st.is-bad { color: #ff8a8c; }
.mkd-auc-st.is-warn { color: #f8c46d; }
.mk-detail.is-auction .mkd-facts { margin-top: 14px; }
.mkd-span { grid-column: 1 / -1; }
.mkd-actions .btn svg { flex: none; }
.mkd-auto { background: var(--surface-2); }
.mkd-auto:hover { background: var(--surface-3); }
.mkd-hold, .mkd-ask { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.mkd-ask { font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.mkd-ask b { color: #fff; }
.mkd-max { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.mkd-max-k { font-size: 12px; font-weight: 600; color: var(--muted); }
.mkd-max-k em { font-style: normal; margin-left: 4px; color: rgba(255, 255, 255, .5); }
.mkd-max-k em::before { content: '· '; }
.mkd-max-k em.neg { color: #ff8a8c; }
.mkd-max-in { display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); cursor: text; transition: box-shadow 150ms, background-color 150ms; }
.mkd-max-in:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.mkd-max-in span { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, .45); }
.mkd-max-in input { flex: 1; width: 100%; min-width: 0; border: none; outline: none; background: none; color: #fff; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mkd-max-in input::placeholder { color: rgba(255, 255, 255, .3); }
.mkd-max-in input:focus-visible { box-shadow: none; }
.mkd-max-in.bad { background: rgba(219, 59, 62, .14); }
.mkd-max-in.bad input { color: #ff8a8c; }
.mkd-max-help { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* desktop: while a bid / auto bid / cancel step is open it takes the room of the facts and the seller row (both are on
   the idle view), so the step's button sits inside the modal at 1366×768 instead of below its fold (market.js) */
@media (min-width: 900px) {
  .mk-detail.is-auction.is-step .mkd-facts, .mk-detail.is-auction.is-step .mkd-stock { display: none; }
  .mk-detail.is-auction.is-step .mkd-auc { margin-bottom: 16px; }
}
/* a confirm button names its amount in full; narrow phones get the short form of the same words */
.mkd-btns .l-short { display: none; }
.mkd-btns .btn { min-width: 0; white-space: nowrap; }

/* sell panel: Fixed price | Auction, then the duration (auction only) */
.pp-fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0 18px 8px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.pp-fmt button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border-radius: 9px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .62); transition: background-color 150ms, color 150ms; }
.pp-fmt button svg { flex: none; }
.pp-fmt button:hover { color: #fff; background: var(--surface-3); }
.pp-fmt button.on { color: #fff; background: rgba(139, 92, 246, .3); }
.pp-dur { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 18px 8px; }
.pp-dur label { font-size: 12px; font-weight: 600; color: var(--muted); }
.pp-dur .csel-trigger { width: 132px; height: 34px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.pp-dur .csel-trigger:hover, .pp-dur .csel-trigger[aria-expanded="true"] { background: var(--surface-3); }
/* the auction's one rule beside its duration (two short lines in the select's height: no extra row) */
.pp-dur-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-aucnote { font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .45); }

/* your auction among your listings: no price pen, the countdown in the sub-line */
.ml-auc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ml-auc svg { flex: none; align-self: center; }
.ml-auc b { display: inline-block; min-width: 6.4ch; font-weight: 700; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.ml-auc.is-ending b { color: #f8b74d; }
.ml-col > span i.ml-nb { font-weight: 600; color: rgba(255, 255, 255, .45); }
.ml-unlist:disabled { opacity: .45; }

/* YOUR BIDS: Live | Ended, held total, one row per auction (the listing rows' look) */
.bd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bd-seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-1); box-shadow: var(--shadow-card); }
.bd-seg button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .62); transition: background-color 150ms, color 150ms; }
.bd-seg button:hover { color: #fff; background: var(--surface-2); }
.bd-seg button.on { color: #fff; background: rgba(139, 92, 246, .3); }
.bd-seg em { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .08); }
.bd-seg em.is-wait { visibility: hidden; }
.bd-held { display: flex; align-items: baseline; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--surface-1); line-height: 38px; }
.bd-held span { font-size: 12px; font-weight: 600; color: var(--muted); }
.bd-held b { font-size: 15px; font-variant-numeric: tabular-nums; }
.bd-list { display: grid; gap: 8px; }
.bd-row {
  --rc: 139, 92, 246;
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(88px, .7fr)) minmax(150px, auto);
  gap: 14px; align-items: center; min-height: 76px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface-1);
  transition: background-color 150ms;
}
.bd-row:not(.is-skel):hover { background: #121620; }
.bd-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bd-head .ml-thumb { flex: none; }
.bd-head .ml-main { flex: 1; }
.bd-row .ml-col b.bd-state { font-weight: 800; color: rgba(255, 255, 255, .55); }
.bd-row .ml-col b.bd-state.is-acc { color: var(--accent-hover); }
.bd-row .ml-col b.bd-state.is-ok { color: #3ee48b; }
.bd-row .ml-col b.bd-state.is-bad { color: #ff8587; }
.bd-row.st-lost, .bd-row.st-cancelled { background: rgba(14, 17, 24, .7); }
.bd-row .ml-col b { font-size: 14px; }
.bd-end b { display: inline-block; min-width: 6.4ch; font-variant-numeric: tabular-nums; }
.bd-end.is-ending b { color: #f8b74d; }
.bd-act { display: flex; justify-content: flex-end; }
.bd-act .btn { gap: 6px; min-width: 132px; white-space: nowrap; }
.bd-act .btn-ghost { background: var(--surface-2); }
.bd-act .btn-ghost:hover { background: var(--surface-3); }
.bd-row.is-skel .skel { display: block; opacity: .4; }
.bd-row.is-skel .ml-thumb { width: 56px; height: 56px; border-radius: 12px; }
.bd-sk-a { width: 60%; height: 13px; border-radius: 6px; }
.bd-sk-b { width: 36%; height: 11px; margin-top: 7px; border-radius: 6px; }
.bd-sk-c { width: 70%; height: 30px; border-radius: 8px; }
.bd-sk-btn { width: 132px; height: 34px; border-radius: 10px; }
.bd-empty { border-radius: 20px; padding: 10px 0; background: radial-gradient(60% 90% at 50% 0%, rgba(139, 92, 246, .1), transparent 70%), var(--surface-1); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .mk-sell-layout { grid-template-columns: minmax(0, 1fr) 330px; }
}
/* My listings is the page's full width: the one-line row (thumb · name · Market · Your price · You receive · action)
   down to 761px; tablets stack it (head, three cells, the action); phones get a compact two-line row (below) */
@media (max-width: 760px) {
  .ml-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "h h h" "k p r" "a a a"; gap: 10px 10px; padding: 12px; align-items: stretch; }
  .ml-head { display: flex; align-items: center; gap: 12px; grid-area: h; min-width: 0; }
  .ml-row .ml-thumb { width: 48px; height: 48px; flex: none; }
  .ml-row .ml-thumb img { width: 40px; height: 40px; }
  .ml-main { flex: 1; }
  .ml-mkt { grid-area: k; }
  .ml-price { grid-area: p; }
  .ml-recv { grid-area: r; }
  .ml-row .ml-col { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
  .ml-col b, .ml-view b { font-size: 13.5px; }
  .ml-view { gap: 6px; min-width: 0; }
  .ml-view b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the 40px edit button sits at the price cell's right edge, out of the text flow: the price keeps the rest of the
     cell and the three cells keep one height */
  .ml-price { position: relative; }
  .ml-row:not(.editing) .ml-price { padding-right: 56px; }
  .ml-row.is-auction:not(.editing) .ml-price, .ml-row.is-sold .ml-price { padding-right: 10px; }
  .ml-edit { position: absolute; top: 50%; right: 8px; width: 40px; height: 40px; margin-top: -20px; border-radius: 12px; }

  .ml-row.editing { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "h h h" "p p p" "a a a"; }
  .ml-row.editing .ml-mkt, .ml-row.editing .ml-recv { display: none; }
  .ml-editor { gap: 6px; }
  .ml-editor .ml-input { flex: 1; width: auto; height: 42px; }
  .ml-ok, .ml-no { width: 44px; height: 42px; }
  .ml-act { grid-area: a; justify-content: stretch; }
  .ml-act .btn { flex: 1; height: 40px; }
  .ml-row.is-sold, .ml-row.is-sold.editing { grid-template-areas: "h h h" "k p r"; }
  .ml-row.is-sold .ml-act { display: none; }
}
@media (max-width: 1040px) {
  .mk-browse { grid-template-columns: 228px minmax(0, 1fr); gap: 16px; }
  .mk-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}
/* the 228px sidebar: the short "All" gives up room so "Auctions" fits whole (no ellipsis) */
@media (min-width: 900px) and (max-width: 1040px) {
  .mk-format { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .mk-format button { padding: 0 2px; }
}

@media (max-width: 899px) {
  .mk-gamebar { margin-bottom: 14px; }
  .mk-games .gt { justify-content: center; min-width: 0; padding: 0 12px; gap: 6px; height: 40px; }
  .mk-games .gt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }


  .mk-browse { grid-template-columns: minmax(0, 1fr); }
  .mk-scrim { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(3, 4, 8, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 320ms var(--ease-out); }
  .mk-scrim.open { opacity: 1; }
  .mk-side {
    position: fixed; z-index: 95; top: auto; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow: hidden;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); /* a notched phone held sideways */
    border-radius: 24px 24px 0 0; background: var(--surface-1); box-shadow: 0 -24px 70px rgba(0, 0, 0, .6);
    transform: translateY(104%); visibility: hidden;
    transition: transform 400ms var(--ease-out-fluid), visibility 0s linear 400ms;
  }
  .mk-side.open { transform: none; visibility: visible; transition: transform 400ms var(--ease-out-fluid), visibility 0s; }
  .mk-side::before { content: ''; display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: rgba(255, 255, 255, .16); flex: none; }
  .mk-side-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; }
  .mk-side-head h2 { font-size: 19px; font-weight: 800; }
  .mk-side-body { padding: 4px 16px 10px; overflow-y: auto; overscroll-behavior: contain; }
  .mk-side-body > .mk-search { display: none; }
  .mk-side-body > .mk-fl[for="mk-sort"] { margin-top: 8px; }
  .mk-side-foot { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #0b0e14; }
  .mk-side-foot .reset-filters { width: auto; flex: none; height: 48px; padding: 0 16px; border-radius: 12px; }
  .mk-side-apply { display: inline-flex; flex: 1; height: 48px; border-radius: 12px; }
  .mk-facets .rrow { height: 42px; }
  .mk-fg-skel-h { margin: 14px 2px 15px; }
  .mk-fg-skel-row { height: 34px; }

  .mk-toolbar { gap: 8px; }
  .mk-msearch { display: flex; flex: 1; min-width: 0; }
  .mk-filter-btn { display: inline-flex; flex: none; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); }
  .mk-filter-btn:hover { background: var(--surface-3); }
  .mk-filter-n { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--accent); color: #fff; }
  .mk-count { order: 3; width: 100%; margin-top: 2px; }
  .mk-active { order: 4; width: 100%; }
  .mk-count:has(+ .mk-active:empty) { margin-bottom: 0; }

  .mk-cart-fab { right: calc(16px + env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom) + 14px); width: 58px; height: 58px; padding: 0; justify-content: center; }
  .mk-fab-l, .mk-fab-total { display: none; }
  .mk-cart { top: auto; left: 0; right: 0; width: 100%; max-height: 90dvh; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); border-radius: 24px 24px 0 0; transform: translateY(104%); box-shadow: 0 -24px 70px rgba(0, 0, 0, .6); }
  .mk-cart::before { content: ''; position: relative; z-index: 2; display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: rgba(255, 255, 255, .16); flex: none; }
  .mc-head { padding: 8px 16px 10px; }
  .mc-body { padding: 6px 12px 10px; }
  .mc-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }

  .mk-detail-modal { padding: 0 !important; }
  .mk-detail-modal::before { position: absolute; top: 8px; left: 50%; z-index: 7; margin: 0 0 0 -20px !important; }
  .mk-detail { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mkd-art-wrap { padding: 30px 20px 26px; }
  .mkd-art { width: min(210px, 58vw); }
  .mkd-info { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .mkd-name { font-size: 22px; margin-right: 0; }
  .mkd-price { font-size: 28px; }
  .mkd-close { top: 12px; right: 12px; }

  .mk-sell-layout { grid-template-columns: minmax(0, 1fr); }
  .mk-inv-search { max-width: none; }
  .mk-inv-search .input { height: 42px; }
  .mk-selall { width: 120px; height: 42px; }
  .mk-pp.is-empty { display: none; }
  .pp-rows { min-height: 0; } /* the docked sheet opens on demand: no reserved rows */
  .mk-pp:not(.is-empty) {
    position: fixed; z-index: 70; top: auto; left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
    max-height: calc(100dvh - var(--header-h) - 90px); border-radius: 20px; background: var(--surface-pop);
    box-shadow: var(--shadow-pop), 0 0 40px rgba(139, 92, 246, .16);
    animation: mk-dock-in 460ms var(--ease-out-quart) both;
  }
  .pp-peekbar { display: flex; align-items: center; gap: 12px; width: 100%; height: 62px; padding: 0 14px 0 12px; text-align: left; flex: none; }
  .pp-pb-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 15px; font-weight: 800; background: var(--grad-accent); box-shadow: 0 4px 14px rgba(139, 92, 246, .45); flex: none; }
  .pp-pb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .pp-pb-main > b { font-size: 14px; }
  .pp-pb-main > span { font-size: 12px; color: var(--muted); }
  .pp-pb-main > span b { color: var(--accent-hover); font-variant-numeric: tabular-nums; }
  .pp-pb-chev { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .06); transform: rotate(180deg); transition: transform 300ms var(--ease-out-fluid); }
  .mk-pp.open .pp-pb-chev { transform: none; }
  .mk-pp .pp-sheet { display: none; }
  .mk-pp.open .pp-sheet { display: flex; animation: mk-rise 300ms var(--ease-out-quart) backwards; }
  .pp-head { padding-top: 6px; }
  .pp-head h3 { font-size: 16px; }
  .pp-foot { margin: 6px 8px 8px; padding: 4px 12px 12px; }
  html.mk-pp-docked body { padding-bottom: 150px; }

  .mk-ei { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mk-ei-copy { align-items: center; text-align: center; padding-left: 0; }
  .mk-ei-copy .btn { align-self: stretch; }

  .mk-pp-scrim { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(3, 4, 8, .58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 280ms var(--ease-out); }
  .mk-pp-scrim.open { opacity: 1; }

  /* listing modal: Buy now / Add to cart stay in reach while the details scroll */
  /* the bar is solid and the details fade out just above it (::before, as tall as the 14px gap the bar sits under at
     the end of the sheet): no half-cut figures over the buttons or in the gap between them */
  .mkd-actions { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; padding: 12px 16px; background: var(--surface-1); }
  .mkd-actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none; background: linear-gradient(180deg, rgba(14, 17, 24, 0), var(--surface-1)); }

  /* tap targets >= 40px (cards: "Add to cart" and the own listing's label stay one height, so a row's footers and
     prices stay level) */
  .mk-add, .mk-own { height: 40px; }
  .mk-tok { position: relative; height: 36px; }
  .mk-tok::after, .mk-tok-clear::after { content: ''; position: absolute; inset: -4px -2px; }
  .mk-tok-clear { position: relative; height: 36px; }
  .mk-fg-head { min-height: 40px; padding: 0 2px; }
  .mkd-close, .mc-close, #mk-side-close { width: 40px; height: 40px; border-radius: 12px; }
  .mc-clear { height: 40px; padding: 0 12px; }
  .mc-short .btn { height: 40px; }
  .pp-bulk button { height: 40px; padding: 0 13px; }
  .pp-input { height: 40px; }
  .pp-quick button { height: 40px; }
  .mk-more-btn { height: 48px; }
  .ml-act .btn { height: 40px; }
  .ml-edit { width: 40px; height: 40px; border-radius: 12px; }
}

@media (max-width: 480px) {
  .mk-games .gt-n:not(.soon) { display: none; }
  .mk-games .gt img { width: 18px; height: 18px; }
  /* the tabs' short labels: "Listings", "Bids" */
  .mk-nav-t .l { display: none; }
  .mk-nav-t .s { display: inline; }
}
@media (max-width: 370px) {
  /* "Adopt Me" fits its third of the row in full (the home page drops the game icons at the same width) */
  .mk-games .gt img { display: none; }
}
@media (max-width: 560px) {
  /* phones: no line under the title; the section tabs share one full-width row (never a scroller; 44px tall) */
  .mk-head .page-sub { display: none; }
  .mk-nav { gap: 0; }
  .mk-nav-t { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 14px; }
  .mk-nav-t:first-child { margin-left: 0; }
  .mk-nav-t::after { left: 8px; right: 8px; }
  /* signed out the row is Buy · Sell: two tabs stretched over 343px would put a 150px bar under "Buy". They keep the
     signed-in tabs' width (~64px, the bar ~48px) and sit left like that row */
  .mk-nav.is-out .mk-nav-t { flex: 0 0 auto; min-width: 64px; }
  .mk-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mk-games .gt { padding: 0 8px; }
  .mk-sell-head .mk-inv-meta { flex-basis: 100%; font-size: 12.5px; } /* the meta line on its own line under the heading */
  .mk-inv-meta i { padding: 0; }
  .mk-grid, .mk-inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mk-card .ic-foot { padding: 0 8px 8px; }
  .mk-add { font-size: 12px; gap: 5px; }
  .mk-head .page-sub { font-size: 13.5px; }
  .mk-sec-head .mk-h2, .mk-sell-head .mk-h2 { font-size: 17px; }
  .mkd-facts { gap: 6px; }
  .mkd-facts > div { padding: 9px 10px; }
  .mks-actions { grid-template-columns: minmax(0, 1fr); }
  .mc-item { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
  .mc-thumb { width: 54px; height: 54px; }
  .mc-thumb img { width: 46px; height: 46px; }
  /* phones: a compact two-line row (~120px) — the thumbnail, name / sub-line and the one action, then ONE line:
     "Your price $34.00 ✎ · You get $32.30" (an auction: "Bid $20.20 · 1 bid · At least $19.19"; a sale: "Sold for
     $34.00 · Fee −$1.70 · You got +$32.30"). No Market cell. The ::before is the line break (order 2, a full row). */
  .ml-row, .ml-row.editing { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 10px 12px 12px; }
  .ml-row::before { content: ''; order: 2; flex-basis: 100%; }
  .ml-head { order: 0; flex: 1 1 0; }
  .ml-row .ml-main { gap: 1px; }
  .ml-row .ml-name { font-size: 13px; }
  .ml-act { order: 1; flex: none; }
  .ml-act .btn { flex: none; min-width: 0; height: 40px; padding: 0 14px; }
  .ml-row .ml-col { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border-radius: 0; background: none; }
  .ml-row .ml-col > span { display: contents; font-size: 12.5px; }
  .ml-lbl .l { display: none; }
  .ml-lbl .s { display: inline; }
  .ml-row .ml-mkt { display: none; }
  .ml-row .ml-price { order: 3; position: static; min-height: 40px; }
  .ml-row:not(.editing) .ml-price, .ml-row.is-auction:not(.editing) .ml-price { padding-right: 0; }
  .ml-row .ml-price > span i:not(.ml-nb) { display: none; } /* the ±% stays on wider rows */
  .ml-row .ml-price .ml-view { order: 1; }
  .ml-row .ml-price i.ml-nb { order: 2; }
  .ml-row .ml-recv { order: 4; min-height: 40px; }
  .ml-row .ml-recv::before, .ml-row.is-sold .ml-price::before { content: '·'; color: rgba(255, 255, 255, .35); }
  .ml-row .ml-col b, .ml-row .ml-view b { font-size: 13.5px; }
  .ml-row .ml-edit { position: static; margin: 0; }
  .ml-err { order: 5; flex-basis: 100%; }
  .ml-row.editing .ml-recv, .ml-row.editing .ml-price > span { display: none; }
  .ml-row.editing .ml-price { flex: 1 1 100%; }
  .ml-row.editing .ml-editor { flex: 1; gap: 6px; }
  .ml-row.is-sold .ml-mkt { display: flex; order: 3; }
  .ml-row.is-sold .ml-price { order: 4; min-height: 0; }
  .ml-row.is-sold .ml-recv { order: 5; min-height: 0; }
  .ml-row.is-sold .ml-col { margin-top: 8px; }
  .ml-row.is-skel .ml-col { flex: 1 1 30%; }
}
/* the narrowest phones: the price line stays one line ("$34.00 ✎ · You get $32.30"; the label goes) and the name
   column keeps its room (a smaller thumbnail) */
@media (max-width: 374px) {
  .ml-row:not(.is-auction):not(.is-sold) .ml-price > .ml-lbl { display: none; }
  .ml-row .ml-thumb { width: 42px; height: 42px; }
  .ml-row .ml-thumb img { width: 36px; height: 36px; }
  .ml-act .btn { padding: 0 12px; }
}

/* auctions: tablets and phones */
@media (max-width: 1000px) {
  /* My bids rows stack like the listing rows: head (with the state), three cells, the action */
  .bd-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "h h s" "c m e" "a a a"; gap: 10px; padding: 12px; align-items: stretch; }
  .bd-head { grid-area: h; }
  /* the state word sits at the head row's end (no label, no cell) */
  .bd-row .ml-col.bd-st { grid-area: s; display: flex; align-items: center; justify-content: flex-end; padding: 0 2px 0 0; background: none; }
  .bd-st > span { display: none; }
  .bd-row.is-skel .ml-col.bd-st .skel { display: block; width: 64px; height: 16px; }
  .bd-cur { grid-area: c; }
  .bd-max { grid-area: m; }
  .bd-end { grid-area: e; }
  .bd-row .ml-col { min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
  .bd-row .ml-col b { font-size: 13.5px; }
  .bd-act { grid-area: a; }
  .bd-act .btn { flex: 1; height: 40px; }
  .bd-head .ml-thumb, .bd-row.is-skel .ml-thumb { width: 48px; height: 48px; }
  .bd-head .ml-thumb img { width: 40px; height: 40px; }
  .bd-sk-c { height: 32px; }
  .bd-sk-btn { width: 100%; height: 40px; }
}
@media (max-width: 899px) {
  .mk-format button { height: 40px; }
  .mk-bid-row { height: 40px; }
  .mk-auto { width: 40px; }
  /* the card keeps Bid + Auto (≥ 40px each); the history is one tap away in the detail */
  .mk-hist { display: none; }
  .mk-detail.is-auction { grid-template-areas: "art" "info" "hist"; grid-template-rows: none; }
  .mk-detail.is-auction .mkd-info { padding-bottom: 14px; }
  /* only the idle buttons stick to the sheet's foot: a confirm or the auto bid field (keyboard up) sits in the flow,
     scrolled into view, instead of a tall sticky block covering the sheet */
  .mk-detail.is-auction .mkd-actions:not([data-at="idle"]) { position: relative; margin: 0; padding: 0; background: none; }
  .mk-detail.is-auction .mkd-actions:not([data-at="idle"])::before { content: none; }
  .mkd-hist { padding: 6px 16px calc(18px + env(safe-area-inset-bottom)); }
  .mkd-hrow, .mkd-hall { height: 40px; }
  .mkd-auc-top b { font-size: 18px; }
  .pp-fmt button, .pp-dur .csel-trigger { height: 40px; }
  .bd-seg button, .bd-held { height: 40px; }
  .bd-held { line-height: 40px; }
}
@media (max-width: 560px) {
  .mk-bid { gap: 3px; padding: 0 4px; font-size: 12px; }
  .mk-auc-row { font-size: 11px; }
  .bd-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .bd-seg { display: grid; width: 100%; }
  .bd-seg button { padding: 0 8px; }
  .bd-held { justify-content: space-between; }
  .bd-row { gap: 8px; }
  .bd-row .ml-col { padding: 8px; }
  .mkd-hrow { grid-template-columns: minmax(0, 1fr) 36px minmax(70px, auto) 30px; gap: 6px; padding: 0 8px; }
}
/* 320–360px: a pricing row's field and its −10% / Market / +10% picks don't fit one line (the picks were squeezed
   into each other): the picks go under the field, full width */
@media (max-width: 360px) {
  .mk-bid { gap: 2px; padding: 0 2px; letter-spacing: -.01em; } /* "Bid $999.99" fits a 140px card */
  .pp-price { flex-wrap: wrap; }
  .pp-input { flex: 1 1 100%; width: auto; }
  .pp-quick { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .mkd-btns .l-full { display: none; }
  .mkd-btns .l-short { display: inline; }
  .mkd-btns [data-step="idle"] { padding: 0 18px; }
}
/* a short phone (320×640): the open pricing sheet scrolls as one, so the item rows aren't an inner scroller squeezed
   to a sliver under the format, duration and quick-price rows */
@media (max-width: 899px) and (max-height: 760px) {
  .mk-pp.open .pp-sheet { overflow-y: auto; overscroll-behavior: contain; }
  .mk-pp.open .pp-rows { flex: none; overflow: visible; }
}

/* the listing as a bottom sheet: Buy now / Add to cart (stuck to its bottom) clear the home indicator */
@media (max-width: 640px) {
  .mkd-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* a phone held sideways (320-430px tall): the listing's art steps down so its name, price and buttons are on screen
   with it, not a scroll away. Its size follows the height left over for it (measured Oct 31 2026: the sheet's top,
   the name, the price row and the Buy bar with its fade take ~262px), so at 320-360px the price row clears the fade
   too — a flat 30dvh left it under the fade there */
@media (max-width: 899px) and (max-height: 500px) {
  .mkd-art-wrap { padding: 10px 20px 8px; }
  .mkd-art { width: clamp(60px, 100dvh - 270px, min(210px, 58vw)); }
}
/* a window that short: the cart scrolls as one, so its items aren't squeezed to a sliver between the head and the
   checkout foot */
@media (max-height: 500px) {
  .mk-cart { overflow-y: auto; overscroll-behavior: contain; }
  .mc-body { flex: none; min-height: auto; overflow: visible; }
  .mc-head { position: sticky; top: 0; z-index: 2; background: var(--surface-1); } /* its title and × stay on top */
}
@media (max-width: 899px), (pointer: coarse) {
  .mkd-3d-btn { min-height: 40px; }
}
/* phones: the 3D controls are wider than the picture and run along its bottom edge, where the game chip sits; the viewer only
   ever shows PS99 items, so the chip (it would say PS99) steps aside while the 3D viewer is up */
@media (max-width: 899px) {
  .mkd-art.is-3d-ready ~ .mkd-game { display: none; }
}
/* a phone held sideways: the model is the picture's size (the name, price and buttons stay on screen with it, as above)
   and its controls sit beside it rather than under it, where they took the height the name needed; the margin keeps
   the model and its controls centred together */
@media (max-width: 899px) and (max-height: 500px) {
  .mkd-art.is-3d-ready { margin-right: 216px; }
  .mkd-art.is-3d-ready .mkd-3d-stage { inset: 0; }
  .mkd-art.is-3d-ready .mkd-3d-tools { left: calc(100% + 12px); top: 50%; bottom: auto; transform: translateY(-50%); }
  .mkd-3d-btn { padding: 0 6px; font-size: 10.5px; }
  .has-3d-control .mkd-game { display: none; }
}
@media (min-width: 500px) and (max-width: 899px) and (max-height: 500px) {
  .mkd-view-control { top: 14px; max-width: 130px; }
  .mkd-view-status { text-align: left; }
  .has-3d-control .mkd-art-badges { top: 62px; }
}
/* touch screens wider than the phone layout (an iPad held sideways): the phones' 40px tap targets (rule 11) */
@media (pointer: coarse) and (min-width: 900px) {
  .mk-format button, .mk-facets .rrow, .reset-filters, .mk-add, .mk-own, .bd-seg button, .bd-held { height: 40px; }
  .mk-fg-head { min-height: 40px; padding-bottom: 2px; }
  .mc-clear { height: 40px; padding: 0 12px; }
}
/* a wide but short window (a big phone held sideways — 932x430 — or a laptop window made short): the two-column
   listing keeps its picture in view and centred while the details scroll, and Buy now / Add to cart stay stuck to the
   bottom of the details as on phones. The picture sat in the middle of a column taller than the window, half out of
   view, and the buttons started below the fold. (An auction's picture has its bid history under it: not pinned.) */
@media (min-width: 900px) and (max-height: 500px) {
  .mk-detail:not(.is-auction) { min-height: 0; }
  .mk-detail:not(.is-auction) .mkd-art-wrap { position: sticky; top: 0; align-self: start; padding: 20px 30px;
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); }
  .mkd-art { width: min(300px, 100%, 100dvh - 110px); }
  .mk-detail:not(.is-auction) .mkd-actions { position: sticky; bottom: 0; z-index: 4; margin: 0 -26px; padding: 12px 26px; background: var(--surface-1); }
  .mk-detail:not(.is-auction) .mkd-actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none; background: linear-gradient(180deg, rgba(14, 17, 24, 0), var(--surface-1)); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-page *, .mk-cart *, .mk-cart, .mk-cart-fab, .mk-detail *, .mk-success * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------------- five games (Oct 13: + BGSI, BGS)
   The game bar stays ONE calm row at every width: below 720px the listing counts go (the "Soon" tag stays); phones
   (<= 560px) share the row by content, labels only from 440px down (never an "Adopt…"); the narrowest phones tighten
   the padding. Every tab keeps >= 40px of width and height. A phone held sideways (up to 932px wide, 500px tall)
   counts as under 720px: its side insets (a notch) take up to 118px of the row, and the names were cut to "M…" beside
   their counts. */
@media (max-width: 719px), (max-width: 932px) and (max-height: 500px) {
  .mk-games .gt-n:not(.soon) { display: none; }
  /* a game that isn't live (app.css game states): its "Soon" / "Paused" capsule becomes a 6px dot with the counts */
  .mk-games { --gs-dot-w: 6px; --gs-dot-h: 6px; --gs-dot-pad: 0; --gs-dot-fs: 0; --gs-dot-bg: rgba(255, 255, 255, .42); --gs-dot-bg-on: #fff; --gs-dot-pos: absolute; --gs-dot-top: 6px; --gs-dot-right: 5px; }
}
@media (max-width: 560px) {
  .mk-games { display: flex; width: 100%; }
  .mk-games .gt { flex: 1 1 auto; min-width: 40px; padding: 0 8px; gap: 5px; }
  .mk-games .gt:not(.on) .gt-n.soon { display: none; }
}
@media (max-width: 440px) {
  .mk-games .gt img { display: none; }
}
@media (max-width: 359px) {
  .mk-games .gt { padding: 0 6px; font-size: 13px; }
}
/* no dollar rate for the game (market.js hasUsd): "Not valued" reads quiet; the price field takes the quick picks' room */
.mkd-facts > .is-wide { grid-column: 1 / -1; }
.mkd-nv { font-weight: 600; color: var(--muted); }
.pp-price.no-ref .pp-input { flex: 1 1 auto; width: auto; }
.pp-sub .mk-val { display: inline-flex; align-items: center; gap: 3px; vertical-align: -2px; color: rgba(255, 255, 255, .78); font-weight: 600; }
.pp-sub .mk-val .vicon { width: 11px; height: 11px; }