/* AccountSearcher. Grape-ink shelves, price-tag yellow, loot-tier colours. */

:root {
  --ink-0: #13111f;
  --ink-1: #1b1830;
  --ink-2: #242040;
  --ink-3: #2e2950;
  --line: #352f5c;
  --line-soft: #2a2548;
  --text: #f2effd;
  --muted: #aaa3cf;
  --faint: #7a73a3;
  --tag: #ffd24d;
  --tag-ink: #2a1f00;
  --violet: #a594ff;
  --good: #57d9a8;
  --mid: #ffc061;
  --bad: #ff8593;

  --common: #a3abc0;
  --uncommon: #5ed68e;
  --rare: #55a8ff;
  --epic: #b984ff;
  --legendary: #ffa24a;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  font-feature-settings: "ss01";
}

a { color: inherit; }
img { max-width: 100%; }
::selection { background: #4b3fa0; color: #fff; }

:focus-visible {
  outline: 2px solid var(--tag);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: min(1240px, calc(100% - 2rem));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 50;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--tag);
  color: var(--tag-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(19, 17, 31, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-tag {
  width: 30px;
  height: 30px;
  fill: var(--tag);
  transform: rotate(-12deg);
}
.brand-tag circle { fill: var(--ink-0); }

.brand-word,
.foot-brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.035em;
}
.brand-word b,
.foot-brand b { font-weight: 800; color: var(--tag); }

.bar-search { flex: 1; max-width: 560px; }

.bar-nav { margin-left: auto; display: flex; gap: 1rem; }
.bar-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.bar-nav a:hover { color: var(--text); }

/* ---------------------------------------------------------------- search inputs */

.suggest { position: relative; }

.search-glyph {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

input[type="search"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  transition: border-color 120ms, background 120ms;
}
input[type="search"]::placeholder { color: var(--faint); }
input[type="search"]:hover { border-color: #463f78; }
input[type="search"]:focus {
  outline: none;
  border-color: var(--violet);
  background: var(--ink-2);
  box-shadow: 0 0 0 3px rgba(165, 148, 255, 0.18);
}
input[type="search"]::-webkit-search-cancel-button { filter: invert(0.7); }

.big-search {
  display: flex;
  gap: 0.6rem;
  margin: 1.8rem 0 0;
}
.big-search .suggest { flex: 1; }
.big-search input[type="search"] {
  font-size: 1.15rem;
  padding: 1rem 1.2rem 1rem 3rem;
}
.big-search .search-glyph { left: 1.15rem; width: 22px; height: 22px; }
.big-search button {
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  border: 0;
  border-radius: 999px;
  padding: 0 1.6rem;
  background: var(--tag);
  color: var(--tag-ink);
  cursor: pointer;
  white-space: nowrap;
}
.big-search button:hover { background: #ffdc72; }

.suggest-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(5, 3, 15, 0.55);
  overflow: hidden;
}
.suggest-tab {
  padding: 0.55rem 0.9rem 0.2rem;
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 600;
}
.suggest-panel ul { list-style: none; margin: 0; padding: 0.25rem; max-height: 22rem; overflow: auto; }
.suggest-panel a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.suggest-panel a[aria-selected="true"],
.suggest-panel a:hover { background: var(--ink-3); }
.suggest-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-detail { color: var(--faint); font-size: 0.85rem; white-space: nowrap; }
.suggest-panel mark { background: none; color: var(--tag); font-weight: 700; }

/* ---------------------------------------------------------------- shop, seller, trust */

.shop {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.shop-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}
.shop-logo.is-wide { width: 42px; border-radius: 0; }
.shop-logo.is-letter {
  display: inline-grid;
  place-items: center;
  background: var(--ink-3);
  font-size: 0.65rem;
  font-weight: 700;
}

.seller {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.portrait {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--face, var(--ink-3));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  flex-shrink: 0;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.seller-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.trust {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  color: var(--good);
  background: rgba(87, 217, 168, 0.12);
}
.trust::before {
  content: "";
  width: 8px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%);
}
.trust.trust-mid { color: var(--mid); background: rgba(255, 192, 97, 0.12); }
.trust.trust-low { color: var(--bad); background: rgba(255, 133, 147, 0.12); }

.dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}

.game-mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--mark);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- price tag
   The one loud thing on the site. Every price wears a yellow tag. */

.price-tag {
  --notch: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem 0.2rem calc(var(--notch) + 0.5rem);
  background: var(--tag);
  color: var(--tag-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, var(--notch) 100%, 0 50%);
  border-radius: 0 6px 6px 0;
}
.price-tag::before {
  content: "";
  position: absolute;
  left: calc(var(--notch) - 1px);
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--ink-1);
}
.price-tag.big { --notch: 16px; font-size: 2rem; padding: 0.35rem 1rem 0.35rem 1.7rem; }

.tag-inline {
  color: var(--tag);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- home */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(126, 99, 255, 0.22), transparent 60%),
    radial-gradient(40rem 22rem at -10% 110%, rgba(255, 210, 77, 0.07), transparent 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 13ch;
}

.lede {
  margin: 1.3rem 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.13rem;
}
.lede .shop { color: var(--text); font-weight: 600; vertical-align: -0.12em; }

.popular {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-top: 1.25rem;
}
.popular-label { color: var(--faint); font-size: 0.9rem; flex-shrink: 0; }
.popular ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.popular a {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}
.popular a:hover { border-color: var(--violet); background: var(--ink-2); }

.hero-tags {
  position: relative;
  min-height: 300px;
}
.float-tag {
  position: absolute;
  display: grid;
  gap: 0.1rem;
  padding: 1rem 1.4rem 1rem 2.4rem;
  background: var(--tag);
  color: var(--tag-ink);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  animation: tag-in 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.float-tag::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--ink-0);
}
.float-what { font-weight: 600; font-size: 0.9rem; opacity: 0.8; }
.float-price { font-family: var(--display); font-weight: 800; font-size: 2rem; letter-spacing: -0.03em; line-height: 1.05; }
.float-where { font-size: 0.85rem; font-weight: 600; opacity: 0.75; }
.float-1 { top: 0; right: 8%; transform: rotate(-5deg); }
.float-2 { top: 34%; left: 0; transform: rotate(4deg); animation-delay: 120ms; background: #ffe28a; }
.float-3 { bottom: 0; right: 0; transform: rotate(-2deg); animation-delay: 240ms; }

@keyframes tag-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

.how { padding: 2.5rem 0 1rem; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.step-n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--violet);
  color: var(--violet);
  font-family: var(--display);
  font-weight: 800;
  flex-shrink: 0;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.deals { padding: 2.5rem 0 4rem; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.section-head h2 { font-size: 1.7rem; }
.section-head p { margin: 0; color: var(--faint); }

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.deal {
  display: flex;
  flex-direction: column;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.1rem 0.9rem;
}
.deal header { margin-bottom: 0.6rem; }
.deal h3 { font-size: 1.2rem; }
.deal h3 a { text-decoration: none; }
.deal h3 a:hover { color: var(--tag); }
.deal header p { margin: 0.15rem 0 0; color: var(--faint); font-size: 0.88rem; }
.more {
  margin-top: auto;
  padding-top: 0.7rem;
  color: var(--violet);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- results head */

.results { padding: 2rem 0 4rem; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
}
.page-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.head-meta { margin: 0.4rem 0 0; color: var(--muted); }
.head-meta a { color: var(--violet); }

.box-page-head { justify-content: flex-start; align-items: center; }
.head-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--ink-2);
  color: var(--tag);
  flex-shrink: 0;
}
.head-icon .icon { width: 30px; height: 30px; }

.crumbs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  color: var(--faint);
  font-size: 0.95rem;
}
.crumbs a { color: var(--violet); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

.blurb { margin: -0.6rem 0 1.4rem; color: var(--muted); max-width: 70ch; }

.notice {
  margin: 0 0 1.4rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-md);
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  color: var(--muted);
}
.notice a { color: var(--tag); font-weight: 600; }

