/* =========================================================
   ASGames — Base : reset, tokens, typography, utilities
   ========================================================= */

:root {
  /* Surfaces */
  --bg: #FAFAFA;
  --bg-soft: #F2F2F4;
  --bg-elev: rgba(255, 255, 255, 0.62);

  /* Text */
  --text: #0E0F12;
  --text-2: #3A3D45;
  --text-3: #6B6F78;
  --text-inv: #FFFFFF;

  /* Brand */
  --brand: #2E6BFF;
  --brand-2: #6A3BFF;
  --brand-grad: linear-gradient(135deg, #2E6BFF 0%, #6A3BFF 100%);
  --accent: #FF4D6D;
  --warn: #F5A524;
  --ok: #1FB57A;
  --danger: #E5484D;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.74);
  --glass-bg-soft: rgba(255, 255, 255, 0.35);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-soft: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 10px 30px -12px rgba(20, 24, 40, 0.18),
                  0 2px 8px -4px rgba(20, 24, 40, 0.08);
  --glass-shadow-lg: 0 30px 80px -24px rgba(20, 24, 40, 0.28),
                     0 8px 24px -8px rgba(20, 24, 40, 0.12);
  --glass-blur: blur(20px) saturate(180%);

  /* Radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Type */
  --font-sans: "Inter", "SF Pro Display", "Segoe UI", "Helvetica Neue",
               "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .25s;

  /* Layout */
  --container: 1200px;
  --header-h: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; }
input, textarea { background: transparent; border: none; outline: none; }

/* ---------- Ambient background blobs ---------- */
body::before, body::after {
  content: "";
  position: fixed;
  inset: auto;
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
  opacity: .55;
  border-radius: 50%;
}
body::before {
  width: 520px; height: 520px;
  top: -180px; left: -160px;
  background: radial-gradient(circle at 30% 30%, #6A3BFF55, transparent 70%);
}
body::after {
  width: 560px; height: 560px;
  bottom: -200px; right: -180px;
  background: radial-gradient(circle at 70% 70%, #2E6BFF55, transparent 70%);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p  { color: var(--text-2); }
small { font-size: .82rem; color: var(--text-3); }
strong { font-weight: 600; }
code { font-family: var(--font-mono); font-size: .92em; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--s-4); }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.grow { flex: 1; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-brand { color: var(--brand); }
.text-accent { color: var(--accent); }
.text-ok { color: var(--ok); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Tags / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: .72rem; font-weight: 600;
  border-radius: var(--r-pill);
  background: rgba(46, 107, 255, .08);
  color: var(--brand);
  border: 1px solid rgba(46, 107, 255, .14);
}
.tag.mlbb   { background: rgba(106, 59, 255, .10); color: #6A3BFF; border-color: rgba(106,59,255,.18); }
.tag.pubg   { background: rgba(245, 165, 36, .12); color: #B97300; border-color: rgba(245,165,36,.20); }
.tag.freefire { background: rgba(255, 77, 109, .10); color: #C92547; border-color: rgba(255,77,109,.20); }
.tag.others { background: rgba(0,0,0,.06); color: var(--text-2); border-color: rgba(0,0,0,.08); }
.tag.sold   { background: rgba(229, 72, 77, .10); color: var(--danger); border-color: rgba(229,72,77,.18); }
.tag.live   { background: rgba(31, 181, 122, .10); color: var(--ok); border-color: rgba(31,181,122,.20); }

/* ---------- Verified badge ---------- */
.verified-badge {
  display: inline-flex; align-items: center;
  width: 18px; height: 18px;
  vertical-align: -3px;
  margin-left: 4px;
}
.verified-badge svg, .verified-badge img {
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 4px rgba(46,107,255,.35));
}

/* ---------- Section title ---------- */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section-head h2 { letter-spacing: -.02em; }
.section-head .sub { color: var(--text-3); font-size: .95rem; }

/* ---------- Misc ---------- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin: var(--s-5) 0;
}
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.10), rgba(0,0,0,.05));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

::selection { background: rgba(46,107,255,.22); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.30); }

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