/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap');

:root {
  --gold: #FFD800;
  --gold-light: #ffe566;
  --gold-dark: #c9a800;
  --purple: #3a0080;
  --purple-mid: #5a10cc;
  --purple-light: #7a35ff;
  --dark: #0e0b1a;
  --dark2: #18122e;
  --dark3: #221a3a;
  --text: #f5f5ff;
  --text-muted: #b8b4d0;
  --radius: 12px;
  --glow: 0 0 24px rgba(255,216,0,0.7), 0 0 6px rgba(255,216,0,0.4);
  --glow-btn: 0 4px 28px rgba(90,16,204,0.7), 0 0 16px rgba(255,216,0,0.3);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  background: var(--dark);
  color: var(--text);
  line-height: 1.6;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(90,16,204,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(58,0,128,0.3) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255,216,0,0.06) 0%, transparent 60%);
  background-attachment: fixed;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

.games .container {
  max-width: 100%;
  padding: 0 32px;
}

a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; }

/* ── Buttons ── */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  color: #1a0a00;
  font-weight: 800;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(255,216,0,0.5), 0 0 12px rgba(255,216,0,0.3);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 36px rgba(255,216,0,0.7), 0 0 24px rgba(255,216,0,0.5);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

.btn-secondary {
  display: inline-block;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 1rem;
  margin-left: 12px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(255,216,0,0.3);
}

.btn-nav {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a0a00;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  transition: box-shadow 0.2s, transform 0.2s;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 12px rgba(255,216,0,0.4);
}
.btn-nav:hover {
  box-shadow: 0 4px 20px rgba(255,216,0,0.65);
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
}

/* ── Header ── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(90deg, #0a0420 0%, #1a0650 30%, #2a0880 50%, #1a0650 70%, #0a0420 100%);
  backdrop-filter: blur(16px);
  border-top: 2px solid rgba(255,216,0,0.6);
  border-bottom: 2px solid rgba(255,216,0,0.4);
  box-shadow: 0 4px 40px rgba(150,0,255,0.3), 0 0 80px rgba(255,216,0,0.08);
  overflow: visible;
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  gap: 16px;
  flex-wrap: nowrap;
  overflow: visible;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,216,0,0.4);
  color: var(--gold);
  font-size: 1.4rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.logo {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,216,0,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
  transform: translateY(25px);
  filter: drop-shadow(0 3px 6px rgba(255,216,0,0.3));
}

header ul {
  display: flex;
  list-style: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

header ul a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
header ul a:not(.btn-nav):not(.btn-primary):hover { color: var(--gold); }

/* ── Hero ── */
.hero {
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(48,0,97,0.5) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-text h1 {
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.15;
  text-shadow: 0 0 40px rgba(255,216,0,0.25), 0 2px 8px rgba(0,0,0,0.5);
}
.hero-text h1 span { color: var(--gold); }
.hero-text p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 32px; }

.hero-img { display: flex; justify-content: center; }
.gd-badge {
  width: 440px; height: 440px;
  border-radius: 80px 0 80px 0;
  border: 2px solid #fff;
  background: rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: var(--glow), inset 0 0 40px rgba(48,0,97,0.4);
  gap: 8px;
}
.badge-icon { font-size: 4rem; }
.badge-title { font-size: 1.6rem; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 14px rgba(255,216,0,0.7); }
.badge-sub { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; }

/* ── Features ── */
.features { padding: 80px 0; background: rgba(0,0,0,0.5); border-top: 1px solid rgba(255,216,0,0.1); border-bottom: 1px solid rgba(255,216,0,0.1); }
.features h2 { text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 48px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 0 20px rgba(255,216,0,0.4); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.feature-card {
  background: linear-gradient(135deg, rgba(58,0,128,0.25), rgba(34,26,58,0.6));
  border: 1px solid rgba(255,216,0,0.3);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(255,216,0,0.25), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-4px);
}
.feature-icon { font-size: 2.5rem; margin-bottom: 16px; }
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.feature-card p { font-size: 0.88rem; color: var(--text-muted); }

/* ── Games ── */
.games { padding: 80px 0; }
.games h2 { text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 0 20px rgba(255,216,0,0.4); }
.section-sub { text-align: center; color: var(--text-muted); margin-bottom: 48px; font-size: 0.95rem; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; margin-bottom: 40px; }

.game-card {
  background: #18122e;
  border: 1px solid rgba(255,216,0,0.2);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  display: block;
  position: relative;
}
.game-card:hover {
  border-color: var(--gold);
  box-shadow: var(--glow), 0 4px 20px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}