.tier-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--faint);
}
.tier-key li { display: inline-flex; align-items: center; gap: 0.35rem; }
.tier-key li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--tier);
}

.tier-common { --tier: var(--common); }
.tier-uncommon { --tier: var(--uncommon); }
.tier-rare { --tier: var(--rare); }
.tier-epic { --tier: var(--epic); }
.tier-legendary { --tier: var(--legendary); }

/* ---------------------------------------------------------------- the shelf */

html { scroll-padding-top: 6rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
}

.shelf-break {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0.2rem;
  font-size: 1.3rem;
  color: var(--muted);
}

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tier);
}

.box-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 1.05rem 0.75rem;
  text-decoration: none;
}
.box-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 15%, transparent);
}
.box-icon .icon,
.head-icon .icon { stroke-width: 1.7; }
.icon { width: 22px; height: 22px; }
.box-name { min-width: 0; }
.box-name h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.box-head:hover h2 { color: var(--tag); }
.box-count { color: var(--faint); font-size: 0.86rem; }
.box-from { display: grid; justify-items: end; gap: 0.1rem; }
.box-from small { color: var(--faint); font-size: 0.75rem; }

.box-blurb,
.box-subs {
  margin: -0.2rem 1.05rem 0.5rem;
  color: var(--muted);
  font-size: 0.86rem;
}
.box-subs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.box-subs span {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--ink-2);
  font-size: 0.8rem;
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0 0.45rem;
}
.rows li + li { border-top: 1px solid var(--line-soft); }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.6rem 0.6rem;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.row:hover { background: var(--ink-2); }
.row-main { min-width: 0; display: grid; gap: 0.2rem; }
.row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.35;
}
.row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--faint);
  font-size: 0.8rem;
}
.row-meta .shop { color: var(--muted); }
.row-seller { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row-price { display: grid; justify-items: end; text-align: right; }
.row-price b {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row-price small { color: var(--faint); font-size: 0.75rem; white-space: nowrap; }

.box-all {
  margin-top: auto;
  padding: 0.75rem 1.05rem 0.9rem;
  border-top: 1px solid var(--line-soft);
  color: var(--violet);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.box-all:hover { background: var(--ink-2); color: var(--text); }

/* ---------------------------------------------------------------- one box, full list */

.cat-strip {
  position: relative;
  margin: 0 0 1rem;
}
.cat-strip ul {
  display: flex;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9rem;
}
.chip small { color: var(--faint); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--violet); }
.chip.is-on { background: var(--text); color: var(--ink-0); border-color: var(--text); font-weight: 600; }
.chip.is-on small { color: #4b4670; }

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
}
.seg a {
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
}
.seg a:hover { color: var(--text); }
.seg a.is-on { background: var(--ink-3); color: var(--text); }
.toolbar-note { margin: 0; color: var(--faint); font-size: 0.88rem; }

.listing {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.offer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.offer:hover { border-color: var(--line); }
.offer.is-bait { opacity: 0.72; }
.offer-main { min-width: 0; display: grid; gap: 0.35rem; align-content: start; }
.offer-title {
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.offer-title:hover { color: var(--tag); }
.offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0;
  color: var(--faint);
  font-size: 0.85rem;
}
.flag { color: var(--bad); font-weight: 600; }
.offer-seller { font-size: 0.9rem; }
.other-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
}
.other-offers a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
}
.other-offers a b { color: var(--text); font-variant-numeric: tabular-nums; }
.other-offers a.is-pick { box-shadow: inset 0 0 0 1px var(--tag); }
.other-offers a:hover { background: var(--ink-3); }

.offer-buy {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0.35rem;
  min-width: 9rem;
}
.price-sub { color: var(--faint); font-size: 0.8rem; text-align: right; }

.buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
.buy:hover { background: var(--text); color: var(--ink-0); border-color: var(--text); }
.buy.small { padding: 0.25rem 0.7rem; font-size: 0.82rem; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
  color: var(--faint);
}
.pager a {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 600;
}
.pager a:hover { border-color: var(--violet); }

.empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--muted);
}
.empty h1, .empty h2 { color: var(--text); font-size: 1.5rem; margin-bottom: 0.5rem; }
.empty a { color: var(--violet); }
.big-empty { padding: 4rem 1.5rem; }
.big-empty .big-search { max-width: 640px; margin-inline: auto; }

.fine { color: var(--faint); font-size: 0.86rem; margin: 1.2rem 0 0; }

/* ---------------------------------------------------------------- product */

.product-head {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.product-head h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}
.spec-tags a {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}
.spec-tags a:hover { color: var(--text); }

