/* ==========================================================
   GameSourceCode - neon arcade storefront
   ========================================================== */

:root {
  --bg-0: #06060d;
  --bg-1: #0a0915;
  --bg-2: #0e0c1c;

  --cy: #2ff3ff;
  --mg: #ff2d78;
  --vi: #8b5cff;
  --lime: #9dff5c;

  --ink: rgba(255, 255, 255, .95);
  --ink-2: rgba(255, 255, 255, .60);
  --ink-3: rgba(255, 255, 255, .38);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .06);

  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --shell: 1560px;
  --pad: 34px;

  /* Orbitron and Rajdhani are Latin only. Each of the other three scripts gets a
     face that actually carries its glyphs, swapped in per language below. */
  --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-body: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[lang="zh"] {
  --font-display: 'Noto Sans SC', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', system-ui, sans-serif;
}
html[lang="ar"] {
  --font-display: 'Cairo', system-ui, sans-serif;
  --font-body: 'Cairo', system-ui, sans-serif;
}
html[lang="ru"] {
  --font-display: 'Exo 2', system-ui, sans-serif;
  --font-body: 'Exo 2', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.05;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--cy); color: #04040a; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #06060d; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--vi), var(--cy));
  border-radius: 99px;
  border: 3px solid #06060d;
}

/* ==========================================================
   atmosphere
   ========================================================== */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.atmos-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(120, 160, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 160, 255, .07) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 72%);
  animation: gridDrift 34s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 62px 62px, 62px 62px; }
}

.atmos-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  animation: orbFloat 20s ease-in-out infinite;
}
.orb-a {
  width: 46vw; height: 46vw; top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(47, 243, 255, .40), transparent 68%);
}
.orb-b {
  width: 40vw; height: 40vw; top: 6vw; right: -10vw;
  background: radial-gradient(circle, rgba(255, 45, 120, .34), transparent 68%);
  animation-delay: -7s;
}
.orb-c {
  width: 52vw; height: 52vw; top: 62vh; left: 24vw;
  background: radial-gradient(circle, rgba(139, 92, 255, .26), transparent 70%);
  animation-delay: -13s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.5vw, 3vh, 0) scale(1.09); }
}

.atmos-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.atmos-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 40%, transparent 40%, rgba(3, 3, 8, .82) 100%);
}