.game-thumb {
  width: 100%;
  height: 220px;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  background: rgba(24,18,46,0.8);
}
.game-thumb.fish { background: rgba(0,40,100,0.6); }
.game-thumb.slots { background: rgba(30,0,70,0.6); }
.game-thumb.keno { background: rgba(0,50,80,0.6); }
.game-card img.game-icon {
  width: 100%;
  height: 240px;
  object-fit: contain;
  object-position: center;
  background: #0e0b1a;
  display: block;
}
.game-card-body { padding: 18px 20px 22px; display: block; background: #120d24; position: relative; z-index: 1; }
.game-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
.game-card p { font-size: 0.9rem; color: var(--text-muted); flex: 1; margin-bottom: 14px; line-height: 1.6; }
.card-link { font-size: 0.85rem; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.card-link:hover { text-decoration: underline; }
.games-cta { text-align: center; margin-top: 40px; }

/* ── How to Play ── */
.how-to-play { padding: 80px 0; background: rgba(48,0,97,0.1); border-top: 1px solid rgba(255,216,0,0.1); border-bottom: 1px solid rgba(255,216,0,0.1); }
.how-to-play h2 { text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 0 20px rgba(255,216,0,0.4); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.step { text-align: center; }
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 20px rgba(255,216,0,0.6), 0 0 6px rgba(255,216,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; color: #1a0a00;
  margin: 0 auto 16px;
}
.step h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.step p { font-size: 0.85rem; color: var(--text-muted); }

/* ── FAQ ── */
.faq { padding: 80px 0; }
.faq h2 { text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 48px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 0 20px rgba(255,216,0,0.4); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,216,0,0.15); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between;
  color: #fff; font-size: 1rem; font-weight: 600; font-family: inherit;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--gold); }
.faq-q span { color: var(--gold); font-size: 1.4rem; font-weight: 300; }
.faq-a { display: none; padding-bottom: 20px; }
.faq-a p { color: var(--text-muted); font-size: 0.92rem; }
.faq-item.open .faq-a { display: block; }

/* ── CTA Banner ── */
.cta-banner {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(48,0,97,0.6) 0%, rgba(55,4,179,0.4) 100%);
  border-top: 1px solid rgba(255,216,0,0.25);
  border-bottom: 1px solid rgba(255,216,0,0.25);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,216,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner h2 { font-size: 2.2rem; font-weight: 900; margin-bottom: 16px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.cta-banner p { color: var(--text-muted); margin-bottom: 32px; font-size: 1rem; }

/* ── Footer ── */
footer {
  background: rgba(0,0,0,0.9);
  border-top: 1px solid rgba(255,216,0,0.2);
  padding: 60px 0 32px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
footer h4 { color: var(--gold); font-size: 0.85rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
footer p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 10px; }
footer ul a { color: var(--text-muted); font-size: 0.88rem; transition: color 0.2s; }
footer ul a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; text-align: center; }
.footer-bottom p { color: #555; font-size: 0.8rem; }

/* ── Dropdown Nav ── */
.dropdown { position: relative; }
.dropdown > ul {
  display: none; position: absolute; top: 100%; left: 0;
  background: rgba(0,0,0,0.97);
  border: 1px solid rgba(255,216,0,0.25);
  border-radius: 10px;
  min-width: 220px; z-index: 200;
  max-height: 400px; overflow-y: auto;
  list-style: none; padding: 8px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 16px rgba(255,216,0,0.1);
}
.dropdown:hover > ul { display: block; }
.dropdown > ul li { padding: 0; }
.dropdown > ul a {
  display: block; padding: 10px 16px;
  color: #ccc; font-size: 0.8rem;
  white-space: nowrap; transition: background 0.15s, color 0.15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dropdown > ul a:hover { background: rgba(48,0,97,0.5); color: var(--gold); }

/* ── Game Hero ── */
.game-hero {
  background: linear-gradient(135deg, #000 0%, rgba(48,0,97,0.4) 50%, #000 100%);
  padding: 60px 0;
  border-bottom: 1px solid rgba(255,216,0,0.15);
}
.game-hero-inner { display: flex; gap: 48px; align-items: center; }
.game-hero-img { flex-shrink: 0; }
.game-screenshot {
  max-width: 300px; max-height: 300px; object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,216,0,0.4);
  box-shadow: var(--glow);
}
.game-placeholder {
  width: 240px; height: 240px;
  background: rgba(48,0,97,0.3);
  border: 2px solid rgba(255,216,0,0.4);
  border-radius: 50px 0 50px 0;
  box-shadow: var(--glow);
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem;
}
.game-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--purple), var(--purple-mid));
  color: var(--gold);
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 14px;
  border-radius: 50px;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
  border: 1px solid rgba(255,216,0,0.4);
  box-shadow: 0 0 10px rgba(255,216,0,0.2);
}
.game-hero-text h1 {
  font-size: 2.2rem; font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 0 30px rgba(255,216,0,0.25);
}
.game-hero-text p { color: var(--text-muted); font-size: 1rem; margin-bottom: 28px; max-width: 500px; }

/* ── Game Content ── */
.game-content { padding: 60px 0; }
.game-content-inner { display: grid; grid-template-columns: 1fr 320px; gap: 48px; }
.game-main h2 { font-size: 1.4rem; margin: 32px 0 12px; text-align: left; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
.game-main h2:first-child { margin-top: 0; }
.game-main p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.7; font-size: 0.95rem; }

.sidebar-card {
  background: linear-gradient(135deg, rgba(24,18,46,0.9), rgba(34,26,58,0.7));
  border: 1px solid rgba(255,216,0,0.3);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.sidebar-card h3 { font-size: 0.88rem; color: var(--gold); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.game-details { list-style: none; }
.game-details li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,216,0,0.1); font-size: 0.85rem; }
.game-details li:last-child { border-bottom: none; }
.game-details li span:first-child { color: var(--text-muted); }
.cta-card {
  border-color: rgba(255,216,0,0.4);
  background: linear-gradient(135deg, rgba(48,0,97,0.5), rgba(55,4,179,0.3));
  text-align: center;
  box-shadow: 0 0 20px rgba(255,216,0,0.1);
}
.cta-card p { color: var(--text-muted); margin-bottom: 16px; font-size: 0.88rem; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-img { display: flex; justify-content: center; margin-top: 32px; }
  .gd-badge { width: 280px; height: 320px; }
  .gd-badge img { width: 190px !important; height: 190px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  header ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #0a0420 !important; opacity: 1 !important;
    padding: 16px 0;
    border-bottom: 2px solid rgba(255,216,0,0.4);
    z-index: 9999;
    gap: 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  }
  header ul.open { display: flex; }
  header ul li { width: 100%; }
  header ul a { display: block; padding: 12px 24px; font-size: 0.9rem; }
  header ul .btn-nav { margin: 8px 24px; display: block; text-align: center; border-radius: 50px; }
  header { position: sticky; top: 0; background: #0a0420 !important; }
  header nav { position: relative; }
  .dropdown > ul { position: static !important; max-height: 200px; border: none; border-radius: 0; background: rgba(255,255,255,0.04); }
  .dropdown:hover > ul { display: none; }
  .dropdown.open > ul { display: block; }
}

@media (max-width: 768px) {
  .games-grid { grid-template-columns: 1fr; }
  .game-hero-inner { flex-direction: column; }
  .game-content-inner { grid-template-columns: 1fr; }
  .game-hero-text h1 { font-size: 1.6rem; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .hero-text h1 { font-size: 2rem; }
  .game-card img.game-icon { height: 200px; }
}
@media (max-width: 520px) {
  .features-grid, .games-grid, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Language Toggle */
.lang-toggle { display:flex; align-items:center; gap:6px; margin-left:8px; }
.lang-toggle span { color:var(--gold); font-size:0.85rem; }
.lang-toggle a { color:var(--gold); font-size:0.8rem; font-weight:700; padding:4px 10px; border:1px solid rgba(255,216,0,0.4); border-radius:20px; text-decoration:none; }
.lang-toggle a:hover { background:rgba(255,216,0,0.15); }
.lang-toggle a.active { background:var(--gold); color:#000; }

/* Blog Section */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; margin-bottom: 40px; }
.blog-card { background: #18122e; border: 1px solid rgba(255,216,0,0.2); border-radius: 12px; padding: 28px; transition: border-color 0.2s, transform 0.2s; }
.blog-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.blog-card .post-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.blog-card h2 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.blog-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.blog-card a.read-more { color: var(--gold); font-size: 0.85rem; font-weight: 600; text-decoration: none; }

/* Blog styles */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin-bottom:40px}
.blog-card{background:#18122e;border:1px solid rgba(255,216,0,0.2);border-radius:12px;padding:28px;transition:border-color 0.2s,transform 0.2s}
.blog-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.blog-card .post-date{font-size:.8rem;color:var(--text-muted);margin-bottom:8px}
.blog-card h2{font-size:1rem;font-weight:700;color:#fff;margin-bottom:10px}
.blog-card p{font-size:.85rem;color:var(--text-muted);margin-bottom:16px;line-height:1.6}
.blog-card a.read-more{color:var(--gold);font-size:.85rem;font-weight:600;text-decoration:none}

/* ══════════════════════════════════════════
   NEW FEATURES v10
   ══════════════════════════════════════════ */

/* Feature 1: Ticker bar */
.ticker-wrap{background:rgba(255,216,0,0.08);border-bottom:1px solid rgba(255,216,0,0.2);overflow:hidden;padding:8px 0}
.ticker{display:flex;gap:48px;white-space:nowrap;animation:ticker-scroll 30s linear infinite}
.ticker span{font-size:0.8rem;color:var(--gold);font-weight:600;letter-spacing:0.05em;flex-shrink:0}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Feature 2: HOT badge */
.game-card{position:relative}
.hot-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,#ff4500,#ff8c00);color:#fff;font-size:0.65rem;font-weight:800;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.05em;z-index:2;box-shadow:0 2px 8px rgba(255,69,0,0.5)}

/* Feature 3: Search bar */
.search-section{padding:32px 0 8px}
.search-wrap{max-width:520px;margin:0 auto}
.game-search-input{width:100%;background:#18122e;border:1px solid rgba(255,216,0,0.3);border-radius:50px;padding:14px 24px;color:#fff;font-size:1rem;outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.game-search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,216,0,0.1)}
.game-search-input::placeholder{color:var(--text-muted)}

/* Feature 4: Sticky CTA */
.sticky-cta{position:fixed;bottom:80px;right:16px;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#000;font-weight:800;font-size:0.9rem;padding:14px 22px;border-radius:50px;text-decoration:none;box-shadow:0 4px 20px rgba(255,216,0,0.4);z-index:999;transition:transform 0.2s,box-shadow 0.2s;letter-spacing:0.03em}
.sticky-cta:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,216,0,0.6)}

/* Feature 5: Filter tabs */
.filter-section{padding:16px 0}
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap}
.filter-tab{background:#18122e;border:1px solid rgba(255,216,0,0.25);color:var(--text-muted);padding:10px 22px;border-radius:50px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s}
.filter-tab:hover{border-color:var(--gold);color:var(--gold)}
.filter-tab.active{background:var(--gold);color:#000;border-color:var(--gold)}

/* Feature 7: Newsletter */
.newsletter{text-align:center;padding:40px 0;border-top:1px solid rgba(255,216,0,0.15);margin-bottom:32px}
.newsletter-title{font-size:1.3rem;font-weight:800;color:var(--gold);margin-bottom:8px}
.newsletter-sub{color:var(--text-muted);font-size:0.85rem;margin-bottom:20px}
.newsletter-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter-input{flex:1;min-width:220px;background:#18122e;border:1px solid rgba(255,216,0,0.3);border-radius:50px;padding:12px 20px;color:#fff;font-size:0.9rem;outline:none}
.newsletter-input:focus{border-color:var(--gold)}
.newsletter-btn{background:var(--gold);color:#000;font-weight:800;padding:12px 24px;border:none;border-radius:50px;cursor:pointer;font-size:0.9rem;transition:opacity 0.2s}
.newsletter-btn:hover{opacity:0.85}

/* Animation 1: Game card hover glow */
.game-card{transition:transform 0.2s,box-shadow 0.2s}
.game-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 8px 30px rgba(255,216,0,0.25)}

/* Animation 2: Pulsing CTA */
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(255,216,0,0.4)}50%{box-shadow:0 0 0 12px rgba(255,216,0,0)}}
.btn-primary{animation:pulse-gold 2.5s infinite}

/* Animation 3: Section h2 entrance (JS adds .visible) */


/* Animation 4: Gold shimmer on badge-title */
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
.badge-title{background:linear-gradient(90deg,#FFD800 25%,#fff 50%,#FFD800 75%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}



/* ── Global particles canvas ── */
#global-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}


@media (max-width: 900px) {
  .search-section { display: none; }
  .filter-section { display: none; }
}

@media (max-width: 900px) {
  header { backdrop-filter: none !important; background: #0a0420 !important; }
}