/* marketplace.css — the right-wing DexHero Marketplace (WoW Auction House).
 *
 * Mounted by app/ui/marketplace-rail.js into #lobby-wing-right. Reuses the
 * .dna__feed-rail chrome (frosted panel + drag handle + close — styled in
 * upgrades.css) and adds the auction-house furniture: a tab bar, a category
 * filter sidebar, a sortable column header, and a long scroll of listing rows.
 *
 * PROFESSIONAL POLISH PASS (tactile convex depth + jewel-set rarity):
 *  - The global --acc-cyan is NEVER redefined. A refined, desaturated
 *    teal-slate accent is scoped to .marketplace-rail (--mp-accent + an
 *    --mp-accent-rgb triplet so every tint/border/glow is tuned per surface)
 *    and used throughout, so the bright-cyan extremes are gone but the rail
 *    still reads as part of the dark lobby app.
 *  - Tasteful 3D depth: a convex, lit active tab + primary button, gently
 *    raised category buttons, recessed icon slots, rows that lift on hover,
 *    1px light/dark bevels and soft drop shadows — premium fintech/SaaS, not
 *    skeuomorphic kitsch.
 *  - Calmer spacing/rhythm, especially the left category sidebar.
 *  - The cheesy grey rarity LEFT BAR is removed. Common rows are unmarked.
 *    Rarity now reads from the icon ring (set inline by the JS) + the name
 *    tint (also inline) + a small, premium corner GEM on the higher tiers
 *    only — a pseudo-element, so it survives the inline icon/name styles.
 *
 * IMPLEMENTATION NOTES — verified against marketplace-rail.js + rarity.js:
 *  - _listingRow() sets, INLINE on every listing row:
 *      .mp-row__icon  style="...;box-shadow:inset 0 0 0 1.5px <rarityColor>"
 *      .mp-row__name  style="color:<rarityColor>"
 *    Inline styles win, so (a) we never put a box-shadow on .mp-row__icon
 *    (it would be clobbered) — icon depth is background+border ONLY; and
 *    (b) we do NOT write CSS .mp-row__name colour tints (they'd be dead).
 *  - .mp-row--live is ONLY on hero/flex rows; listing rows are always one of
 *    .mp-row--{common,uncommon,rare,epic,legendary}. The gem is scoped to
 *    .mp-row--listing so hero rows never get one.
 */

/* ── scoped, refined accent (does NOT touch global --acc-cyan / --ink-*) ──── */
.marketplace-rail {
    /* Pepsi-blue — same family as the DexHero creation popup
       (rgba(30, 64, 175, …) ≡ Tailwind blue-800). 3-stop gradient
       (top/main/bottom) keeps the convex active-tab depth. The rest of
       the app keeps the global --acc-cyan teal; only the rail flips blue. */
    --mp-accent:      #1e40af;
    --mp-accent-2:    #1e3a8a;   /* bottom stop — deepest, anchors the convex   */
    --mp-accent-top:  #3b82f6;   /* brighter top stop                           */
    --mp-accent-rgb:  30, 64, 175;                /* triplet for every rgba()   */
    --mp-accent-hi:   rgba(165, 195, 255, 0.78);  /* blue top-bevel highlight   */
    --mp-accent-hi-2: rgba(165, 195, 255, 0.24);  /* faint inner highlight      */
    --mp-accent-soft: rgba(var(--mp-accent-rgb), 0.16);   /* calm tint fills    */
    --mp-accent-line: rgba(var(--mp-accent-rgb), 0.52);   /* border / edge      */
    --mp-accent-glow: rgba(var(--mp-accent-rgb), 0.38);   /* restrained shadow  */
    --mp-ink-on:      #eaf6fb;   /* light text on the darker accent surface     */
    --mp-gold:        #ffd76a;   /* semantic "price" gold (kept)                */
    --mp-live:        #2bd47a;   /* semantic status green (kept)                */
}

/* ── header search (mirrors friends-rail__search) ───────────────────────── */
.mp-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.mp-search__ico {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4); pointer-events: none;
}
.mp-search__input {
    width: 100%; min-width: 0; padding: 7px 10px 7px 30px; border-radius: 9px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.44));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    color: var(--ink-0, #eaeef3); font: inherit; font-size: 11.5px;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}
.mp-search__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.mp-search__input:focus {
    outline: none; border-color: var(--mp-accent-line);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--mp-accent-soft);
}