.product-buy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.4rem;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  margin-bottom: 2rem;
}
.price-caption { margin: 0 0 0.4rem; color: var(--faint); font-size: 0.88rem; }
.product-buy .price-sub { text-align: left; margin: 0.5rem 0 0; }
.product-seller { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.product-seller .buy { background: var(--tag); color: var(--tag-ink); border-color: var(--tag); padding: 0.65rem 1.3rem; font-size: 0.98rem; }
.product-seller .buy:hover { background: #ffdc72; }

.table-title { font-size: 1.25rem; margin-bottom: 0.8rem; }
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { color: var(--faint); font-weight: 600; font-size: 0.82rem; background: var(--ink-1); }
tbody tr:last-child td { border-bottom: 0; }
tr.is-pick td { background: rgba(255, 210, 77, 0.05); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.action, th.action { text-align: right; }
td.muted { color: var(--faint); }
.pill {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--tag);
  color: var(--tag-ink);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- directory */

.dir-filter { max-width: 360px; margin-bottom: 1.2rem; padding-left: 1rem; }
.dir {
  columns: 4 220px;
  column-gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dir li { break-inside: avoid; }
.dir a {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
}
.dir a:hover { background: var(--ink-1); color: var(--tag); }
.dir small { color: var(--faint); font-variant-numeric: tabular-nums; }

.spec-groups { display: grid; gap: 1.6rem; }
.spec-group h2 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 2.4rem 0 3rem;
  color: var(--faint);
  font-size: 0.88rem;
}
.foot {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2rem;
}
.foot p { margin: 0 0 0.6rem; max-width: 70ch; }
.foot-brand { color: var(--text); font-size: 1.1rem; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-tags { display: none; }
  .steps { grid-template-columns: 1fr; gap: 1rem; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .box-page-head { flex-direction: row; align-items: center; }
  .foot { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .bar { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.6rem 0; }
  .bar-search { order: 3; flex-basis: 100%; max-width: none; }
  .big-search { flex-direction: column; }
  .big-search button { padding: 0.85rem; }
  .popular { flex-direction: column; gap: 0.5rem; }
  .offer { grid-template-columns: 1fr; gap: 0.8rem; }
  .offer-buy {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    align-items: center;
    min-width: 0;
  }
  .offer-buy .buy { justify-self: end; }
  .section-head { flex-direction: column; gap: 0.2rem; }
  th, td { padding: 0.55rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- top strip: every shop */

.topstrip {
  border-bottom: 1px solid var(--line-soft);
  background: #0f0d1a;
  font-size: 0.8rem;
}
.topstrip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.3rem;
}
.topstrip-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--faint);
  white-space: nowrap;
}
.shop-bar {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: auto;
}
.shop-bar::-webkit-scrollbar { display: none; }
.shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.shop-btn img { border-radius: 3px; object-fit: contain; width: auto; max-width: 34px; }
.shop-btn:hover { color: var(--text); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.shop-btn.is-compared { color: var(--text); }
.shop-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--brand, var(--ink-3));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(87, 217, 168, 0.6);
  animation: pulse 2.4s ease-out infinite;
  flex-shrink: 0;
}
.live-dot.is-red { background: var(--bad); box-shadow: none; animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(87, 217, 168, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(87, 217, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 217, 168, 0); }
}

/* ---------------------------------------------------------------- scan banner and navigation bar */

.scan {
  position: relative;
  margin: -0.6rem 0 1.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-md);
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.scan-bar {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: transparent;
}
.scan-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--violet), var(--tag));
  transform-origin: left;
  transform: scaleX(1);
}
.scan.is-running .scan-bar span { animation: fill 650ms cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes fill { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
.scan-text { margin: 0; color: var(--muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.scan-count {
  color: var(--text);
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}
.scan-live::after { content: ""; }
.scan.is-running .scan-live::after { content: "…"; }
.scan .scan-done { opacity: 0; transition: opacity 250ms; }
.scan.is-done .scan-done { opacity: 1; }


.nav-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
}
.nav-progress.is-on { opacity: 1; }
.nav-progress > span {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--tag));
  transform-origin: left;
  transform: scaleX(0);
}
.nav-progress.is-on > span { animation: fill 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.nav-progress p {
  position: absolute;
  right: 1rem;
  top: 0.7rem;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.nav-progress p b { color: var(--tag); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- pictures, sales, warnings */

.row.has-thumb { grid-template-columns: auto 1fr auto; }
.row-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--ink-3);
  flex-shrink: 0;
}
.thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-2);
  flex-shrink: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-mark,
.thumb.is-broken {
  background: color-mix(in srgb, var(--mark, var(--violet)) 22%, var(--ink-2));
  color: var(--text);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
}
.offer { grid-template-columns: auto 1fr auto; }
.offer.is-top { border-color: color-mix(in srgb, var(--tag) 45%, var(--line-soft)); }
.ribbon {
  justify-self: start;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--tag);
  color: var(--tag-ink);
  font-size: 0.72rem;
  font-weight: 700;
}
.crown {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 4px;
  background: rgba(255, 210, 77, 0.14);
  color: var(--tag);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 0.08em;
}
.saving { font-style: normal; color: var(--good); font-weight: 600; }
.sold, .row-sold { color: var(--muted); }
.row-sold::before { content: "·"; margin-right: 0.35rem; color: var(--faint); }
.checked { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--good); }

.warn-new {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 192, 97, 0.13);
  color: var(--mid);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.warn-new svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-warn {
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: rgba(255, 192, 97, 0.14);
  color: var(--mid);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- sub-categories */

.box-subs-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: -0.2rem 1.05rem 0.55rem;
  padding: 0;
}
.box-subs-links a {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}
.box-subs-links a:hover { color: var(--text); background: var(--ink-3); }
.box-subs-links small { color: var(--faint); }

.sub-strip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: -0.3rem 0 1rem;
}
.sub-label { color: var(--faint); font-size: 0.85rem; white-space: nowrap; }
.sub-strip ul {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.3rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sub {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.86rem;
}
.sub small { color: var(--faint); }
.sub:hover { color: var(--text); border-style: solid; }
.sub.is-on { border: 1px solid var(--tag); color: var(--tag); background: rgba(255, 210, 77, 0.08); }

/* ---------------------------------------------------------------- other shops, sold out, related */

.also {
  margin-top: 2.5rem;
  padding: 1.3rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--ink-1), transparent);
}
.also h2 { font-size: 1.2rem; }
.also > p { margin: 0.3rem 0 1rem; color: var(--faint); font-size: 0.9rem; }
.also ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.also a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.55rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--ink-1);
  text-decoration: none;
}
.also a:hover { border-color: var(--brand); }
.also small { grid-column: 2; color: var(--faint); font-size: 0.78rem; line-height: 1.35; }

.sold-out { max-width: 46rem; margin: 1rem 0 1.5rem; }
.sold-out h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; margin-top: 0.6rem; }
.sold-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 133, 147, 0.12);
  color: var(--bad);
  font-weight: 700;
  font-size: 0.85rem;
}
.alt-rows, .related-rows {
  max-width: 46rem;
  padding: 0.35rem;
  margin-bottom: 1.4rem;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.related { margin-top: 2.5rem; }
.related .section-head h2 { font-size: 1.35rem; }

@media (max-width: 760px) {
  .topstrip-note { display: none; }
  .shop-bar { margin-left: 0; }
  .offer { grid-template-columns: auto 1fr; }
  .offer-buy { grid-column: 1 / -1; }
  .thumb { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* ---------------------------------------------------------------- per-unit prices and minimum order */

.unit-line { color: var(--good); font-weight: 600; }
.min-order {
  display: inline-block;
  margin: 0.2rem 0 0;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: rgba(165, 148, 255, 0.12);
  color: var(--violet);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: right;
}


/* ---------------------------------------------------------------- pictures, skins, viewer */

button.thumb {
  position: relative;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  font: inherit;
}
button.thumb[tabindex="-1"] { cursor: default; }
.thumb.is-skin,
.row-thumb.is-skin {
  object-fit: contain;
  background: radial-gradient(circle at 50% 35%, #3b2f7a, var(--ink-2) 70%);
}
.thumb.is-skin img { object-fit: contain; }
.thumb-count {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 0.35rem;
  border-radius: 6px;
  background: rgba(10, 8, 20, 0.8);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.thumb-count::before { content: "▣ "; opacity: 0.7; }

.skin-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0.15rem 0 0.1rem;
  padding: 0;
}
.skin-strip li {
  --rar: var(--common);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.45rem 0.12rem 0.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rar) 14%, var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--rar) 35%, transparent);
  font-size: 0.76rem;
  color: var(--text);
}
.skin-strip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--rar) 30%, var(--ink-3));
}
.skin-strip .skin-more { background: var(--ink-2); border-color: var(--line); color: var(--muted); padding-left: 0.5rem; }
.rarity-uncommon { --rar: var(--uncommon); }
.rarity-rare { --rar: var(--rare); }
.rarity-epic { --rar: var(--epic); }
.rarity-legendary, .rarity-mythic { --rar: var(--legendary); }
.rarity-icon, .rarity-marvel, .rarity-dc, .rarity-starwars, .rarity-gaminglegends { --rar: #45c7f2; }
.rarity-dark, .rarity-shadow { --rar: #c04cff; }
.rarity-none { --rar: var(--violet); }

.skin-strip.is-big { gap: 0.6rem; }
.skin-strip.is-big li {
  flex-direction: column;
  width: 104px;
  padding: 0.5rem 0.4rem 0.55rem;
  border-radius: 14px;
  text-align: center;
  line-height: 1.2;
}
.skin-strip.is-big img { width: 80px; height: 80px; border-radius: 10px; object-fit: contain; }

.gallery, .skins-block { margin: 0 0 2rem; }
.gallery ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery button {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-2);
  cursor: zoom-in;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery button:hover { border-color: var(--tag); }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: rgba(8, 6, 16, 0.92);
}
.viewer.is-open { display: flex; }
.viewer figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.viewer img { max-width: 100%; max-height: 80vh; min-width: min(420px, 80vw); object-fit: contain; border-radius: 12px; background: var(--ink-1); }
.viewer figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.86rem; }
.viewer button {
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.viewer button:hover { border-color: var(--tag); color: var(--tag); }
.viewer-close { position: absolute; top: 1rem; right: 1rem; }
html.no-scroll { overflow: hidden; }

.suggest-panel a { align-items: center; }
.suggest-pic {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--ink-3);
  flex-shrink: 0;
  margin-right: -0.4rem;
}
.suggest-pic.is-empty { background: linear-gradient(135deg, var(--violet), var(--tag)); opacity: 0.35; }
.suggest-panel a .suggest-label { flex: 1; }

