/* Market layout. Load after the component's legacy styles. */
.fm {
  --surface: #13161b;
  --surface2: #1c2027;
  --border: #2a2e36;
  --border-s: #3b424e;
  --accent: #d43d49;
  --accent2: #b8323d;
  --text: #f1f2f4;
  --muted: #a8aeb9;
  --dim: #8d95a2;
  --green: #88b99d;
  --green-soft: rgba(112, 162, 134, .09);
  --gold: #cdb574;
  --rad: 11px;
  --rad-sm: 7px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 0 5rem;
  background: var(--tw-page-surface, #090b0e);
  color: var(--text);
}

.fm,
.fm *,
.fm *::before,
.fm *::after { box-sizing: border-box; }

.fm[hidden],
.fm [hidden] { display: none !important; }

.fm :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #ed99a1;
  outline-offset: 3px;
}

.fm button,
.fm input,
.fm select { font-family: inherit; }

.fm button:disabled { cursor: not-allowed; }

/* The supplied artwork belongs to the introduction, above the solid catalog. */
.fm .fm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--tw-page-surface, #090b0e);
}

.fm .fm-hero-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.fm .fm-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.fm .fm-hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,11,14,.28), rgba(9,11,14,.1) 48%, rgba(9,11,14,.25) 75%, #090b0e 100%);
}

.fm .fm-hero-inner,
.fm .fm-catalog {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding-inline: 1.75rem;
}