/* ── tab bar (Auction House / Live / My Rig) ─────────────────────────────── */
.mp-tabs {
    flex: 0 0 auto; display: flex; gap: 5px; margin: 0 0 10px;
    padding: 3px; border-radius: 11px;
    background: rgba(0, 0, 0, 0.30); border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.40);   /* recessed trough */
}
.mp-tab {
    flex: 1 1 0; padding: 8px 6px; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--ink-2, #aeb6c0);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.mp-tab:hover {
    color: var(--ink-0, #eaeef3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mp-tab.is-active {
    color: var(--ink-0, #eaeef3);
    background: linear-gradient(180deg, rgba(var(--mp-accent-rgb), 0.20), rgba(var(--mp-accent-rgb), 0.10));
    border-color: var(--mp-accent-line);
    box-shadow:
        inset 0 1px 0 var(--mp-accent-hi-2),
        0 1px 3px rgba(0, 0, 0, 0.30);
}
.mp-tab.is-active:hover { color: var(--ink-0, #eaeef3); }
.mp-tab__pulse {
    width: 7px; height: 7px; border-radius: 50%; background: var(--mp-live);
    box-shadow: 0 0 8px rgba(43, 212, 122, 0.85); animation: mp-pulse 1.6s ease-in-out infinite;
}
@keyframes mp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── body: left category filter sidebar + main table (WoW-AH layout) ─────── */
.mp-body { flex: 1 1 0; min-height: 0; display: flex; gap: 10px; }
.mp-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* Left "Filter" sidebar — the AH category list, stacked vertically.
 * Wider + roomier so labels breathe and the rhythm is deliberate. */
.mp-cats {
    flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; gap: 6px;
    padding: 0 9px 0 0; border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.mp-cats::-webkit-scrollbar { display: none; }
.mp-cats[hidden] { display: none; }
.mp-cat .mp-tab__pulse { margin-left: auto; flex: 0 0 auto; }   /* live dot on the Lobbies category */
/* Categories render as vertical TABS — flat text rows, no pill box. Active row
 * is marked by an inset accent bar on the left edge + a brighter ink color +
 * a quiet tint behind. Hover is just a tint, no border. Reads as a pro tab
 * column, not a stack of buttons. */
.mp-cat {
    flex: 0 0 auto; width: 100%; min-height: 32px; text-align: left; cursor: pointer;
    display: flex; align-items: center;
    padding: 8px 12px; border-radius: 0; line-height: 1.25;
    background: transparent; border: 0;
    box-shadow: none;
    color: var(--ink-2, #aeb6c0); font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.mp-cat:hover {
    color: var(--ink-0, #eaeef3);
    background: rgba(255, 255, 255, 0.04);
}
.mp-cat.is-active {
    color: var(--ink-0, #eaeef3);
    background: rgba(var(--mp-accent-rgb), 0.10);
    /* Inset left accent bar — the canonical "vertical tab" active cue. */
    box-shadow: inset 2px 0 0 rgba(var(--mp-accent-rgb), 0.95);
}

/* ── sortable column header — grid-aligned to the listing-row columns below ── */
.mp-cols {
    flex: 0 0 auto; display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 68px;   /* matches .mp-row--listing */
    align-items: center; column-gap: 10px;
    margin: 0 0 6px; padding: 0 12px 7px;   /* 12px matches the row padding so columns line up */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);   /* 1px bevel under divider */
}
.mp-cols[hidden] { display: none; }
.mp-col {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: rgba(255, 255, 255, 0.55); font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 0; display: inline-flex; align-items: center; gap: 3px;
    transition: color 130ms ease;
}
.mp-col--hot  { justify-self: center; }
.mp-col--name { justify-self: start; }
.mp-col--ppu  { justify-self: end; }
.mp-col:hover { color: var(--ink-1, #d6dbe2); }
.mp-col.is-active { color: var(--mp-accent-top); }
.mp-col__arrow { font-size: 8px; }

/* ── listing rows ───────────────────────────────────────────────────────── */
.marketplace-rail__scroll { gap: 4px !important; padding: 3px 0 4px; }
.mp-rows { display: flex; flex-direction: column; gap: 4px; }

.mp-row {
    position: relative;
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 12px;
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 1px solid transparent;   /* grey rarity bar REMOVED */
    border-radius: 10px; color: var(--ink-1, #d6dbe2); text-align: left; cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 90ms ease;
}
.mp-row:hover {
    background: linear-gradient(180deg, var(--mp-accent-soft), rgba(var(--mp-accent-rgb), 0.05));
    border-color: var(--mp-accent-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px -4px rgba(0, 0, 0, 0.50);
    transform: translateY(-1px);
}
.mp-row:active { transform: translateY(0) scale(0.995); }

/* Listing rows are grid-aligned to the column header above (icon · item · price).
 * Hero/live rows keep the simpler flex layout. */
.mp-row--listing {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 68px;   /* roomier: 52px icon col + wider price col */
    align-items: center; gap: 0 10px;   /* matches .mp-cols column-gap so header + rows align */
}

/* ── Rarity cue — REPLACES the cheesy grey left bar. ───────────────────────
 * Primary cue is the icon ring + name tint, both injected INLINE by the JS
 * (so we never restate them in CSS — that would be dead). Here we add a small,
 * premium corner GEM in the icon cell for the higher tiers. The gem is a
 * pseudo-element, so it is never clobbered by the inline icon box-shadow.
 * COMMON gets NOTHING — clean row, no stripe, no gem. Live = hero rows only,
 * never combined with .mp-row--listing, so no listing gem appears on them. */
.mp-row--uncommon  { --mp-gem: #3ad900; }   /* desaturated from neon #1eff00 to match the other tiers */
.mp-row--rare      { --mp-gem: #2f8fe6; }   /* slightly softened from #0070dd */
.mp-row--epic      { --mp-gem: #b25cf0; }   /* slightly softened from #a335ee */
.mp-row--legendary { --mp-gem: #ff9d33; }   /* slightly softened from #ff8000 */

/* The gem itself — anchored over the icon's top-left corner. A 6px jewel with
 * a bright specular highlight, a soft tier-toned halo and a dark seat, so it
 * reads as a set stone, not a sticker. */
.mp-row--listing.mp-row--uncommon::before,
.mp-row--listing.mp-row--rare::before,
.mp-row--listing.mp-row--epic::before,
.mp-row--listing.mp-row--legendary::before {
    content: ''; position: absolute; top: 9px; left: 14px;
    width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 3;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), var(--mp-gem) 60%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        0 0 6px color-mix(in srgb, var(--mp-gem) 70%, transparent);
}

/* Legendary rows keep a slow, tamed diagonal glint — the lone "this is rare"
 * flourish — plus a whisper-faint warm wash behind the row content. */
.mp-row--legendary {
    overflow: hidden;
    background: linear-gradient(90deg, transparent 48%, rgba(255, 128, 0, 0.06));
}
.mp-row--legendary::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent 34%, rgba(255, 157, 51, 0.10) 50%, transparent 66%);
    transform: translateX(-130%); animation: mp-glint 6s ease-in-out infinite;
}
@keyframes mp-glint { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* Live rows (hero/flex): subtle status-green presence wash. */
.mp-row--live {
    background: linear-gradient(90deg, rgba(43, 212, 122, 0.05), transparent 55%);
}

/* Auctions about to end get an urgent, pulsing countdown. */
.mp-row__lvl--clock.is-urgent { color: #ff5b5b; animation: mp-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .mp-row--legendary::after { animation: none; display: none; }
    .mp-row__lvl--clock.is-urgent { animation: none; }
    .mp-tab__pulse { animation: none; }
    .mp-row { transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
    .mp-row:hover { transform: none; }
    .mp-row:active { transform: none; }
}

.mp-row__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.mp-row__dot--live { background: var(--mp-live); box-shadow: 0 0 8px rgba(43, 212, 122, 0.8); }
.mp-row__dot--idle { background: rgba(255, 255, 255, 0.2); }

/* Icon slot — borderless, larger. The previous rarity ring (inline box-shadow
 * set by the JS) and the 1px CSS edge are BOTH removed per design: cleaner
 * portrait read, no frame. Rarity is still cued by the corner gem (::before)
 * on uncommon+ rows and by the inline name-colour tint. The inline
 * `background-image:url()` overrides the dark slot gradient for image icons;
 * fallback letter icons still show the tile + inline letter colour. */
.mp-row__icon {
    position: relative;                  /* anchors the live-dot corner badge + gem */
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px;
    background:
        radial-gradient(120% 130% at 50% 0%, #151c26 0%, #0a0e14 72%),
        #0c1016;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 17px; font-weight: 700;
    color: var(--ink-2, #aeb6c0); border: 0;
}
/* In a listing row the live dot sits on the icon's corner (no column shift). */
.mp-row__icon .mp-row__dot {
    position: absolute; top: -2px; right: -2px; width: 9px; height: 9px;
    border: 2px solid #0a0e14; box-shadow: 0 0 6px rgba(43, 212, 122, 0.7); z-index: 2;
}
.mp-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* NOTE: .mp-row__name colour is set INLINE per-row by the JS (the rarity tint,
 * incl. common's muted grey). We deliberately do NOT set a colour here — it
 * would be dead. We only style weight/size/overflow. */
.mp-row__name {
    font-size: 14px; font-weight: 600; color: var(--ink-0, #eaeef3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-row__meta {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Price cell (grid col 3): price with Lvl / time-left stacked beneath it,
 * right-aligned — the AH's right-hand cluster. */
.mp-row__num {
    grid-column: 3; justify-self: end;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    min-width: 0; max-width: 100%;
}
.mp-row__price {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 13px; font-weight: 700; color: var(--mp-gold);   /* "gold" price */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mp-row__lvl {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px; color: rgba(255, 255, 255, 0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Hero/live rows (flex) keep a trailing chevron action hint. */
.mp-row__cta {
    flex: 0 0 auto; font-size: 14px; font-weight: 700; line-height: 1;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.6; transition: color 130ms ease, opacity 130ms ease, transform 130ms ease;
}
.mp-row:hover .mp-row__cta { opacity: 1; color: var(--mp-accent-top); transform: translateX(1px); }
@media (hover: none) { .mp-row__cta { opacity: 1; } }

/* ── empty / loading / footer ───────────────────────────────────────────── */
.mp-loading, .mp-foot {
    padding: 12px 8px; text-align: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px; color: rgba(255, 255, 255, 0.55);
}
.mp-foot { padding: 14px 8px 18px; font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.mp-sentinel { height: 1px; }
.mp-empty {
    display: flex; flex-direction: column; gap: 5px; margin: 6px 2px;
    padding: 18px 14px; border-radius: 11px; text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px dashed rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mp-empty__title { font-size: 12.5px; font-weight: 600; color: var(--ink-2, #aeb6c0); }
.mp-empty__sub {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.mp-btn {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding: 8px 12px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 600;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.30);
    color: var(--ink-1, #d6dbe2);
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.mp-btn:hover {
    border-color: var(--mp-accent-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.35);
}
.mp-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.mp-btn--primary {
    color: var(--mp-ink-on); border-color: var(--mp-accent-line);
    background: linear-gradient(180deg, var(--mp-accent-top) 0%, var(--mp-accent) 46%, var(--mp-accent-2) 100%);
    box-shadow:
        inset 0 1px 0 var(--mp-accent-hi),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        0 2px 8px -2px var(--mp-accent-glow),
        0 1px 2px rgba(0, 0, 0, 0.40);
}
.mp-btn--primary:hover {
    box-shadow:
        inset 0 1px 0 var(--mp-accent-hi),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        0 4px 12px -2px var(--mp-accent-glow),
        0 1px 2px rgba(0, 0, 0, 0.40);
}
.mp-btn--sm { padding: 5px 9px; font-size: 10.5px; }

/* ── My Rig (rate card + leases) ───────────────────────────────────────────── */
.mp-mine { display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.mp-mine__title {
    margin-top: 6px; font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-2, #aeb6c0);
}
.mp-mine__card {
    display: flex; flex-direction: column; gap: 9px; padding: 13px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.28);
}
.mp-mine__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-2, #aeb6c0); }
.mp-mine__field span { flex: 0 0 auto; }
.mp-mine__field input {
    flex: 1 1 auto; min-width: 0; max-width: 120px; text-align: right;
    padding: 6px 9px; border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.44));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    color: var(--ink-0, #eaeef3); font: inherit; font-size: 12px;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}
.mp-mine__field input:focus {
    outline: none; border-color: var(--mp-accent-line);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--mp-accent-soft);
}
.mp-mine__field select {
    flex: 1 1 auto; min-width: 0; max-width: 130px; padding: 6px 9px; border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.44));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    color: var(--ink-0, #eaeef3); font: inherit; font-size: 12px;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}
.mp-mine__field select:focus {
    outline: none; border-color: var(--mp-accent-line);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--mp-accent-soft);
}
.mp-btn--buy {
    margin-top: 2px; width: 100%; text-align: center; color: var(--mp-gold);
    border-color: rgba(255, 215, 106, 0.40);
    background: linear-gradient(180deg, rgba(255, 215, 106, 0.12), rgba(255, 215, 106, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.18), 0 1px 2px rgba(0, 0, 0, 0.30);
}
.mp-btn--buy:hover {
    border-color: rgba(255, 215, 106, 0.80);
    box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.22), 0 2px 8px -2px rgba(255, 215, 106, 0.28);
}
.mp-row__lvl--clock { color: #ff9a52; }
.mp-mine__check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2, #aeb6c0); cursor: pointer; }
.mp-mine__check input { accent-color: var(--mp-accent); }
.mp-mine__actions { display: flex; justify-content: center; padding: 10px; }
.mp-mine__leases { display: flex; flex-direction: column; gap: 6px; }
.mp-mine__lease {
    display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 11px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── rent / bid modal (overlays the rail) ──────────────────────────────────── */
.mp-modal {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(4, 8, 12, 0.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    border-radius: 14px;
}
.mp-modal__card {
    width: 100%; max-width: 290px; display: flex; flex-direction: column; gap: 10px; padding: 17px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 27, 36, 0.98), rgba(13, 18, 25, 0.98));
    border: 1px solid var(--mp-accent-line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.30);
}
.mp-modal__title { font-size: 15px; font-weight: 700; color: var(--ink-0, #eaeef3); }
.mp-modal__meta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.mp-modal__cost { font-size: 13px; color: var(--ink-1, #d6dbe2); }
.mp-modal__cost strong { color: var(--mp-gold); }
.mp-modal__row { display: flex; gap: 8px; margin-top: 2px; }
.mp-modal__row .mp-btn { flex: 1 1 0; text-align: center; }
.mp-modal__note { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }

/* ── full-width mobile rail: keep depth subtle, give rows + sidebar room ──── */
@media (max-width: 640px) {
    .mp-body { gap: 12px; }
    .mp-cats { width: 108px; }
    .mp-cat { min-height: 34px; padding: 9px 10px; font-size: 11px; }
    .mp-row { padding: 9px 10px; }
    .mp-row:hover { transform: none; }   /* no lift on touch */
}

/* ── Full-size stacked lobby cards (resurrected truffle "now live" feed) ─────
 * Scoped to .marketplace-rail + the live-feed scroll state (.marketplace-rail__
 * scroll--live, toggled by renderBrowse() on the Lobbies category), so the dense
 * catalog .mp-row rows and the Sell/Equipped panes are never touched. Big image-
 * forward cards, one DexHero per card, site dark/cyan theme via the rail's scoped
 * --mp-* accent (no global --acc-cyan, no WoW colours). Narrow 320px rail +
 * full-width mobile safe. Per-card font-smoothing/translateZ snap glyphs to the
 * pixel grid as a band-aid for the blurred/transformed parent rail (the real fix
 * lives in right-wing-resize.js + upgrades.css). */

/* Live feed gets breathing room (catalog rows keep their 4px gap). */
.marketplace-rail .marketplace-rail__scroll--live { gap: 12px !important; padding: 4px 0 8px; }
.marketplace-rail .marketplace-rail__scroll--live .mp-rows { gap: 12px; }

.marketplace-rail .mp-lobby-card {
    position: relative; display: flex; flex-direction: column; width: 100%;
    appearance: none; -webkit-appearance: none; text-align: left; cursor: pointer;
    padding: 0; overflow: hidden; border-radius: 14px;
    background: #0c1016; color: var(--ink-0, #eaeef3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.40);
    /* Snap text to the pixel grid even on the blurred/transformed parent rail. */
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    transition: border-color 140ms ease, box-shadow 160ms ease, transform 140ms ease;
}
.marketplace-rail .mp-lobby-card:hover {
    transform: translateY(-2px);
    border-color: var(--mp-accent-line, rgba(30, 64, 175, 0.52));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 26px -6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(var(--mp-accent-rgb), 0.30);
}
.marketplace-rail .mp-lobby-card:active { transform: translateY(0) scale(0.992); }
/* Keyboard focus ring (grafted from the media design — the hero design lacked one). */
.marketplace-rail .mp-lobby-card:focus-visible {
    outline: none;
    border-color: var(--mp-accent-top, #3b82f6);
    box-shadow:
        0 0 0 3px var(--mp-accent-soft, rgba(30, 64, 175, 0.16)),
        0 10px 26px -6px rgba(0, 0, 0, 0.55);
}
.marketplace-rail .mp-lobby-card.is-live {
    border-color: rgba(var(--mp-accent-rgb), 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 16px -2px var(--mp-accent-glow, rgba(30, 64, 175, 0.38));
}

/* Cinematic 16:9 media area — the hero image fills it; scrim + overlay sit on top. */
.marketplace-rail .mp-lobby-card__media {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 9; background: #0a0e14; overflow: hidden;
}
.marketplace-rail .mp-lobby-card__img {
    position: absolute; inset: 0;
    background: #0c1016 center / cover no-repeat;
    transform: translateZ(0);          /* own layer -> no half-pixel image blur */
    transition: transform 320ms ease;
}
.marketplace-rail .mp-lobby-card:hover .mp-lobby-card__img { transform: scale(1.04); }
.marketplace-rail .mp-lobby-card__img--fb {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 42px; font-weight: 700; color: rgba(255, 255, 255, 0.32);
    background:
        radial-gradient(130% 120% at 50% 0%, #182230 0%, #0a0e14 70%), #0c1016;
}
.marketplace-rail .mp-lobby-card__scrim {
    position: absolute; left: 0; right: 0; bottom: 0; top: 38%; z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 8, 12, 0.92));
}

/* Live / player-count badge, top-left (the old CHAT badge slot). */
.marketplace-rail .mp-lobby-card__badge {
    position: absolute; top: 9px; left: 9px; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px; border-radius: 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--mp-ink-on, #04141a);
    background: linear-gradient(180deg, var(--mp-accent-top, #3b82f6), var(--mp-accent, #1e40af));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    text-rendering: optimizeLegibility;
}
.marketplace-rail .mp-lobby-card__badge--live {
    color: #04140c;
    background: linear-gradient(180deg, #46e08c, var(--mp-live, #2bd47a));
    box-shadow: 0 0 12px -1px rgba(43, 212, 122, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
}
.marketplace-rail .mp-lobby-card__badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #04140c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
    animation: mp-pulse 1.5s ease-in-out infinite;   /* reuses marketplace.css keyframe */
}

/* Name + count overlaid on the scrim, bottom-left of the media. */
.marketplace-rail .mp-lobby-card__overlay {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px 11px; pointer-events: none;
}
.marketplace-rail .mp-lobby-card__name {
    font-size: 15px; font-weight: 700; line-height: 1.15; color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    text-rendering: optimizeLegibility;
}
.marketplace-rail .mp-lobby-card__meta {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Footer Enter CTA bar — full width, accent-tinted, animates on hover. */
.marketplace-rail .mp-lobby-card__cta {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    background: linear-gradient(180deg, rgba(var(--mp-accent-rgb), 0.14), rgba(var(--mp-accent-rgb), 0.05));
    border-top: 1px solid rgba(var(--mp-accent-rgb), 0.28);
    transition: background 150ms ease;
}
.marketplace-rail .mp-lobby-card:hover .mp-lobby-card__cta {
    background: linear-gradient(180deg, rgba(var(--mp-accent-rgb), 0.26), rgba(var(--mp-accent-rgb), 0.12));
}
.marketplace-rail .mp-lobby-card__cta-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--mp-accent-top, #3b82f6);
    text-rendering: optimizeLegibility;
}
.marketplace-rail .mp-lobby-card__cta-arrow {
    font-size: 14px; font-weight: 700; line-height: 1;
    color: var(--mp-accent-top, #3b82f6);
    transition: transform 150ms ease;
}
.marketplace-rail .mp-lobby-card:hover .mp-lobby-card__cta-arrow { transform: translateX(3px); }

/* Full-width mobile rail: a touch larger type, no hover lift / zoom. */
@media (max-width: 640px) {
    .marketplace-rail .mp-lobby-card__name { font-size: 16px; }
    .marketplace-rail .mp-lobby-card__meta { font-size: 11px; }
}
@media (hover: none) {
    .marketplace-rail .mp-lobby-card:hover { transform: none; }
    .marketplace-rail .mp-lobby-card:hover .mp-lobby-card__img { transform: none; }
}

/* Reduced motion: kill the live pulse, the image zoom, the lift. */
@media (prefers-reduced-motion: reduce) {
    .marketplace-rail .mp-lobby-card,
    .marketplace-rail .mp-lobby-card__img,
    .marketplace-rail .mp-lobby-card__cta-arrow { transition: none; }
    .marketplace-rail .mp-lobby-card:hover { transform: none; }
    .marketplace-rail .mp-lobby-card:hover .mp-lobby-card__img { transform: none; }
    .marketplace-rail .mp-lobby-card__badge-dot { animation: none; }
}