/* Phones: each shop offer becomes a small card, so the Open button never hides off-screen. */
@media (max-width: 640px) {
  .offers-table, .offers-table tbody { display: block; }
  .offers-table thead { display: none; }
  .offers-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "seller price" "shop open" "when open";
    gap: 0.35rem 0.8rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .offers-table tbody tr:last-child { border-bottom: 0; }
  .offers-table td { padding: 0; border: 0; background: none; text-align: left; }
  .offers-table tr.is-pick { background: rgba(255, 210, 77, 0.05); }
  .offers-table tr.is-pick td { background: none; }
  .offers-table td:nth-child(1) { grid-area: seller; min-width: 0; }
  .offers-table td:nth-child(2) { grid-area: shop; }
  .offers-table td:nth-child(3) { grid-area: price; text-align: right; }
  .offers-table td.when { grid-area: when; font-size: 0.8rem; }
  .offers-table td.action { grid-area: open; align-self: end; text-align: right; }
  .table-wrap { overflow-x: visible; }
}

/* ================================================================ simple mode
   One question per screen: which game, what do you need, which offer. */

/* Home: the question and the search box */
.ask { padding: clamp(2.5rem, 7vw, 5rem) 0 2rem; background: radial-gradient(70% 120% at 50% 0%, #2a2252 0%, transparent 70%); }
.ask-in { max-width: 760px; text-align: center; }
.ask h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 0.7rem; }
.ask-lede { color: var(--muted); font-size: 1.08rem; margin: 0 auto 1.6rem; max-width: 34rem; }
.ask-lede .shop { color: var(--text); font-weight: 600; vertical-align: -0.12em; }
.ask .big-search { text-align: left; }
.ask .big-search input[type="search"] { font-size: 1.15rem; }

.pick-title { font-size: 1.25rem; margin: 0 0 1rem; }
.pick-game { padding: 1.5rem 0 1rem; }

/* Big game tiles */
.game-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.game-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 0.8rem; align-items: center;
  padding: 0.85rem; min-height: 76px;
  background: var(--ink-1); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  text-decoration: none; transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.game-tile:hover { transform: translateY(-2px); border-color: var(--mark, var(--line)); background: color-mix(in srgb, var(--mark, var(--ink-2)) 14%, var(--ink-1)); }
.game-tile-mark {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--mark) 100%, #fff 18%), var(--mark));
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 0.98rem; letter-spacing: -0.02em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.game-tile-mark svg { width: 24px; height: 24px; fill: currentColor; }
.game-tile.is-all { --mark: #4b4380; }
.game-tile-name { font-weight: 700; line-height: 1.2; align-self: end; }
.game-tile-from { color: var(--faint); font-size: 0.85rem; align-self: start; }
.game-tile-from b { color: var(--tag); font-variant-numeric: tabular-nums; }

/* Home: one ready-to-buy deal per card */
.quick-deals { padding: 1.5rem 0 1rem; }
.deal-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.deal-card { display: grid; gap: 0.5rem; align-content: start; padding: 1rem 1.1rem; background: var(--ink-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.deal-what { color: var(--violet); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
.deal-title { margin: 0; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.deal-price { margin: 0.2rem 0; }
.deal-who { margin: 0; display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.85rem; flex-wrap: wrap; }
.deal-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.3rem; }
.deal-actions .buy { background: var(--tag); color: var(--tag-ink); border-color: var(--tag); }
.deal-actions .buy:hover { background: #ffdc72; }
.deal-more { color: var(--muted); font-size: 0.88rem; }
.promise { padding: 1.5rem 0 2.5rem; color: var(--muted); text-align: center; }
.promise b { color: var(--tag); }

/* Game page: category tiles */
.simple-head { margin-bottom: 1.2rem; }
.simple-head .head-meta { font-size: 1.08rem; color: var(--muted); }
.cat-tiles {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cat-tile {
  position: relative; display: grid; gap: 0.45rem; align-content: start; height: 100%;
  padding: 1.05rem 1.1rem 0.95rem; overflow: hidden;
  background: var(--ink-1); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  text-decoration: none; transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cat-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tier); }
.cat-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tier) 60%, var(--line)); background: color-mix(in srgb, var(--tier) 7%, var(--ink-1)); }
.cat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tier); background: color-mix(in srgb, var(--tier) 15%, transparent); }
.cat-icon .icon { width: 24px; height: 24px; stroke-width: 1.7; }
.cat-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.cat-hint { color: var(--muted); font-size: 0.88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.4em; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; }
.cat-count { color: var(--faint); font-size: 0.85rem; }
.cat-from { color: var(--faint); font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.cat-tiles.is-games .cat-tile { padding: 0.85rem 1rem; }
.cat-tiles.is-games .cat-icon { width: 36px; height: 36px; }

/* Category page */
.back { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.8rem; color: var(--violet); font-weight: 600; text-decoration: none; }
.back:hover { color: var(--text); }
.pick {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center;
  margin: 1rem 0 1.4rem; padding: 1.2rem 1.3rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tag) 10%, var(--ink-1)), var(--ink-1) 60%);
  border: 1.5px solid color-mix(in srgb, var(--tag) 55%, var(--line-soft)); border-radius: var(--r-lg);
}
.pick:not(:has(.pick-pic)) { grid-template-columns: 1fr auto; }
.pick-main { min-width: 0; display: grid; gap: 0.35rem; }
.pick-label { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--tag); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
.pick-label svg { width: 16px; height: 16px; fill: currentColor; }
.pick-title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.pick-title:hover { color: var(--tag); }
.pick-why { margin: 0; color: var(--muted); font-size: 0.9rem; }
.pick-seller { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; }
.pick-buy { display: grid; justify-items: end; gap: 0.45rem; }
.buy.big { padding: 0.75rem 1.4rem; font-size: 1.02rem; background: var(--tag); color: var(--tag-ink); border-color: var(--tag); font-weight: 700; }
.buy.big:hover { background: #ffdc72; color: var(--tag-ink); border-color: #ffdc72; }
.sold { color: var(--faint); font-size: 0.82rem; }
.offer-seller { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.offer.no-pic { grid-template-columns: 1fr auto; }
.offer.is-top { box-shadow: inset 3px 0 0 var(--tag); }
.toolbar-note { color: var(--faint); }
.sub-label { color: var(--muted); }

@media (max-width: 640px) {
  .game-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .game-tile { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0.35rem; padding: 0.8rem; }
  .game-tile-mark { grid-row: auto; width: 42px; height: 42px; font-size: 0.85rem; }
  .cat-tiles { grid-template-columns: 1fr; }
  .cat-tile { grid-template-columns: auto 1fr; column-gap: 0.8rem; }
  .cat-icon { grid-row: 1 / 3; }
  .cat-foot { grid-column: 1 / -1; }
  .pick, .pick:not(:has(.pick-pic)) { grid-template-columns: 1fr; }
  .pick-pic { display: none; }
  .pick-buy { justify-items: stretch; grid-template-columns: auto 1fr; align-items: center; }
  .pick-buy .buy { grid-column: 1 / -1; }
  .offer.no-pic { grid-template-columns: 1fr; }
}
.buy.big { gap: 0.45rem; }
.more-cats { margin-top: 1.8rem; }
.more-cats-title { font-size: 1.05rem; margin: 0 0 0.6rem; }
.more-cats ul { flex-wrap: wrap; overflow: visible; }
@media (max-width: 640px) {
  .scan-done { display: none; }
  .box-page-head .head-icon { display: none; }
  .game-tile { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0; padding: 0.65rem; min-height: 0; }
  .game-tile-mark { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; font-size: 0.78rem; }
  .game-tile-name { font-size: 0.92rem; }
  .game-tile-from { font-size: 0.78rem; }
  .ask { padding-top: 1.8rem; }
}

/* About, contact, privacy, disclosure */
.info { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 2.5rem; padding: 2.5rem 0 3rem; }
.info-nav { display: grid; gap: 0.25rem; align-content: start; position: sticky; top: 1rem; }
.info-nav a { padding: 0.5rem 0.8rem; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 600; }
.info-nav a:hover { background: var(--ink-1); color: var(--text); }
.info-nav a[aria-current="page"] { background: var(--ink-2); color: var(--text); }
.info-body h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 0.8rem; letter-spacing: -0.02em; }
.info-body h2 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
.info-body p, .info-body li { color: var(--muted); line-height: 1.65; }
.info-body b { color: var(--text); }
.info-body a { color: var(--violet); }
.info-body ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.info-lede { font-size: 1.15rem; color: var(--text) !important; }
.info-mail { margin: 1.5rem 0; }
.info-mail .buy { color: var(--tag-ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 1.2rem 0 2rem; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 0.88rem; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.foot-links span { margin-left: auto; }
@media (max-width: 760px) {
  .info { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.5rem; }
  .info-nav { position: static; display: flex; flex-wrap: wrap; }
  .foot-links span { margin-left: 0; width: 100%; }
}

/* Game pictures (app/gameart.py). Square icons as they are; wide Steam art is cropped to fit. */
.game-tile-mark.is-art { padding: 0; background: var(--ink-2); object-fit: cover; box-shadow: none; }
.head-art {
  width: 72px; height: 72px; border-radius: 18px; object-fit: cover; flex-shrink: 0;
  background: var(--ink-2); box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.head-art.is-wide { width: 152px; height: 72px; }
.simple-head.has-art { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.1rem; }
.cat-icon.is-art { padding: 0; object-fit: cover; background: var(--ink-2); }
.cat-tiles.is-games .cat-icon.is-art { width: 44px; height: 44px; }
.back-art { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.thumb.is-art { padding: 0; overflow: hidden; background: var(--ink-2); }
.thumb.is-art img { width: 100%; height: 100%; object-fit: cover; }
.dir-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-bottom: 1.2rem; }
.dir-tools .dir-filter { margin-bottom: 0; }
.dir-art a { display: flex; align-items: center; gap: 0.7rem; }
.dir-art a > span:not(.dir-pic) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-pic { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--ink-2); }
.dir-pic.is-mark {
  display: inline-grid; place-items: center; background: var(--mark); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 0.72rem;
}
@media (max-width: 640px) {
  .head-art { width: 56px; height: 56px; border-radius: 14px; }
  .head-art.is-wide { width: 118px; height: 56px; }
  .game-tile-mark.is-art { width: 38px; height: 38px; }
}
.dir-more { margin: 1.5rem 0 0; color: var(--muted); }
.dir-more a { color: var(--violet); }
.hot {
  position: absolute; top: 1rem; right: 1rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--legendary) 18%, transparent); color: var(--legendary);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
}

/* Optional region filter */
.region-pick { margin: 0 0 1rem; }
.region-pick summary {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.9rem;
}
.region-pick summary::-webkit-details-marker { display: none; }
.region-pick summary b { color: var(--text); }
.region-pick summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.region-pick[open] summary { border-color: var(--violet); }
.region-hint { color: var(--faint); font-size: 0.82rem; }
.region-pick ul { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.7rem 0 0; padding: 0; }
.region-note { margin: 0.6rem 0 0; color: var(--faint); font-size: 0.85rem; }

/* The same thing listed again: folded under the cheapest */
.same { font-size: 0.86rem; }
.same summary { cursor: pointer; color: var(--violet); list-style: none; }
.same summary::-webkit-details-marker { display: none; }
.same summary::before { content: "+ "; }
.same[open] summary::before { content: "− "; }
.same ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; max-width: 520px; }
.same li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; align-items: center; padding: 0.3rem 0.6rem; border-radius: var(--r-sm); background: var(--ink-2); }
.same-who { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--muted); }
.same-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.same li b { font-variant-numeric: tabular-nums; }
.same li a { color: var(--violet); font-weight: 600; }
.same-more { background: none !important; color: var(--faint); }
.same li b small { color: var(--faint); font-weight: 500; margin-left: 0.3rem; }