/* ==========================================================
   nav
   ========================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 26px;
  padding: 15px var(--pad);
  background: rgba(6, 6, 13, .55);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck {
  background: rgba(6, 6, 13, .86);
  border-bottom-color: var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; margin-inline-end: auto; }
.brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  color: #05050c;
  background: linear-gradient(135deg, var(--cy), var(--vi) 55%, var(--mg));
  box-shadow: 0 0 22px -4px rgba(47, 243, 255, .6);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-accent {
  background: linear-gradient(100deg, var(--cy), var(--vi));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.nav-links { display: flex; gap: 4px; }
.nav-links a {
  position: relative;
  padding: 9px 15px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--panel-2); }

/* ---------- language switcher ---------- */
.lang-switch {
  display: flex; gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.lang-pill {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .22s var(--ease), background .22s var(--ease);
}
.lang-pill:hover { color: var(--ink); background: var(--panel-2); }
.lang-pill.is-on {
  color: #05050c;
  background: linear-gradient(100deg, var(--cy), var(--vi));
  box-shadow: 0 0 18px -6px rgba(47, 243, 255, .7);
}

/* ==========================================================
   buttons
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease), background .28s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); background: var(--panel-2); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; }

.btn-primary {
  border-color: transparent;
  color: #05050c;
  background: linear-gradient(100deg, var(--cy), #7ee8ff 40%, var(--vi));
  box-shadow: 0 0 26px -6px rgba(47, 243, 255, .55);
}
.btn-primary:hover { box-shadow: 0 8px 34px -6px rgba(47, 243, 255, .7); color: #05050c; }

.btn-ghost { background: transparent; }

.btn-discord {
  border-color: transparent; color: #fff;
  background: linear-gradient(100deg, #5865f2, #7d87ff);
  box-shadow: 0 0 24px -8px rgba(88, 101, 242, .8);
}
.btn-telegram {
  border-color: transparent; color: #04121a;
  background: linear-gradient(100deg, #2aabee, #6fd2ff);
  box-shadow: 0 0 24px -8px rgba(42, 171, 238, .8);
}
.btn-discord:hover, .btn-telegram:hover { filter: brightness(1.08); }

.btn-copy {
  padding: 8px 15px; font-size: 13px;
  background: transparent;
  color: var(--ink-2);
}
.btn-copy:hover { color: var(--ink); }
.btn-copy.is-done { color: var(--lime); border-color: rgba(157, 255, 92, .5); }

.btn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #05050c;
  animation: dotPulse 1.9s ease-in-out infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ==========================================================
   hero
   ========================================================== */
main { position: relative; z-index: 1; }

.hero {
  display: grid; place-items: center;
  min-height: 92vh;
  padding: 118px var(--pad) 72px;
  text-align: center;
}
/* wide enough that "GAME SOURCE" stays on one line at the capped size below */
.hero-inner { width: 100%; max-width: 1180px; }

.tagline-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 17px 7px 13px;
  margin-bottom: 30px;
  border: 1px solid rgba(47, 243, 255, .28);
  border-radius: 99px;
  background: rgba(47, 243, 255, .07);
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #a8f4ff;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(157, 255, 92, .7);
  animation: pulseRing 2.1s ease-out infinite;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(157, 255, 92, .6); }
  70%  { box-shadow: 0 0 0 11px rgba(157, 255, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(157, 255, 92, 0); }
}

/* "GAME SOURCE" measures 8.41x its font-size in Orbitron 900. At 8.2vw that is
   67% of the viewport, always inside the container, so the line never wraps and
   the gradient stays on one baseline. */
