/* ============================================================
   base.css — design tokens, reset, ambient background
   ============================================================ */

:root {
  /* Solid Backgrounds */
  --bg:           #05070a;
  --bg-alt:       #080b0f;

  /* Glass/Translucent Surfaces */
  --surface-1:    rgba(20, 25, 35, 0.5);
  --surface-2:    rgba(30, 40, 55, 0.55);
  --surface-3:    rgba(45, 60, 80, 0.6);
  
  /* Borders */
  --border:       rgba(255, 255, 255, 0.07);
  --border-mid:   rgba(255, 255, 255, 0.13);
  --border-hi:    rgba(255, 255, 255, 0.28);
  
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-surface: rgba(8, 11, 16, 0.82);
  --carbon-bg: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");

  /* Text */
  --text-pri:     #eef2f7;
  --text-sec:     #8fa8c0;
  --text-muted:   #516678;
  --text-dim:     #2d3f50;

  /* Accents — unified with server-stats green palette */
  --accent:       #00e57a;
  --accent-dim:   rgba(0, 229, 122, 0.22);
  --accent-glow:  rgba(0, 229, 122, 0.12);
  --accent-dark:  #00b85f;
  --accent-bright: #1fff8a;

  --amber:        #f5a623;
  --amber-dim:    rgba(245, 166, 35, 0.22);
  --amber-glow:   rgba(245, 166, 35, 0.12);
  
  --red:          #ff4455;
  --red-dim:      rgba(255, 68, 85, 0.2);
  --blue:         #4d9fff;
  --blue-dim:     rgba(77, 159, 255, 0.2);

  /* Game colours */
  --rust-color:   #cd4632;
  --rust-glow:    rgba(205, 70, 50, 0.25);
  --tf2-color:    #c36a2d;
  --tf2-glow:     rgba(195, 106, 45, 0.25);
  --l4d2-color:   #4a7c3f;
  --l4d2-glow:    rgba(74, 124, 63, 0.25);

  /* Typography & Spacing */
  --font-display: 'Rajdhani', 'Share Tech Mono', sans-serif;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Rajdhani', sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;

  /* Animation */
  --transition-fast: 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-med:  0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shadows */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border-mid);
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.4);
  
  --scanline-color: rgba(255, 255, 255, 0.025);
  --selection-bg:   var(--accent-dim);
}

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

body {
  background-color: var(--bg);
  background-attachment: fixed;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 229, 122, 0.05) 0%, transparent 50%),
    var(--carbon-bg); /* Subtle carbon fiber texture */
  color: var(--text-pri);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: #000;
}

/* Ambient Glowing Orbs in Background */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
  animation: floatOrb 20s ease-in-out infinite alternate;
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png"); /* Subtle noise */
  opacity: 0.15;
  pointer-events: none;
  z-index: 10;
}

h1, h2, .brand-name {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--font-display);
}

.mono { font-family: var(--font-mono); }

body::after {
  bottom: -10%; right: -10%;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(77, 159, 255, 0.15) 0%, transparent 70%);
  animation-delay: -10s;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, 10%) scale(1.1); }
}

a { color: var(--accent); text-decoration: none; transition: all var(--transition-fast); }
a:hover { color: var(--text-pri); text-shadow: 0 0 8px var(--accent-glow); }
button { font-family: var(--font-display); cursor: pointer; border: none; background: none; color: inherit; }

/* Form inputs (Glassy) */
input, select, textarea {
  font-family: var(--font-body);
  color: var(--text-pri);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  padding: 8px 12px;
  backdrop-filter: blur(8px);
  transition: all var(--transition-fast);
}
input:focus, select:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 2px var(--accent-glow); background: rgba(0,0,0,0.4); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.badge-game { background: rgba(255,255,255,0.05); color: var(--text-sec); border: 1px solid var(--border); }
.badge-fw { background: rgba(77,159,255,0.1); color: var(--blue); border: 1px solid rgba(77,159,255,0.2); }
.badge-addon { background: rgba(155,168,245,0.1); color: #9ba8f5; border: 1px solid rgba(155,168,245,0.2); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  background-attachment: fixed;
  background-image: 
    radial-gradient(ellipse at 60% -10%, rgba(0, 229, 122, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 80%, rgba(77, 159, 255, 0.05) 0%, transparent 50%),
    var(--carbon-bg);
  color: var(--text-pri);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Subtle grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
  opacity: 0.12;
  pointer-events: none;
  z-index: 10;
}

::selection { background: var(--accent); color: #000; }

h1, h2, .brand-name {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--font-display);
}

.mono { font-family: var(--font-mono); }

a { color: var(--accent); text-decoration: none; transition: all var(--transition-fast); }
a:hover { color: var(--text-pri); text-shadow: 0 0 8px var(--accent-glow); }
button { font-family: var(--font-display); cursor: pointer; border: none; background: none; color: inherit; }

/* Form inputs */
input, select, textarea {
  font-family: var(--font-body);
  color: var(--text-pri);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  padding: 8px 12px;
  transition: all var(--transition-fast);
}
input:focus, select:focus { border-color: var(--accent-dim); box-shadow: 0 0 0 2px var(--accent-glow); background: rgba(0,0,0,0.4); }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 600;
}

/* Game badges */
.badge-game { background: rgba(255,255,255,0.06); color: var(--text-sec); border: 1px solid var(--border-mid); }
.badge-game.rust  { background: rgba(205,70,50,0.15);  color: #ff7060; border-color: rgba(205,70,50,0.35); }
.badge-game.tf2   { background: rgba(195,106,45,0.15); color: #ffb06e; border-color: rgba(195,106,45,0.35); }
.badge-game.l4d2  { background: rgba(74,124,63,0.15);  color: #80cf72; border-color: rgba(74,124,63,0.35); }

/* Type badges */
.badge-fw    { background: rgba(77,159,255,0.12); color: var(--blue); border: 1px solid rgba(77,159,255,0.25); }
.badge-addon { background: rgba(155,168,245,0.12); color: #a8b2f0; border: 1px solid rgba(155,168,245,0.25); }

/* Price badges */
.badge-free { background: rgba(0,229,122,0.12); color: var(--accent); border: 1px solid rgba(0,229,122,0.25); }
.badge-paid { background: rgba(245,166,35,0.12); color: var(--amber); border: 1px solid rgba(245,166,35,0.3); }

/* Toast */
.toast-msg {
  background: rgba(8, 11, 16, 0.96);
  border: 1px solid var(--border-hi);
  color: var(--text-pri);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 280px;
  box-shadow: var(--shadow-float);
  pointer-events: all;
  margin-top: 10px;
  border-radius: var(--radius-sm);
}
.toast-msg.success { border-left: 3px solid var(--accent); }
.toast-msg.info    { border-left: 3px solid var(--blue); }
.toast-msg.error   { border-left: 3px solid var(--red); }
.toast-prefix { color: var(--text-muted); font-size: 0.6rem; display: block; margin-bottom: 2px; }

/* No results */
.no-results {
  grid-column: 1 / -1;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Scroll reveal */
.reveal-card {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-card.revealed { opacity: 1; transform: translateY(0) scale(1); }