/* Most bought: categories ranked by sold volume */
.most-bought { padding: 1.5rem 0 0.5rem; }
.most-bought .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.most-bought .pick-title { margin-bottom: 0.2rem; }
.pick-sub { margin: 0 0 1rem; color: var(--faint); font-size: 0.9rem; }
.vol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
.vol-list.is-full { grid-template-columns: 1fr; max-width: 820px; }
.vol-row {
  position: relative; display: grid; grid-template-columns: 1.8rem auto 1fr auto; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.9rem 0.85rem; background: var(--ink-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); text-decoration: none; overflow: hidden;
}
.vol-row:hover { border-color: var(--line); background: var(--ink-2); }
.vol-rank { color: var(--faint); font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }
.vol-list li:nth-child(-n+3) .vol-rank { color: var(--tag); }
.vol-pic { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; background: var(--ink-2); }
.vol-pic.is-mark { display: grid; place-items: center; background: var(--mark); color: #fff; font-family: var(--display); font-weight: 800; font-size: 0.75rem; }
.vol-what { min-width: 0; display: grid; }
.vol-what b, .vol-what small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-what small { color: var(--muted); font-size: 0.84rem; }
.vol-amount { display: grid; justify-items: end; }
.vol-amount b { color: var(--tag); font-family: var(--display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.vol-amount small { color: var(--faint); font-size: 0.78rem; white-space: nowrap; }
.vol-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.vol-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--tag), color-mix(in srgb, var(--tag) 30%, transparent)); border-radius: 0 3px 3px 0; }
.vol-list li[hidden] { display: none; }
@media (max-width: 760px) {
  .vol-list { grid-template-columns: 1fr; }
  .most-bought .section-head { flex-direction: column; gap: 0.1rem; }
}
@media (max-width: 760px) {
  .vol-what b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.bar-nav { display: flex; gap: 1.2rem; }

/* ================================================================ offer pictures
   Every offer gets a picture slot of the same size: the seller's picture, or a card
   in the game's colours with the offer's key fact ("92 skins", "2 050 VP"). */
.visual {
  position: relative; display: block; flex-shrink: 0; padding: 0; border: 0; overflow: hidden;
  border-radius: 14px; background: var(--ink-2); cursor: default;
  width: var(--vs, 84px); height: var(--vs, 84px);
}
button.visual { cursor: zoom-in; }
.visual.is-sm { --vs: 52px; border-radius: 11px; }
.visual.is-md { --vs: 84px; }
.visual.is-lg { --vs: 104px; border-radius: 16px; }
.visual.is-xl { --vs: 168px; border-radius: 20px; }
.visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.visual.is-skin .visual-img { object-fit: contain; padding: 6%; background: radial-gradient(circle at 50% 35%, #3a2f7a, var(--ink-2)); }
.visual .thumb-count { z-index: 2; }

.poster {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.05rem;
  padding: 0.35rem; text-align: center; color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mark) 55%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(0,0,0,.45), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--mark) 80%, #1b1830), color-mix(in srgb, var(--mark) 35%, #13111f));
}
.poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px);
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}
.poster-logo {
  position: absolute; top: 7%; left: 7%; width: 24%; height: 24%; border-radius: 22%;
  object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,.35); z-index: 1;
}
.poster-logo.is-letters {
  display: grid; place-items: center; width: auto; min-width: 24%; padding: 0 0.2em; height: 24%;
  background: rgba(0,0,0,.28); font-family: var(--display); font-weight: 800; font-size: calc(var(--vs, 84px) * 0.11);
}
.poster-big {
  position: relative; z-index: 1; font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: calc(var(--vs, 84px) * 0.27); letter-spacing: -0.03em; text-shadow: 0 2px 10px rgba(0,0,0,.35);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 12%;
}
.poster-small {
  position: relative; z-index: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: max(8px, calc(var(--vs, 84px) * 0.105)); opacity: 0.85; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.poster-icon { position: relative; z-index: 1; margin-top: 14%; }
.poster-icon .icon { width: calc(var(--vs, 84px) * 0.32); height: calc(var(--vs, 84px) * 0.32); stroke-width: 1.6; }
.visual.is-sm .poster-small, .visual.is-sm .poster-logo { display: none; }
.visual.is-sm .poster-big { margin-top: 0; font-size: 15px; }
.visual.is-sm .poster-icon { margin-top: 0; }

/* Key facts read from the title */
.facts { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.facts li {
  padding: 0.12rem 0.5rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
  background: var(--ink-2); color: var(--muted); border: 1px solid var(--line-soft); white-space: nowrap;
}
.facts li:first-child { color: var(--text); border-color: color-mix(in srgb, var(--violet) 40%, var(--line-soft)); }

/* ================================================================ offer rows: one grid for all */
.listing { display: grid; gap: 0.6rem; }
.offer, .offer.no-pic {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 200px; gap: 1.1rem; align-items: center;
  padding: 0.85rem 1rem; min-height: 116px;
}
.offer-visual { display: block; text-decoration: none; }
.offer-main { gap: 0.45rem; align-content: center; }
.offer-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.35; font-size: 1rem;
}
.offer-buy { min-width: 0; width: 100%; justify-items: end; align-content: center; gap: 0.35rem; }
.offer-buy .buy { width: 100%; justify-content: center; margin-top: 0.15rem; }
.offer-seller { gap: 0.5rem; font-size: 0.88rem; }
.offer .skin-strip { margin: 0; }

.pick { grid-template-columns: 104px minmax(0, 1fr) auto; }
.pick-pic { display: block; text-decoration: none; }

/* ================================================================ offer page */
.product-page { padding-top: 1.2rem; }
.product-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; margin-bottom: 1.2rem; }
.big-back {
  margin: 0; padding: 0.5rem 1rem 0.5rem 0.8rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--ink-1); color: var(--text); font-weight: 700;
}
.big-back:hover { border-color: var(--violet); color: var(--text); }
.product-nav .crumbs { margin: 0; }
.product-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.product-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; align-items: start; margin: 0; }
.product-text { display: grid; gap: 0.6rem; min-width: 0; }
.product-kicker { margin: 0; color: var(--violet); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.product-text h1 {
  margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.product-text .head-meta { margin: 0; color: var(--faint); font-size: 0.9rem; }
.buy-panel {
  position: sticky; top: 1rem; display: grid; gap: 0.6rem; justify-items: start;
  padding: 1.2rem; border-radius: var(--r-lg); background: var(--ink-1);
  border: 1.5px solid color-mix(in srgb, var(--tag) 45%, var(--line-soft));
}
.buy-panel .price-caption { margin: 0; color: var(--faint); font-size: 0.85rem; }
.buy-panel .price-sub { margin: 0; text-align: left; }
.buy-panel .buy.big { width: 100%; justify-content: center; }
.buy-seller { font-size: 0.92rem; }
.buy-note { margin: 0; color: var(--faint); font-size: 0.78rem; line-height: 1.45; }
.product .gallery, .product .skins-block { margin-top: 2rem; }

.mini-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.mini-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center;
  padding: 0.6rem 0.8rem; border-radius: var(--r-md); background: var(--ink-1); border: 1px solid var(--line-soft); text-decoration: none;
}
.mini-row:hover { border-color: var(--line); background: var(--ink-2); }
.mini-main { display: grid; gap: 0.2rem; min-width: 0; }
.mini-title { font-weight: 600; font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-meta { display: flex; align-items: center; gap: 0.4rem; color: var(--faint); font-size: 0.8rem; min-width: 0; }
.mini-price { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .product-top { grid-template-columns: 1fr; }
  .buy-panel { position: static; }
  .mini-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offer, .offer.no-pic { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "pic main" "buy buy"; gap: 0.8rem; }
  .offer-visual { grid-area: pic; align-self: start; }
  .offer-visual .visual { --vs: 72px; }
  .offer-main { grid-area: main; }
  .offer-buy { grid-area: buy; grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; }
  .offer-buy .buy { width: auto; justify-self: end; margin: 0; }
  .pick { grid-template-columns: 1fr; }
  .pick-pic { display: none; }
  .product-head { grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; }
  .product-visual .visual { --vs: 96px; }
  .product-text h1 { font-size: 1.25rem; -webkit-line-clamp: 5; }
}

/* ================================================================ round 49: clear offer rows + "what you're buying" */
/* Kind of offer, as a small coloured tag: Account / Top-up / Code / Boost / Gold / Item. */
.type-tag {
  display: inline-flex; align-items: center; flex: none;
  padding: 0.12rem 0.5rem; border-radius: 6px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
  color: var(--tc, var(--violet)); background: color-mix(in srgb, var(--tc, var(--violet)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, var(--violet)) 40%, transparent);
}
.type-tag.is-account { --tc: #7fb2ff; }
.type-tag.is-boosting { --tc: #ff9b6b; }
.type-tag.is-points { --tc: var(--tag); }
.type-tag.is-currency { --tc: #ffc061; }
.type-tag.is-gift_card { --tc: var(--good); }
.type-tag.is-item { --tc: #d39bff; }

.offer-kicker {
  display: flex; align-items: center; gap: 0.5rem; margin: 0; min-width: 0;
  color: var(--muted); font-size: 0.82rem; font-weight: 600;
}
.offer-kicker .kicker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Row: picture | what it is | key facts | price + buy. Every row uses the same columns, so they line up. */
.offer, .offer.no-pic {
  grid-template-columns: 84px minmax(0, 1fr) 210px 168px;
  grid-template-areas: "pic main cols buy";
  align-items: center; gap: 1.1rem; padding: 0.9rem 1rem;
}
.offer-visual { grid-area: pic; align-self: start; }
.offer-main { grid-area: main; }
.offer-cols { grid-area: cols; }
.offer-buy { grid-area: buy; display: grid; justify-items: stretch; text-align: right; gap: 0.3rem; }
.offer-buy .price-tag { justify-self: end; }
.offer-buy .price-sub, .offer-buy .min-order { justify-self: end; text-align: right; }
.offer-buy .buy { width: 100%; justify-content: center; margin-top: 0.25rem; }

.offer-cols {
  margin: 0; display: grid; gap: 0.35rem; align-self: center;
  padding: 0.55rem 0.75rem; border-radius: var(--r-md);
  background: var(--ink-0); border: 1px solid var(--line-soft);
}
.offer-cols > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.offer-cols dt { margin: 0; color: var(--faint); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.offer-cols dd { margin: 0; color: var(--text); font-size: 0.88rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-cols .is-empty dd { color: var(--faint); font-weight: 500; font-style: italic; }

/* Laptops: facts go under the title. */
@media (max-width: 1100px) {
  .offer, .offer.no-pic {
    grid-template-columns: 84px minmax(0, 1fr) 168px;
    grid-template-areas: "pic main buy" "pic cols buy";
    row-gap: 0.7rem;
  }
  .offer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .offer-cols > div { grid-template-columns: 1fr; gap: 0.1rem; }
}
/* Phones: picture + title, then the facts strip, then price and button on one line. */
@media (max-width: 640px) {
  .offer, .offer.no-pic {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "pic main" "cols cols" "buy buy";
    gap: 0.75rem; padding: 0.85rem;
  }
  .offer-cols { padding: 0.5rem 0.6rem; gap: 0.4rem; }
  .offer-cols dt { font-size: 0.66rem; }
  .offer-cols dd { font-size: 0.82rem; white-space: normal; }
  .offer-buy { grid-template-columns: auto 1fr; align-items: center; text-align: left; }
  .offer-buy .price-tag { justify-self: start; }
  .offer-buy .price-sub, .offer-buy .min-order { grid-column: 1; justify-self: start; text-align: left; }
  .offer-buy .buy { grid-column: 2; grid-row: 1 / span 3; width: auto; justify-self: end; margin: 0; }
}

/* Offer page: the header and the "what you're buying" box share the left column, the buy panel stays right. */
.product-top { grid-template-areas: "head buy" "what buy"; row-gap: 1.3rem; }
.product-head { grid-area: head; }
.what-box { grid-area: what; }
.buy-panel { grid-area: buy; }
.product-kicker { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.product-kicker .type-tag { font-size: 0.72rem; }
.product-text h1 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.25; -webkit-line-clamp: 3; }

.what-box {
  display: grid; gap: 0.8rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg);
  background: var(--ink-1); border: 1px solid var(--line-soft);
}
.what-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.what-head h2 { margin: 0; font-size: 1.05rem; }
.what-type { margin: 0; color: var(--violet); font-weight: 700; font-size: 0.9rem; }
.what-help { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.spec-grid {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem;
}
.spec-grid > div {
  display: grid; gap: 0.15rem; padding: 0.55rem 0.75rem; border-radius: var(--r-md);
  background: var(--ink-0); border: 1px solid var(--line-soft);
}
.spec-grid dt { margin: 0; color: var(--faint); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.spec-grid dd { margin: 0; font-weight: 700; font-size: 0.98rem; overflow-wrap: anywhere; }
.spec-grid .is-none dd { color: var(--faint); font-weight: 500; font-style: italic; }
.what-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.what-extra > span { color: var(--faint); font-size: 0.8rem; }
.what-extra .facts { margin: 0; }
.what-note { margin: 0; color: var(--faint); font-size: 0.78rem; }
.buy-seller { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.buy-sales { color: var(--faint); font-size: 0.82rem; }
.gallery li.is-broken { display: none; }

@media (max-width: 900px) {
  .product-top { grid-template-columns: 1fr; grid-template-areas: "head" "buy" "what"; }
}
/* Longer words on the picture card ("Bronze", "Diamond", "Platinum") shrink to fit instead of being cut off. */
.poster-big.is-long { font-size: calc(var(--vs, 84px) * 0.2); }
.poster-big.is-longer { font-size: calc(var(--vs, 84px) * 0.155); }
.visual.is-sm .poster-big.is-long, .visual.is-sm .poster-big.is-longer { font-size: 11px; }
/* Fact values may wrap to a second line rather than being cut off. */
.offer-cols dd { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* "Opening G2G…" page, shown while the affiliate link for a G2G page is being made */
.g2g-wait { display: grid; place-items: center; min-height: 55vh; padding-block: 2rem; }
.g2g-wait-card {
  display: grid; justify-items: center; gap: 0.8rem; max-width: 460px; text-align: center;
  padding: 2rem 1.6rem; border-radius: var(--r-lg); background: var(--ink-1); border: 1px solid var(--line-soft);
}
.g2g-wait-card h1 { margin: 0; font-size: 1.4rem; }
.g2g-wait-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.g2g-wait-actions { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.g2g-wait-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--tag); animation: g2g-spin 0.9s linear infinite;
}
@keyframes g2g-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g2g-wait-spinner { animation-duration: 3s; } }
.g2g-wait-actions[hidden], .g2g-wait-spinner[hidden] { display: none; }

/* "Compare on G2A": G2A's own search for this game or product (link only, with our tag) */
.g2a-check {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; align-self: center;
  padding: 0.45rem 0.85rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 0.88rem; color: var(--text);
  background: var(--ink-1); border: 1px solid color-mix(in srgb, #f05f00 45%, var(--line-soft));
}
.g2a-check:hover { border-color: #f05f00; background: var(--ink-2); color: var(--text); }
.g2a-check img { display: block; }
.box-page-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 1rem; align-items: center; }
.g2a-check.is-panel { width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .box-page-head { grid-template-columns: auto minmax(0, 1fr); }
  .box-page-head .g2a-check { grid-column: 1 / -1; margin-top: 0.6rem; }
}

/* /status */
.status-page { padding-block: 1.5rem 3rem; display: grid; gap: 1.2rem; }
.status-head h1 { margin: 0 0 0.4rem; }
.status-head p { margin: 0.2rem 0; }
.st-good { color: var(--good); font-weight: 700; }
.st-bad { color: var(--bad); font-weight: 700; }
.st-card { padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: var(--ink-1); border: 1px solid var(--line-soft); min-width: 0; }
.st-card h2 { margin: 0 0 0.7rem; font-size: 1.05rem; }
.st-card .fine { margin-top: -0.3rem; }
.st-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.st-table th { text-align: left; color: var(--faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding: 0.4rem 0.5rem; }
.st-table td { padding: 0.5rem; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.st-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.st-pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }
.st-pill.good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.st-pill.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.st-bar { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: var(--ink-0); vertical-align: middle; overflow: hidden; margin-right: 0.35rem; }
.st-bar span { display: block; height: 100%; background: var(--good); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.st-facts { margin: 0; display: grid; gap: 0.45rem; }
.st-facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.6rem; }
.st-facts dt { color: var(--faint); font-size: 0.85rem; }
.st-facts dd { margin: 0; font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
@media (max-width: 640px) { .st-table { font-size: 0.8rem; } .st-bar { width: 44px; } .st-table th:nth-child(5), .st-table td:nth-child(5) { display: none; } }

/* ================================================================ round 50: calmer, simpler */
/* Header: logo, search, links; the shop row sits under the search bar. */
.site-header { background: rgba(19, 17, 31, 0.92); }
.bar { min-height: 4rem; }
.bar:has(.shop-row) {
  display: grid; grid-template-columns: auto minmax(0, 600px) 1fr; column-gap: 1.25rem; row-gap: 0.55rem;
  padding: 0.75rem 0 0.7rem;
}
.bar .brand { grid-column: 1; grid-row: 1; }
.bar .bar-search { grid-column: 2; grid-row: 1; max-width: none; }
.bar .bar-nav { grid-column: 3; grid-row: 1; justify-self: end; }
.bar .shop-row { grid-column: 2 / 4; grid-row: 2; min-width: 0; }
.shop-bar { gap: 0.4rem; margin-left: 0; font-size: 0.8rem; }
.shop-btn { padding: 0.25rem 0.65rem; line-height: 1; min-height: 28px; background: var(--ink-1); }
.shop-btn img, .shop-btn .shop-dot { flex: none; display: block; }
.ask .shop-bar { justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.ask h1 { margin-bottom: 1.2rem; }

/* Results: no scan bar, compact page head */
.results { padding-top: 1.2rem; }
.box-page-head { margin-bottom: 1.2rem; }
.box-page-head h1 { line-height: 1.05; }
.back { margin-bottom: 0.8rem; }

/* Filter row: sort on the left, region dropdown on the right */
.toolbar { justify-content: space-between; align-items: center; margin: 0 0 0.9rem; }
.filter {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto;
  padding: 0 0.4rem 0 0.75rem; height: 40px; border-radius: 999px;
  background: var(--ink-1); border: 1px solid var(--line-soft); color: var(--muted);
}
.filter:hover, .filter:focus-within { border-color: var(--violet); }
.filter svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.filter select {
  appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent;
  color: var(--text); font: inherit; font-weight: 600; font-size: 0.9rem; height: 100%;
  padding: 0 1.6rem 0 0; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.filter select option { background: var(--ink-1); color: var(--text); }
.seg a { display: inline-flex; align-items: center; min-height: 34px; }

/* Sub filters: one quiet row of chips */
.sub-strip { margin: 0 0 0.9rem; }
.sub-strip ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sub-strip ul::-webkit-scrollbar { display: none; }
.sub { display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1; min-height: 32px; white-space: nowrap; }

/* Offer rows: picture | title, facts, seller | price + button */
.offer, .offer.no-pic {
  grid-template-columns: 84px minmax(0, 1fr) 176px;
  grid-template-areas: "pic main buy";
  align-items: center; gap: 1.1rem; padding: 0.9rem 1rem; min-height: 0;
}
.offer-visual { align-self: center; }
.offer-main { gap: 0.4rem; }
.offer-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; }
.offer-facts > div { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; }
.offer-facts dt { margin: 0; color: var(--faint); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.offer-facts dd { margin: 0; color: var(--text); font-size: 0.88rem; font-weight: 600; }
.offer-buy { gap: 0.25rem; }
.offer-buy .price-sub { font-size: 0.8rem; line-height: 1.3; }
.offer-buy .buy { min-height: 40px; }
.same summary { color: var(--muted); font-size: 0.85rem; }
@media (max-width: 1100px) {
  .offer, .offer.no-pic { grid-template-columns: 84px minmax(0, 1fr) 168px; grid-template-areas: "pic main buy"; }
}
@media (max-width: 640px) {
  .offer, .offer.no-pic {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas: "pic main" "buy buy";
    gap: 0.7rem 0.8rem; padding: 0.8rem;
  }
  .offer-visual { align-self: start; }
  .offer-visual .visual { --vs: 64px; }
  .offer-buy { grid-template-columns: auto 1fr; align-items: center; text-align: left;
    padding-top: 0.7rem; border-top: 1px solid var(--line-soft); }
  .offer-buy .price-tag { justify-self: start; }
  .offer-buy .price-sub, .offer-buy .min-order { grid-column: 1; justify-self: start; text-align: left; }
  .offer-buy .buy { grid-column: 2; grid-row: 1 / span 3; width: auto; justify-self: end; align-self: center; margin: 0; }
  .toolbar { gap: 0.6rem; }
  .filter { margin-left: 0; }
}

/* Pick card */
.pick-why { margin: 0; color: var(--muted); font-size: 0.88rem; }
.pick-buy { align-content: center; }

/* Category tiles: equal heights, footer pinned to the bottom */
.cat-tiles { align-items: stretch; }
.cat-tiles > li { display: flex; }
@media (min-width: 641px) { .cat-tile { display: flex; flex-direction: column; width: 100%; } }
@media (max-width: 640px) { .cat-tile { width: 100%; } .cat-tile .hot { grid-column: 2; justify-self: start; } }
.cat-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cat-from { display: inline-flex; align-items: center; gap: 0.4rem; }
.cat-count { line-height: 1; }
.simple-head { margin-bottom: 1.2rem; align-items: center; }

/* Footer: one short line */
.foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; grid-template-columns: none; padding-top: 2rem; }
.foot p { margin: 0; }
.foot-brand { font-size: 1rem; }
@media (max-width: 760px) {
  .bar:has(.shop-row) { grid-template-columns: auto 1fr; row-gap: 0.55rem; padding: 0.6rem 0; }
  .bar:has(.shop-row) .bar-nav { grid-column: 2; grid-row: 1; }
  .bar:has(.shop-row) .bar-search { grid-column: 1 / -1; grid-row: 2; }
  .bar:has(.shop-row) .shop-row { grid-column: 1 / -1; grid-row: 3; }
}
.site-footer { margin-top: 0; padding: 1.4rem 0 1.6rem; }
.foot { padding-top: 0; }
.foot-links { padding: 0.9rem 0 0; margin-top: 0.9rem; }
.results { padding-top: 1.6rem; }
.bar-nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .bar-nav { gap: 0.9rem; font-size: 0.9rem; }
  .toolbar { flex-wrap: wrap; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg a { white-space: nowrap; }
  .pick-buy { justify-items: stretch; }
  .pick-buy .price-sub { text-align: left; }
}
.game-tiles > li { display: flex; }
.game-tile { width: 100%; }
.foot p { max-width: none; }
@media (max-width: 640px) {
  .bar-nav a[href="/popular"] { display: none; }
}
.section-head { align-items: center; }
.section-head h2 { margin: 0; }
.ask-in { max-width: 880px; }
.ask .big-search { max-width: 760px; margin-inline: auto; }
.section-head .more { margin: 0; padding: 0; }
.most-bought .section-head { align-items: center; margin-bottom: 1rem; }
.pick-game .pick-title, .most-bought .section-head h2, .quick-deals .pick-title { font-size: 1.35rem; margin: 0 0 1rem; }
.most-bought .section-head h2 { margin: 0; }
@media (max-width: 760px) { .most-bought .section-head { flex-direction: row; } }
.related .section-head { align-items: center; margin-bottom: 1rem; } .related .section-head h2 { margin: 0; }