.hero-title {
  font-size: clamp(30px, 8.2vw, 124px);
  font-weight: 900;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.hero-line { display: block; white-space: nowrap; }
.hero-line:first-child {
  background: linear-gradient(178deg, #ffffff 22%, rgba(255, 255, 255, .42));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-line-2 {
  background: linear-gradient(96deg, var(--cy), var(--vi) 48%, var(--mg));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 40px rgba(139, 92, 255, .45));
}

.hero-sub {
  max-width: 620px;
  margin: 24px auto 0;
  font-size: 19px;
  color: var(--ink-2);
}

/* ---------- search ---------- */
.search {
  position: relative;
  display: flex; align-items: center;
  max-width: 660px;
  margin: 40px auto 0;
  padding: 5px 6px;
  padding-inline-start: 18px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: rgba(10, 9, 21, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px -22px rgba(0, 0, 0, .9);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.search::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(100deg, var(--cy), var(--vi), var(--mg));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.search:focus-within::before { opacity: 1; }
.search:focus-within { box-shadow: 0 0 44px -10px rgba(47, 243, 255, .4); }

.search-icon { display: grid; place-items: center; color: var(--ink-3); flex: none; }
.search-icon svg { width: 21px; height: 21px; }

.search input {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  border: 0; outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px; font-weight: 600;
}
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }

.search-clear {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 10px;
  background: var(--panel-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.search-clear:hover { color: var(--ink); background: rgba(255, 255, 255, .12); }
.search-clear svg { width: 16px; height: 16px; }
/* `display: grid` above beats the [hidden] default, so restate it */
.search-clear[hidden] { display: none; }

/* ---------- quick tags ---------- */
.quick-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 20px auto 0;
  max-width: 700px;
}
.chip {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer;
  transition: all .24s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-2px); }
.chip.is-on {
  color: #05050c;
  border-color: transparent;
  background: linear-gradient(100deg, var(--cy), var(--vi));
  box-shadow: 0 0 22px -6px rgba(47, 243, 255, .6);
}

/* ---------- hero stats ---------- */
.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 46px;
  margin-top: 46px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.stat { min-width: 108px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800;
  background: linear-gradient(178deg, #fff, rgba(255, 255, 255, .5));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.stat-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================
   sections
   ========================================================== */
.section {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 82px var(--pad);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--cy);
}
.section-title {
  font-size: clamp(28px, 4.4vw, 46px);
  text-transform: uppercase;
}
.section-lead {
  max-width: 640px;
  margin: -14px 0 34px;
  font-size: 18px;
  color: var(--ink-2);
}
.result-count {
  font-size: 14px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.result-count b { color: var(--cy); }

/* ---------- sort control ---------- */
.catalog-tools {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.sort-group {
  display: flex; align-items: center; gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.sort-label {
  padding: 0 10px 0 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.sort-btn {
  padding: 8px 14px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .22s var(--ease), background .22s var(--ease);
}
.sort-btn:hover { color: var(--ink); background: var(--panel-2); }
.sort-btn.is-on {
  color: #05050c;
  background: linear-gradient(100deg, var(--cy), var(--vi));
  box-shadow: 0 0 18px -6px rgba(47, 243, 255, .7);
}
.sort-btn:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }

/* ==========================================================
   catalog grid - five across
   ========================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  font: inherit; color: inherit;
  animation: cardIn .5s var(--ease) both;
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.card:hover {
  transform: translateY(-7px);
  border-color: rgba(47, 243, 255, .45);
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .95), 0 0 34px -14px rgba(47, 243, 255, .5);
}
.card:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; }

/* sheen sweep on hover */
.card::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .11), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.card:hover::after { opacity: 1; animation: sheen .85s var(--ease); }
@keyframes sheen { to { left: 115%; } }

.card-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0c0b18;
}
.card-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease), filter .4s var(--ease);
}
.card:hover .card-cover img { transform: scale(1.07); filter: saturate(1.15); }

/* generated cover when no image file is supplied */
.cover-auto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(90% 70% at 25% 15%, hsla(var(--h), 90%, 62%, .55), transparent 62%),
    radial-gradient(80% 80% at 85% 92%, hsla(calc(var(--h) + 58), 92%, 58%, .45), transparent 60%),
    linear-gradient(150deg, #131028, #0a0914);
}
.cover-auto::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 78%);
}
.cover-mono {
  position: relative;
  font-family: var(--font-display);
  font-size: 40px; font-weight: 900;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 4px 26px rgba(0, 0, 0, .6);
}

.card-cover-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 16, .92) 2%, transparent 52%);
  pointer-events: none;
}

.card-flags {
  position: absolute; top: 11px; inset-inline-start: 11px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  z-index: 2;
}
.flag {
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.flag-featured {
  color: #1a0f00;
  background: linear-gradient(100deg, #ffd23f, #ff9f1c);
  box-shadow: 0 0 18px -5px rgba(255, 175, 40, .8);
}
.flag-sold {
  color: #fff;
  background: rgba(255, 45, 120, .9);
  box-shadow: 0 0 18px -5px rgba(255, 45, 120, .9);
}
/* catalog number, fixed to the entry not the sort position */
.flag-num {
  color: var(--cy);
  background: rgba(6, 8, 18, .78);
  border: 1px solid rgba(47, 243, 255, .35);
  letter-spacing: .06em;
  font-size: 10.5px;
  direction: ltr; unicode-bidi: isolate;
}

.card-engine {
  position: absolute; top: 11px; inset-inline-end: 11px; z-index: 2;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 6px;
  background: rgba(6, 6, 14, .7);
  backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #cbe9ff;
}

.card-body {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 15px 16px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700;
  line-height: 1.3;
  letter-spacing: .005em;
}
.card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto;
}
.card-genre {
  font-size: 13px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.card-price {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800;
  color: var(--lime);
  white-space: nowrap;
}
.card-price.is-ask { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-2); }

.card.is-sold { opacity: .5; }
.card.is-sold:hover { opacity: .72; }

/* search term highlight */
mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(47, 243, 255, .26);
  color: #d8fbff;
}