.fm .fm-hero-inner {
  position: relative;
  min-height: clamp(420px, 38vw, 740px);
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.fm .fm-catalog {
  background: var(--tw-page-surface, #090b0e);
  scroll-margin-top: calc(var(--nav-h, 64px) + 1rem);
}

/* Page title and wallet */
.fm .fm-page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.25rem;
}

.fm .fm-header {
  flex: none;
  min-width: 0;
  max-width: 660px;
  padding: 0;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

.fm .fm-header .fm-header-brand {
  margin: 0 0 .55rem;
  color: #b4bdcd;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.fm .fm-header h1 {
  margin: 0 0 .45rem;
  color: var(--text);
  font-size: clamp(1.8rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.fm .fm-header p {
  max-width: 660px;
  color: #c3c8d1;
  font-size: .87rem;
  line-height: 1.6;
}

.fm .fm-balance-bar {
  flex: 0 0 auto;
  width: 340px;
  max-width: 340px;
  min-width: 0;
  margin: 0;
  padding: .95rem 1rem;
  gap: 1rem;
  flex-wrap: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad);
  box-shadow: none;
}

.fm .fm-hero .fm-balance-bar,
.fm .fm-hero #fm-purchases .fm-purchased {
  background: rgba(19,22,27,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fm .fm-hero #fm-purchases .fm-purchased { margin-bottom: 0; }

.fm .fm-balance-left { min-width: 0; gap: .15rem; }
.fm .fm-balance-lbl { color: var(--muted); font-size: .65rem; font-weight: 500; }
.fm .fm-balance-amt { color: var(--text); font-size: 1.45rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }

.fm .fm-topup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: .55rem .9rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.fm .fm-topup-btn:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* Saved accounts use the same charcoal/red palette in both disclosure states. */
.fm #fm-purchases .fm-purchased { background: var(--surface); border-color: #4d2d35; box-shadow: none; }
.fm #fm-purchases .fm-purchased h3 { color: #e58b94; }
.fm #fm-purchases .fm-acct-row { background: var(--surface2); border-color: var(--border); color: var(--text); }
.fm #fm-purchases .fm-acct-row:hover { border-color: #78404a; }
.fm #fm-purchases .fm-acct-row-head { background: transparent; }
.fm #fm-purchases .fm-acct-title { color: var(--text); }
.fm #fm-purchases .fm-acct-date,
.fm #fm-purchases .fm-acct-chevron { color: var(--muted); }
.fm #fm-purchases .fm-acct-row:hover .fm-acct-chevron { color: #e58b94; }
.fm #fm-purchases .fm-acct-creds { background: transparent; border-top-color: var(--border); }
.fm #fm-purchases .fm-cred-row { background: var(--surface); }
.fm #fm-purchases .fm-cred-lbl { color: var(--muted); }
.fm #fm-purchases .fm-cred-val { color: var(--text); }
.fm #fm-purchases .fm-copy-btn { background: #302025; border-color: #65404a; color: #e9b2b9; }
.fm #fm-purchases .fm-copy-btn:hover,
.fm #fm-purchases .fm-copy-btn:focus-visible { background: #41252e; border-color: var(--accent); color: #fff; }
.fm #fm-purchases .fm-purchased-note { color: var(--muted); }

/* Real category links form a single rail. */
.fm .fm-cat-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: .5rem;
  width: 100%;
  max-width: none;
  margin: 0 0 1.4rem;
  padding: 3px 0 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-s) transparent;
}

.fm .fm-cat-bar::-webkit-scrollbar { height: 4px; }
.fm .fm-cat-bar::-webkit-scrollbar-thumb { background: var(--border-s); border-radius: 4px; }

.fm .fm-cat-btn {
  position: relative;
  flex: 1 0 125px;
  min-width: 125px;
  min-height: 58px;
  height: 58px;
  gap: .55rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

.fm .fm-cat-btn img {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  object-fit: contain;
  background: transparent;
  filter: none;
}

.fm .fm-cat-btn span { line-height: 1.2; }
.fm .fm-cat-btn:focus-visible { outline-offset: -3px; }
.fm .fm-cat-btn:hover { background: var(--surface2); border-color: var(--border-s); color: var(--text); box-shadow: none; transform: none; }
.fm .fm-cat-btn.active,
.fm .fm-cat-btn[aria-current="page"] { background: #22181d; border-color: #78404a; color: var(--text); box-shadow: none; transform: none; }
.fm .fm-cat-btn.active::after,
.fm .fm-cat-btn[aria-current="page"]::after { content: ""; position: absolute; inset: auto .75rem 0; height: 2px; background: var(--accent); }

/* Search, filters and result controls. Inline display continues to control panels. */
.fm .fm-toolbar { width: 100%; max-width: none; margin: 0 0 1rem; gap: .8rem; }
.fm .fm-toolbar-row { min-width: 0; flex-wrap: nowrap; gap: .85rem; }
.fm .fm-filters { gap: .5rem; min-width: 0; }
.fm .fm-search-wrap { flex: 1 1 280px; min-width: 160px; }
.fm .fm-search-wrap svg { color: var(--dim); }
.fm .fm-search,
.fm .fm-price-input,
.fm .fm-filter-select,
.fm .fm-sort {
  height: 42px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  color: var(--text);
  font-size: .82rem;
  box-shadow: none;
}

.fm .fm-search { padding-left: 2.1rem; }
.fm .fm-price-input { width: 94px; min-width: 0; }
.fm .fm-filter-num { width: 128px; }
.fm .fm-search::placeholder,
.fm .fm-price-input::placeholder { color: var(--dim); opacity: 1; }
.fm .fm-sort { flex: 0 1 210px; min-width: 0; margin-left: auto; }
.fm .fm-sort option,
.fm .fm-filter-select option { background: var(--surface2); color: var(--text); }
.fm .fm-total { min-width: 0; margin-right: auto; color: var(--muted); font-size: .8rem; }
.fm .fm-total strong { color: var(--text); font-weight: 600; }

.fm .fm-search-btn,
.fm .fm-filter-btn,
.fm .fm-filter-reset {
  min-height: 42px;
  padding: .55rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

.fm .fm-search-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.fm .fm-search-btn:hover { background: var(--accent2); border-color: var(--accent2); }
.fm .fm-filter-btn { background: var(--surface); color: var(--text); }
.fm .fm-filter-btn:hover,
.fm .fm-filter-btn[aria-expanded="true"] { border-color: #78404a; background: #22181d; color: var(--text); }
.fm .fm-filter-reset { background: transparent; border-color: transparent; color: var(--muted); white-space: nowrap; }
.fm .fm-filter-reset:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.fm .fm-filters-panel { gap: .6rem; padding: .85rem; background: var(--surface); border-color: var(--border); }
.fm .fm-filter-select { flex: 1 1 168px; min-width: 150px; background: var(--surface2); }
.fm .fm-filter-check { color: var(--muted); font-size: .77rem; }
.fm .fm-filter-check input { accent-color: var(--accent); }
.fm .fm-stats { justify-content: flex-start; gap: .5rem; margin: 0 0 1rem; }
.fm .fm-stat-pill { padding: .35rem .65rem; border-radius: 6px; background: var(--surface); font-size: .75rem; }
.fm .fm-stat-pill strong { color: var(--text); font-weight: 600; }

/* Account cards and actual listing media */
.fm .fm-grid { width: 100%; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fm .fm-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: none; transition: border-color .15s; }
.fm .fm-card:hover { border-color: var(--border-s); box-shadow: none; transform: none; }
.fm .fm-card-preview,
.fm .fm-card-preview.fm-card-preview-generic { position: relative; aspect-ratio: 3 / 2; min-width: 0; overflow: hidden; background: #171c23; border: 0; border-bottom: 1px solid var(--border); }
.fm .fm-cat-preview-icon { filter: none; }

.fm .fm-card-preview-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 3px;
}

.fm .fm-card-preview-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.fm .fm-card-preview-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.fm .fm-card-preview-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.fm .fm-card-preview-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.fm .fm-card-preview-grid[data-count="5"],
.fm .fm-card-preview-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.fm .fm-card-preview-grid[data-count="5"] > :first-child { grid-row: 1 / span 2; }

.fm .fm-skin-tile,
.fm .fm-media-tile { position: relative; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 4px; background: #1c222b; }
.fm .fm-skin-tile img,
.fm .fm-media-tile img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.fm .fm-media-tile--inventory img { object-fit: contain; padding-bottom: 1.35rem; }

.fm .fm-skin-name,
.fm .fm-media-name {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: block;
  padding: .65rem .35rem .3rem;
  background: linear-gradient(to top, rgba(7, 9, 12, .94), rgba(7, 9, 12, .68) 58%, transparent);
  color: #f1f2f4;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

.fm .fm-media-count { position: absolute; top: .45rem; right: .45rem; z-index: 4; padding: .25rem .4rem; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; background: rgba(11,14,19,.88); color: #f1f2f4; font-size: .62rem; font-weight: 600; line-height: 1.2; }
.fm .fm-card-preview .fm-media-context { position: absolute; top: 10px; left: 10px; z-index: 4; max-width: calc(100% - 20px); padding: .35rem .5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; background: rgba(11,14,19,.9); color: var(--muted); font-size: .65rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; pointer-events: none; }
.fm .fm-media-missing { background: #171c23; }
.fm .fm-media-missing::before { content: "Image unavailable"; position: absolute; inset: 0; display: grid; place-items: center; padding: .6rem .5rem 2rem; color: var(--dim); font-size: .64rem; line-height: 1.4; text-align: center; }
.fm .fm-media-missing img { display: none; }

.fm .fm-media-summary,
.fm .fm-card-preview-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; gap: .5rem; padding: 1.3rem; background: #171c23; color: var(--muted); text-align: center; }
.fm .fm-media-summary img,
.fm .fm-media-summary > svg { flex: 0 0 auto; width: 58px; height: 58px; object-fit: contain; filter: none; }
.fm .fm-media-summary strong { color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.fm .fm-media-summary > span { max-width: 100%; color: var(--muted); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.fm .fm-media-summary small { max-width: 100%; color: var(--dim); font-size: .68rem; line-height: 1.5; }
.fm .fm-card-preview-overlay { background: rgba(0,0,0,.24); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Public inventory metadata supplies rarity colors. Unrated items keep the
   game's subdued accent; a missing picture never erases the item's identity. */
.fm .fm-media-tile--inventory {
  --fm-item-accent: #637383;
  --fm-item-tint: #63738340;
  --fm-item-shade: #63738316;
  background: linear-gradient(145deg, var(--fm-item-tint), var(--fm-item-shade) 65%), #141a21;
  box-shadow: inset 0 -3px 0 var(--fm-item-accent);
}
.fm .fm-media-tile--inventory[data-media-app="252490"] { --fm-item-accent:#a57759; --fm-item-tint:#a5775982; --fm-item-shade:#7c4f3336; }
.fm .fm-media-tile--inventory img { padding: .4rem .45rem 1.65rem; filter: drop-shadow(0 8px 9px rgba(0,0,0,.28)); }
.fm .fm-media-tile--rarity { border-bottom-color: var(--fm-item-accent); }
.fm .fm-media-name { padding-bottom: .4rem; }
.fm .fm-media-rarity { position:absolute; top:.45rem; left:.45rem; z-index:3; max-width:calc(100% - .9rem); padding:.22rem .35rem; border-radius:3px; background:rgba(8,12,17,.7); color:#f4f5f7; font-size:.55rem; font-weight:500; line-height:1.3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fm .fm-card-preview .fm-media-rarity { display:none; }
.fm .fm-card-preview-overlay { inset:0; max-width:none; padding:1rem; border:0; border-radius:0; background:#090e161f; color:#fff; font-size:.8rem; font-weight:600; text-shadow:0 2px 8px #000; pointer-events:none; }
.fm .fm-card-preview-overlay > span { padding:.5rem .75rem; border:1px solid #ffffff24; border-radius:5px; background:#10151eaa; }
.fm .fm-card:focus-visible .fm-card-preview-overlay { opacity:1; }
.fm .fm-card-preview .fm-media-tile > img,
.fm .fm-card-preview .fm-media-tile > canvas,
.fm .fm-card-preview .fm-skin-tile > img,
.fm .fm-card-preview .fm-profile-portrait > img,
.fm .fm-card-preview .fm-profile-portrait > canvas,
.fm .fm-card-preview .fm-cape-fallback > svg { transition:filter .15s ease; }
.fm .fm-card:focus-visible .fm-card-preview .fm-media-tile > img,
.fm .fm-card:focus-visible .fm-card-preview .fm-media-tile > canvas,
.fm .fm-card:focus-visible .fm-card-preview .fm-skin-tile > img,
.fm .fm-card:focus-visible .fm-card-preview .fm-profile-portrait > img,
.fm .fm-card:focus-visible .fm-card-preview .fm-profile-portrait > canvas,
.fm .fm-card:focus-visible .fm-card-preview .fm-cape-fallback > svg { filter:blur(2px) brightness(.85); }
@media (hover:hover) {
  .fm .fm-card:hover .fm-card-preview .fm-media-tile > img,
  .fm .fm-card:hover .fm-card-preview .fm-media-tile > canvas,
  .fm .fm-card:hover .fm-card-preview .fm-skin-tile > img,
  .fm .fm-card:hover .fm-card-preview .fm-profile-portrait > img,
  .fm .fm-card:hover .fm-card-preview .fm-profile-portrait > canvas,
  .fm .fm-card:hover .fm-card-preview .fm-cape-fallback > svg { filter:blur(2px) brightness(.85); }
}
@media (hover:none) {
  .fm .fm-card-preview-overlay { opacity:1; background:transparent; font-size:.7rem; }
  .fm .fm-card-preview-overlay > span { padding:.4rem .6rem; background:#10151ec4; }
}

/* Larger game-specific profile displays use the same 3:2 card space as the
   Fortnite and Steam inventory previews. All artwork belongs to the listing. */
.fm .fm-profile-preview { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.35fr); grid-template-rows:auto minmax(0, 1fr); gap:.65rem .8rem; align-content:stretch; align-items:stretch; height:100%; padding:.8rem; background:#192431; }
.fm .fm-profile-preview .fm-profile-head { display:contents; }
.fm .fm-profile-preview .fm-profile-portrait { grid-column:1; grid-row:1 / span 2; align-self:stretch; width:100%; height:100%; min-height:0; border:1px solid #ffffff13; border-radius:6px; background:#0c14235c; }
.fm .fm-profile-preview .fm-profile-identity { grid-column:2; grid-row:1; align-self:center; padding:.25rem 0; }
.fm .fm-profile-preview .fm-profile-identity small { margin-bottom:.2rem; color:#bac7d3; font-size:.59rem; line-height:1.35; }
.fm .fm-profile-preview .fm-profile-identity strong { color:#fff; font-size:1.05rem; font-weight:700; line-height:1.25; }
.fm .fm-profile-preview .fm-profile-fields { grid-column:2; grid-row:2; align-content:center; gap:.95rem .65rem; padding:.4rem 0; }
.fm .fm-profile-preview .fm-profile-fields dt { color:#a5b4c5; font-size:.6rem; line-height:1.4; }
.fm .fm-profile-preview .fm-profile-fields dd { color:#fff; font-size:1rem; font-weight:600; line-height:1.35; }
.fm .fm-profile-preview .fm-profile-note { grid-column:2; align-self:center; color:#a5b4c5; }
.fm .fm-profile-portrait--fallback img { max-width:78%; max-height:78%; object-fit:contain; }
.fm .fm-profile-portrait--skin img { display:none; }
.fm .fm-profile-portrait--skin canvas { width:auto; max-width:84%; height:86%; max-height:90%; aspect-ratio:1 / 2; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 8px 0 #00000018); }
.fm .fm-profile-portrait--skin-render img { width:86%; height:90%; max-width:none; max-height:none; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 8px 0 #00000018); }
.fm .fm-profile-preview--roblox { background:linear-gradient(145deg,#28415a,#182735 65%,#17232e); }
.fm .fm-profile-preview--roblox .fm-profile-portrait img:not([hidden]) { width:155%; max-width:none; height:100%; object-fit:contain; }
.fm .fm-profile-preview--roblox .fm-profile-portrait--fallback img:not([hidden]) { width:70%; max-width:80%; height:70%; }
.fm .fm-profile-preview--roblox .fm-profile-fields { display:flex; flex-direction:column; justify-content:center; gap:.9rem; }
.fm .fm-profile-preview--roblox .fm-profile-fields > div { display:flex; align-items:baseline; justify-content:space-between; gap:.45rem; }
.fm .fm-profile-preview--roblox .fm-profile-fields dt { min-width:0; max-width:47%; }
.fm .fm-profile-preview--roblox .fm-profile-fields dd { flex:0 1 auto; max-width:65%; margin:0; font-size:.94rem; overflow-wrap:normal; text-align:right; }
.fm .fm-profile-preview--minecraft { background:linear-gradient(145deg,#304230,#1d2c24 65%,#18231e); }
.fm .fm-profile-preview--minecraft .fm-profile-portrait { background:linear-gradient(0deg,#80976720 1px,transparent 1px),linear-gradient(90deg,#80976720 1px,transparent 1px),#0b170e40; background-size:16px 16px,16px 16px,auto; }
.fm .fm-profile-preview--minecraft .fm-profile-identity small,
.fm .fm-profile-preview--minecraft .fm-profile-fields dt { color:#b5c5a8; }
.fm .fm-profile-collection { display:flex; flex-direction:column; grid-column:2; grid-row:2; min-width:0; min-height:0; gap:.35rem; }
.fm .fm-profile-collection-label { display:flex; align-items:baseline; justify-content:space-between; gap:.4rem; flex:0 0 auto; color:#bcc8ba; font-size:.59rem; line-height:1.3; }
.fm .fm-profile-collection-label b { color:#f0f3ef; font-size:.66rem; font-weight:600; }
.fm .fm-profile-mini { display:grid; flex:1 1 0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr); gap:4px; width:100%; height:auto; min-height:0; }
.fm .fm-profile-mini[data-count="1"] { grid-template-columns:minmax(0,1fr); }
.fm .fm-profile-mini[data-count="3"],
.fm .fm-profile-mini[data-count="4"] { grid-template-rows:repeat(2,minmax(0,1fr)); }
.fm .fm-profile-preview--minecraft .fm-profile-mini[data-count="3"] > :last-child { grid-column:1 / -1; }
.fm .fm-profile-mini .fm-media-name { font-size:.59rem; padding:.65rem .25rem .35rem; }
.fm .fm-profile-preview--valorant { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:.5rem; padding:.55rem; background:linear-gradient(135deg,#38262e,#201c26 60%,#161d27); }
.fm .fm-profile-preview--valorant .fm-profile-head { display:flex; grid-column:1; grid-row:1; gap:.6rem; padding:.15rem .15rem .05rem; }
.fm .fm-profile-preview--valorant .fm-profile-portrait { flex:0 0 42px; width:42px; height:42px; border-color:#ffffff1a; border-radius:5px; background:#0d141c77; }
.fm .fm-profile-preview--valorant .fm-profile-identity { padding:0; }
.fm .fm-profile-head--valorant .fm-profile-identity { flex:1 1 auto; }
.fm .fm-profile-region { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:.12rem; min-width:3.25rem; max-width:6rem; padding:.32rem .5rem; border:1px solid #7e9dd194; border-radius:5px; background:#263c67; color:#e7eeff; line-height:1.2; }
.fm .fm-profile-region small { color:#afc5ef; font-size:.5rem; font-weight:500; }
.fm .fm-profile-region b { max-width:100%; color:#fff; font-size:.83rem; font-weight:700; line-height:1.15; overflow-wrap:anywhere; }
.fm .fm-profile-region--unknown { border-color:#65708366; background:#252c3a; color:#c1c9d7; }
.fm .fm-profile-region--unknown small { color:#aeb9cc; }
.fm .fm-profile-preview--valorant .fm-profile-identity small { color:#c4afb9; font-size:.58rem; }
.fm .fm-profile-preview--valorant .fm-profile-identity strong { font-size:.94rem; }
.fm .fm-profile-preview--valorant .fm-profile-collection { grid-column:1; grid-row:2; }
.fm .fm-profile-preview--valorant .fm-profile-collection-label { color:#c4afb9; padding:0 .15rem; }
.fm .fm-profile-preview--valorant .fm-profile-mini[data-count="3"] { grid-template-rows:1.15fr 1fr; }
.fm .fm-profile-preview--valorant .fm-profile-mini[data-count="3"] > :first-child { grid-column:1 / -1; }
.fm .fm-profile-preview--valorant .fm-media-tile--inventory { --fm-item-accent:#aa7081; --fm-item-tint:#aa70814d; --fm-item-shade:#aa70811a; }
.fm .fm-profile-preview--valorant .fm-media-tile img { padding:.35rem .55rem 1.45rem; }
.fm .fm-profile-preview--valorant:not(.fm-profile-preview--collection) { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-rows:auto auto minmax(0,1fr); }
.fm .fm-profile-preview--valorant:not(.fm-profile-preview--collection) .fm-profile-head { display:contents; }
.fm .fm-profile-preview--valorant:not(.fm-profile-preview--collection) .fm-profile-portrait { grid-column:1; grid-row:1 / span 3; width:100%; height:100%; }
.fm .fm-profile-preview--valorant:not(.fm-profile-preview--collection) .fm-profile-identity { grid-column:2; }
.fm .fm-profile-preview--valorant:not(.fm-profile-preview--collection) .fm-profile-region { grid-column:2; grid-row:2; align-self:start; justify-self:start; }
.fm .fm-profile-preview--valorant:not(.fm-profile-preview--collection) .fm-profile-fields { grid-column:2; grid-row:3; }

/* Named capes retain an intentional silhouette when a new or unavailable
   texture is not in the public catalog. It is visibly a fallback, not fake art. */
.fm .fm-media-tile--cape { --fm-item-accent:#728466; --fm-item-tint:#72846642; --fm-item-shade:#72846612; }
.fm .fm-media-tile--cape img { padding:.55rem .5rem 1.6rem; image-rendering:pixelated; }
.fm .fm-media-tile--cape-texture img { display:none; }
.fm .fm-media-tile--cape canvas { position:absolute; top:7%; left:50%; transform:translateX(-50%); width:auto; height:calc(86% - 1.4rem); max-width:80%; image-rendering:pixelated; filter:drop-shadow(4px 5px 0 #00000024); }
.fm .fm-cape-fallback { display:none; }
.fm .fm-media-tile--cape.fm-media-missing::before { content:none; }
.fm .fm-media-tile--cape.fm-media-missing .fm-cape-fallback { position:absolute; inset:8% .5rem 1.65rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; color:#a9b89e; }
.fm .fm-cape-fallback svg { min-height:0; width:auto; max-width:75%; height:calc(100% - .7rem); }
.fm .fm-cape-fallback small { color:#c0cbb7; font-size:.5rem; line-height:1.1; }
.fm .fm-media-tile--cape.fm-media-missing .fm-media-name { white-space:nowrap; padding:.65rem .25rem .35rem; }
.fm .fm-profile-head--detail { gap:1.25rem; min-height:175px; background:linear-gradient(135deg,#223042,#191f28); }
.fm .fm-profile-head--detail .fm-profile-portrait { flex-basis:125px; width:125px; height:160px; }
.fm .fm-profile-head--detail .fm-profile-identity strong { font-size:1.35rem; }
.fm .fm-profile-head--minecraft.fm-profile-head--detail { background:linear-gradient(135deg,#2c3e2c,#1a2620); }
.fm .fm-profile-head--valorant.fm-profile-head--detail { min-height:125px; background:linear-gradient(135deg,#38272f,#1d202a); }
.fm .fm-profile-head--valorant.fm-profile-head--detail .fm-profile-portrait { flex-basis:88px; width:88px; height:88px; }
.fm .fd-media-grid .fm-media-tile--inventory.fm-media-tile--cape { aspect-ratio:4 / 5; }
.fm .fd-media-grid .fm-media-tile--cape canvas { top:9%; height:calc(82% - 1.4rem); }

@media (min-width:521px) and (max-width:700px) {
  .fm .fm-profile-preview { padding:.55rem; gap:.45rem .55rem; }
  .fm .fm-profile-preview .fm-profile-identity strong { font-size:.86rem; }
  .fm .fm-profile-preview .fm-profile-identity small { font-size:.53rem; }
  .fm .fm-profile-preview .fm-profile-fields { gap:.45rem .4rem; padding:0; }
  .fm .fm-profile-preview .fm-profile-fields dt { font-size:.52rem; }
  .fm .fm-profile-preview .fm-profile-fields dd { font-size:.78rem; margin-top:.1rem; }
  .fm .fm-profile-preview--roblox .fm-profile-fields { gap:.35rem; }
  .fm .fm-profile-preview--roblox .fm-profile-fields > div { gap:.3rem; }
  .fm .fm-profile-preview--roblox .fm-profile-fields dd { font-size:.71rem; margin:0; }
  .fm .fm-profile-preview--valorant .fm-profile-portrait { flex-basis:34px; width:34px; height:34px; }
  .fm .fm-profile-region { min-width:2.6rem; max-width:4rem; padding:.25rem .35rem; }
  .fm .fm-profile-region small { font-size:.45rem; }
  .fm .fm-profile-region b { font-size:.7rem; }
  .fm .fm-profile-collection-label { font-size:.52rem; }
  .fm .fm-profile-mini .fm-media-name { font-size:.49rem; }
}

.fm .fm-card-body { min-width: 0; padding: .95rem; gap: .65rem; }
.fm .fm-card-kicker { color: var(--dim); font-size: .65rem; font-weight: 500; line-height: 1.35; letter-spacing: .025em; }
.fm .fm-card-title2 { display: -webkit-box; min-height: 2.8em; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: var(--text); font-size: .9rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.fm .fm-card-badges { gap: .35rem; }
.fm .fm-badge { max-width: 100%; border-radius: 5px; padding: .25rem .4rem; font-size: .62rem; font-weight: 500; line-height: 1.2; white-space: normal; }
.fm .fm-badge-good { background: #1c2b25; border-color: #354b40; color: #a1c4af; }
.fm .fm-badge-bad { background: #302025; border-color: #51343c; color: #d5a0a7; }
.fm .fm-badge-neutral { background:#242a32; border-color:#434b59; color:#c0c7d2; }
.fm .fm-badge-access { font-weight:600; }
.fm .fm-card-stats { justify-content: flex-start; flex-wrap: wrap; gap: .4rem .85rem; color: var(--muted); font-size: .76rem; }
.fm .fm-card-stats span { display: inline-flex; align-items: baseline; justify-content: flex-start; flex: 0 1 auto; min-width: 0; gap: .3rem; padding: 0; background: none; border-radius: 0; color: var(--text); font-weight: 600; text-align: left; }
.fm .fm-card-stats small,
.fm .fm-card-stats label { margin: 0; color: var(--dim); font-size: .66rem; font-weight: 400; }
.fm .fm-card-stats strong { color: var(--text); font-weight: 600; }

.fm .fm-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--border); }
.fm .fm-card-price-row { min-width: 0; align-items: flex-start; gap: .1rem; padding: 0; background: none; border: 0; border-radius: 0; }
.fm .fm-card-price-lbl { color: var(--dim); font-size: .59rem; font-weight: 400; letter-spacing: .03em; }
.fm .fm-card-price-big { color: var(--text); font-size: 1.25rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.fm .fm-card-buy { flex: 0 0 auto; width: auto; min-width: 118px; min-height: 40px; margin-top: 0; padding: .6rem .85rem; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.fm .fm-card-buy:hover { background: var(--accent2); border-color: var(--accent2); }
.fm .fm-card-buy:disabled { opacity: .45; }

.fm .fm-empty { width: 100%; min-width: 0; padding: 3rem 1.5rem; border: 1px dashed var(--border-s); border-radius: 11px; background: var(--surface); color: var(--muted); }
.fm .fm-empty h2,
.fm .fm-empty h3 { margin: 0 0 .55rem; color: var(--text); font-size: 1.1rem; font-weight: 600; }
.fm .fm-empty p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.fm .fm-pagination { gap: .4rem; margin: 1.7rem 0 0; }
.fm .fm-page-btn,
.fm .fm-page-arrow { min-width: 36px; height: 36px; border-radius: 6px; background: var(--surface); border-color: var(--border); color: var(--muted); font-size: .78rem; font-weight: 500; }
.fm .fm-page-btn:hover,
.fm .fm-page-arrow:hover { border-color: var(--border-s); color: var(--text); }
.fm .fm-page-btn.active { background: #382128; border-color: #78404a; color: #f2c4c9; }

/* NFA remains a real catalog, with activity and stock signals intact. */
.fm .fm-nfa { max-width: none; }
.fm .fm-nfa-intro { padding: 1.15rem 1.25rem; border-color: var(--border); border-radius: 11px; background: var(--surface); }
.fm .fm-nfa-eyebrow { color: var(--dim); font-weight: 600; letter-spacing: .1em; }
.fm .fm-nfa-intro h2 { color: var(--text); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.fm .fm-nfa-intro p:last-child { color: var(--muted); }
.fm .fm-nfa-label { padding: .5rem .7rem; border-color: var(--border); background: var(--surface2); color: var(--muted); font-weight: 500; }
.fm .fm-nfa-tabs { gap: .5rem; margin-bottom: 1.2rem; }
.fm .fm-nfa-tab { min-height: 44px; padding: .65rem .85rem; border-color: var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 600; box-shadow: none; }
.fm .fm-nfa-tab:hover { background: var(--surface2); border-color: var(--border-s); color: var(--text); }
.fm .fm-nfa-tab[aria-selected="true"] { background: #22181d; border-color: #78404a; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.fm .fm-nfa-tier-head h3 { color: var(--text); font-size: 1.05rem; font-weight: 600; }
.fm .fm-nfa-index { color: var(--dim); border-color: var(--border); font-weight: 500; }
.fm .fm-nfa-card,
.fm .fm-nfa-card--active { border-color: var(--border); border-radius: 11px; background: var(--surface); color: var(--text); box-shadow: none; transition: border-color .15s; }
.fm .fm-nfa-card:hover { border-color: var(--border-s); background: var(--surface); color: var(--text); transform: none; box-shadow: none; }
.fm .fm-nfa-art,
.fm .fm-nfa-media,
.fm .fm-nfa-media-fallback { background: #171c23; border-bottom-color: var(--border); }
.fm .fm-nfa-art::after { display: none; }
.fm .fm-nfa-art img { display: none; }
.fm .fm-nfa-media { aspect-ratio: 3 / 2; }
.fm .fm-nfa-count { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; }
.fm .fm-nfa-card--named .fm-nfa-count { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.fm .fm-nfa-body { padding: 1rem; }
.fm .fm-nfa-price { font-size: 1.35rem; font-weight: 700; }
.fm .fm-nfa-played { color: var(--muted); }
.fm .fm-nfa-status { font-size: .67rem; font-weight: 700; letter-spacing: .035em; }
.fm .fm-nfa-cta { padding: .65rem .8rem; font-size: .76rem; font-weight: 600; }

/* Confirmation and account detail overlays keep their existing .show behavior. */
.fm .fm-modal,
.fm .fm-detail { min-width: 0; background: #14181e; border-color: var(--border-s); border-radius: 11px; color: var(--text); box-shadow: 0 20px 70px rgba(0,0,0,.4); }
.fm .fm-detail { width: 100%; max-width: 900px; }
.fm .fm-modal-bg,
.fm .fm-detail-bg { background: rgba(0,0,0,.8); }
.fm .fm-modal-acct,
.fm .fd-info-cell,
.fm .fd-item,
.fm .fd-season-chip { background: var(--surface2); }
.fm .fm-detail-title { font-weight: 600; overflow-wrap: anywhere; }
.fm .fm-detail-sub { color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.fm .fm-modal-confirm { min-height: 40px; padding: .65rem .9rem; background: var(--accent); font-weight: 600; }
.fm .fm-modal-confirm:hover { background: var(--accent2); }
.fm .fm-modal-cancel { min-height: 40px; border-color: var(--border-s); color: var(--muted); }
.fm .fm-modal-cancel:hover { background: var(--surface2); color: var(--text); }
.fm .fm-modal-x { top: .45rem; right: .45rem; display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); border-radius: 5px; }
.fm .fm-modal-x:hover { background: var(--surface2); color: var(--text); }
.fm .fd-section-title { font-size: .72rem; font-weight: 600; color: var(--muted); }
.fm .fd-info-grid { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.fm .fd-info-val { overflow-wrap: anywhere; }

.fm .fd-media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: .55rem; min-width: 0; }
.fm .fd-media-grid .fm-media-tile,
.fm .fd-media-grid .fm-skin-tile { width: 100%; height: auto; aspect-ratio: 3 / 4; border: 1px solid var(--border); border-radius: 7px; }
.fm .fd-media-grid .fm-media-tile--inventory,
.fm .fd-media-grid--inventory .fm-media-tile { aspect-ratio: 3 / 2; }
.fm .fd-media-grid .fm-media-tile img,
.fm .fd-media-grid .fm-skin-tile img { position: absolute; inset: 0; }
.fm .fd-media-grid .fm-media-name,
.fm .fd-media-grid .fm-skin-name { padding-top: .9rem; font-size: .65rem; }
.fm .fd-games-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .75rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.fm .fd-games-list > * { min-width: 0; margin: 0; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--muted); font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.fm .fd-more-media { margin-top: .85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.fm .fd-more-media > summary { padding: .8rem .9rem; color: var(--muted); font-size: .78rem; font-weight: 500; cursor: pointer; }
.fm .fd-more-media > summary:hover { color: var(--text); }
.fm .fd-more-media[open] > summary { border-bottom: 1px solid var(--border); color: var(--text); }
.fm .fd-more-media > .fd-media-grid,
.fm .fd-more-media > .fd-games-list { margin: .75rem; }
.fm .fd-empty-note,
.fm .fd-media-note { margin: .65rem 0; color: var(--dim); font-size: .78rem; line-height: 1.6; }
.fm .fd-media-retry { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .6rem; border: 1px solid #65404a; border-radius: 5px; background: transparent; color: #e58b94; font-size: .74rem; font-weight: 500; line-height: 1.3; vertical-align: baseline; cursor: pointer; }
.fm .fd-media-note .fd-media-retry { margin-inline-start: .45rem; }
.fm .fd-media-retry:hover { border-color: var(--accent); background: #302025; color: #f2c4c9; }
.fm .fd-media-retry:disabled,
.fm .fd-media-retry[aria-busy="true"] { opacity: .65; }
.fm .fd-media-retry[aria-busy="true"] { cursor: progress; }

@media (max-width: 1000px) {
  .fm .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm .fm-page-top { gap: 1.25rem; }
}

@media (max-width: 720px) {
  .fm { padding: 0 0 4rem; }
  .fm .fm-hero { margin-bottom: 1rem; }
  .fm .fm-hero-art { inset: 0 0 auto; aspect-ratio: 1672 / 941; }
  .fm .fm-hero-art img { object-fit: contain; object-position: center top; }
  .fm .fm-hero-art::after { background: linear-gradient(180deg, rgba(9,11,14,.05), rgba(9,11,14,.08) 45%, #090b0e 100%); }
  .fm .fm-hero-inner,
  .fm .fm-catalog { padding-inline: 1rem; }
  .fm .fm-hero-inner { min-height: 0; padding-top: clamp(145px, 43vw, 300px); padding-bottom: .5rem; }
  .fm .fm-page-top { flex-direction: column; align-items: stretch; gap: 1rem; margin-bottom: 1rem; }
  .fm .fm-header { max-width: none; }
  .fm .fm-header h1 { font-size: 1.85rem; }
  .fm .fm-header p { font-size: .82rem; }
  .fm .fm-balance-bar { flex: none; width: 100%; max-width: none; padding: .8rem .9rem; }
  .fm .fm-cat-bar { gap: .45rem; margin-bottom: 1rem; }
  .fm .fm-cat-btn { flex: 0 0 138px; }
  .fm .fm-search-wrap { flex-basis: 100%; }
  .fm .fm-filters-panel { padding: .7rem; }
  .fm .fm-card-body { padding: .85rem; }
  .fm .fm-nfa-intro { flex-direction: column; align-items: flex-start; padding: 1rem; }
  .fm .fm-nfa-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .fm .fm-detail-bg { padding: 1rem .65rem; }
  .fm .fm-detail { padding: 1.15rem; }
  .fm .fd-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .fm { padding: 0 0 3rem; }
  .fm .fm-hero-inner,
  .fm .fm-catalog { padding-inline: .85rem; }
  .fm .fm-grid { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .fm .fm-header h1 { font-size: 1.75rem; }
  .fm .fm-price-input { flex: 1 1 86px; width: 86px; }
  .fm .fm-filter-num { flex: 1 1 calc(50% - .3rem); width: calc(50% - .3rem); }
  .fm .fm-filter-select { flex: 1 1 calc(50% - .3rem); min-width: 0; }
  .fm .fm-filter-check { white-space: normal; }
  .fm .fm-search-btn,
  .fm .fm-filter-btn { flex: 1 1 auto; }
  .fm .fm-filter-reset { padding-right: .65rem; padding-left: .65rem; }
  .fm .fm-sort { max-width: 60%; }
  .fm .fm-card-body { padding: .95rem; }
  .fm .fm-nfa-pair { grid-template-columns: minmax(0, 1fr); }
  .fm .fm-nfa-tab { flex-basis: 110px; }
  .fm .fm-nfa-label { max-width: 100%; font-size: .68rem; }
  .fm .fm-detail { padding: 1rem; }
  .fm .fm-detail-head { gap: .75rem; }
  .fm .fm-detail-head .fm-modal-confirm { flex-basis: auto; }
  .fm .fm-profile-head--detail { gap:.8rem; min-height:155px; padding:.8rem; }
  .fm .fm-profile-head--detail .fm-profile-portrait { flex-basis:96px; width:96px; height:135px; }
  .fm .fm-profile-head--detail .fm-profile-identity strong { font-size:1.1rem; }
  .fm .fm-profile-head--valorant.fm-profile-head--detail { min-height:112px; }
  .fm .fm-profile-head--valorant.fm-profile-head--detail .fm-profile-portrait { flex-basis:72px; width:72px; height:72px; }
  .fm .fd-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .fm .fd-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm .fd-games-list { gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fm .fm-cat-btn,
  .fm .fm-card,
  .fm .fm-card-preview-overlay,
  .fm .fm-nfa-card,
  .fm .fm-nfa-tab { transition: none; }
}