:root {
  --bg: #0a0a0a;
  --text: #fff;
  --muted: #ccc;
  --accent: #ffd700;
  --card-bg: #1b1b1b;
  --card-radius: 12px;
  --transition: 0.3s ease;
}

body {
  margin:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

.site-header{
  position: sticky;
  top:0;
  z-index:100;
  background: var(--bg);
  display:flex;
  justify-content:center;
  padding:12px 0;
  border-bottom:1px solid #222;
  transition: background 0.3s;
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  width:90%;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  font-size:24px;
  font-weight:bold;
  color: var(--accent);
}

.top-nav button, .top-nav a{
  margin-left:12px;
  padding:6px 14px;
  border-radius:6px;
  border:none;
  background:none;
  color:var(--text);
  cursor:pointer;
  transition: var(--transition);
}

.top-nav button:hover, .top-nav a:hover{opacity:0.8;}

.discord-cta{
  background: var(--accent);
  color:#000;
  font-weight:bold;
  text-decoration:none;
}

.hero{
  padding:60px 20px;
  text-align:center;
  animation: fadeIn 1s ease;
}

.hero h2{
  font-size:2.5rem;
  margin-bottom:10px;
  color: var(--accent);
}

.hero p{
  color: var(--muted);
  margin-bottom:20px;
}

.hero-cta{display:flex;justify-content:center;gap:12px;margin-bottom:20px;}
.search-group{margin-top:20px;}
#searchInput{
  width:100%;
  max-width:400px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #333;
  background:#222;
  color:#fff;
  font-size:14px;
  transition:border 0.3s;
}
#searchInput:focus{outline:none;border-color:var(--accent);}

.section{padding:50px 20px;}
.section-head{text-align:center;margin-bottom:30px;}
.section-head h2{font-size:2rem;color: var(--accent);}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:20px;
}

.card{
  background: var(--card-bg);
  padding:18px;
  border-radius: var(--card-radius);
  position: relative;
  text-align:center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow:0 8px 20px rgba(255,215,0,0.3);
}

.price{
  font-weight:bold;
  margin-top:8px;
  font-size:1.1rem;
}

.muted{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
}

.badge{
  position:absolute;
  top:8px;
  right:8px;
  padding:3px 6px;
  border-radius:6px;
  font-size:10px;
  font-weight:bold;
}

.badge.out{background:#d9534f;color:#fff;}
.badge.giant{background:#5bc0de;color:#fff;}
.ribbon{
  position:absolute;
  top:-8px;
  left:-8px;
  background: var(--accent);
  color:#000;
  padding:4px 6px;
  font-size:10px;
  font-weight:bold;
  border-radius:4px;
  transform:rotate(-15deg);
}

.site-footer{
  padding:20px 0;
  text-align:center;
  border-top:1px solid #222;
  color: var(--muted);
}

@keyframes fadeIn{
  from{opacity:0; transform: translateY(10px);}
  to{opacity:1; transform: translateY(0);}
}

@keyframes fadeInUp{
  from{opacity:0; transform: translateY(20px);}
  to{opacity:1; transform: translateY(0);}
}