/* ---------- empty state ---------- */
.empty {
  padding: 70px 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-align: center;
}
.empty-icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-3);
}
.empty-icon svg { width: 27px; height: 27px; }
.empty h3 { font-size: 23px; text-transform: uppercase; }
.empty p { max-width: 460px; margin: 12px auto 0; color: var(--ink-2); }
.empty strong { color: var(--cy); }
.empty-actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ==========================================================
   how to buy
   ========================================================== */
/* one contact card, held to a readable width instead of stretching the shell */
.buy-grid {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: 22px;
}

.buy-card {
  position: relative;
  padding: 34px 32px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.buy-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.buy-card::before {
  content: '';
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--vi), transparent);
  opacity: .7;
}
.buy-card-direct::before { background: linear-gradient(90deg, transparent, var(--cy), transparent); }

.buy-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 20px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel);
}
.buy-icon svg { width: 26px; height: 26px; }
.buy-icon-direct  { color: var(--cy); box-shadow: inset 0 0 24px -8px rgba(47, 243, 255, .8); }

.buy-title { font-size: 24px; text-transform: uppercase; }
.buy-desc { margin-top: 12px; color: var(--ink-2); }
.buy-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }

.contact-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.contact-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(6, 6, 14, .5);
  transition: border-color .28s var(--ease), background .28s var(--ease);
}
.contact-row:hover { border-color: var(--line-2); background: rgba(6, 6, 14, .72); }
.contact-badge {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  color: #fff;
}
.contact-badge svg { width: 21px; height: 21px; }
.badge-discord  { background: linear-gradient(135deg, #5865f2, #8b93ff); }
.badge-telegram { background: linear-gradient(135deg, #2aabee, #74d4ff); }
.contact-meta { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.contact-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-handle {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================
   faq
   ========================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: border-color .28s var(--ease);
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: none;
  font-size: 22px; font-weight: 400;
  color: var(--cy);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 20px 20px; color: var(--ink-2); }

/* ==========================================================
   footer
   ========================================================== */
.foot {
  position: relative; z-index: 1;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  background: rgba(4, 4, 10, .7);
}
.foot-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 52px var(--pad) 40px;
}
.foot-brand p { margin-top: 14px; max-width: 380px; color: var(--ink-3); font-size: 16px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 {
  margin-bottom: 4px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.foot-col a { color: var(--ink-2); font-weight: 600; transition: color .22s var(--ease); }
.foot-col a:hover { color: var(--cy); }

.foot-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--pad);
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.foot-bar span:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cy);
}

/* ==========================================================
   modal
   ========================================================== */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 3, 8, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .28s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, #14122a, #0a0914);
  box-shadow: 0 40px 100px -28px rgba(0, 0, 0, 1);
  animation: modalIn .38s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(6, 6, 14, .75);
  color: var(--ink);
  cursor: pointer;
  transition: background .22s var(--ease);
}
.modal-close:hover { background: rgba(255, 255, 255, .14); }
.modal-close svg { width: 17px; height: 17px; }

.modal-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0b18; }
.modal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-cover .cover-mono { font-size: 58px; }
.modal-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, #0f0d1f 1%, transparent 55%);
}

.modal-gallery {
  display: flex;
  gap: 8px;
  padding: 12px 28px 0;
  overflow-x: auto;
}
.modal-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: #0c0b18;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-thumb:hover { opacity: .85; }
.modal-thumb.is-active { opacity: 1; border-color: var(--vi); }

.modal-body { padding: 24px 28px 30px; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.tag-pill {
  padding: 4px 11px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: var(--panel);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.tag-pill.tag-engine { border-color: rgba(47, 243, 255, .4); color: #a8f4ff; background: rgba(47, 243, 255, .08); }
.tag-pill.tag-num {
  color: var(--cy);
  border-color: rgba(47, 243, 255, .3);
  direction: ltr; unicode-bidi: isolate;
}
.modal-title { font-size: 27px; text-transform: uppercase; }
.modal-desc { margin-top: 12px; color: var(--ink-2); }

.modal-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.spec-value { font-weight: 600; }

.modal-price {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 900;
  color: var(--lime);
  text-shadow: 0 0 30px rgba(157, 255, 92, .4);
}
.modal-price.is-ask { font-size: 17px; color: var(--ink-2); text-shadow: none; letter-spacing: .08em; }

.modal-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
.modal-note { margin-top: 15px; font-size: 14.5px; color: var(--ink-3); }

/* ==========================================================
   toast
   ========================================================== */
.toast {
  position: fixed; z-index: 300;
  left: 50%; bottom: 34px;
  transform: translate(-50%, 26px);
  padding: 13px 24px;
  border: 1px solid rgba(157, 255, 92, .45);
  border-radius: 12px;
  background: rgba(8, 16, 8, .93);
  backdrop-filter: blur(12px);
  color: #d6ffc0;
  font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================
   responsive
   ========================================================== */
@media (max-width: 1440px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1120px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 980px) {
  :root { --pad: 22px; }
  .nav-links { display: none; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* the sort control scrolls sideways inside its own pill rather than
     forcing the page to scroll */
  .catalog-tools { width: 100%; justify-content: space-between; gap: 12px; }
  .sort-group { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .sort-group::-webkit-scrollbar { display: none; }
  .sort-btn { padding: 8px 11px; font-size: 13px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .hero { min-height: auto; padding-top: 128px; }
  .hero-sub { font-size: 17px; }
  .section { padding: 58px var(--pad); }
  .hero-stats { gap: 10px 28px; margin-top: 34px; }
  .stat { min-width: 88px; }
  .stat-num { font-size: 24px; }
  .buy-card { padding: 26px 22px; }
  .card-title { font-size: 13px; }
  .modal-body { padding: 20px 20px 24px; }
}

/* the language switcher must survive on phones, so the nav CTA steps aside.
   "Get in touch" is still reachable from the buy section and the footer. */
@media (max-width: 660px) {
  .nav { gap: 12px; }
  .nav-cta { display: none; }
  .lang-pill { padding: 6px 9px; font-size: 12px; }
}

@media (max-width: 420px) {
  .brand-text { font-size: 16px; }
  .lang-switch { padding: 3px; gap: 2px; }
  .lang-pill { padding: 5px 7px; font-size: 11.5px; letter-spacing: 0; }
  .card-cover { aspect-ratio: 1 / 1; }
}

/* ==========================================================
   right to left (Arabic)
   ========================================================== */
/* Latin runs inside RTL text: prices, handles and the domain must keep their own
   direction or "$180" flips to "180$" and "@name" loses its leading @ */
[dir="rtl"] .brand-text,
[dir="rtl"] .card-price,
[dir="rtl"] .modal-price,
[dir="rtl"] .contact-handle,
[dir="rtl"] .card-engine,
[dir="rtl"] .foot-bar span:first-child,
[dir="rtl"] #footDiscord,
[dir="rtl"] #footTelegram {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Arabic has no case, so the uppercase transforms are inert noise. Cairo also sits
   tighter than Orbitron, so the wide tracking used for Latin small caps hurts it. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .stat-label,
[dir="rtl"] .contact-label,
[dir="rtl"] .nav-links a,
[dir="rtl"] .btn,
[dir="rtl"] .chip,
[dir="rtl"] .flag,
[dir="rtl"] .tag-pill,
[dir="rtl"] .spec-label,
[dir="rtl"] .result-count,
[dir="rtl"] .foot-col h4 {
  letter-spacing: 0;
}
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .buy-title,
[dir="rtl"] .modal-title,
[dir="rtl"] .empty h3,
[dir="rtl"] .brand-text { letter-spacing: 0; }

/* ==========================================================
   motion and print
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover { transform: none; }
}