/* ═══════════════════════════════════════════════════════════
   BetEmpireElite — Homepage Styles
   Premium Black & Gold Theme
═══════════════════════════════════════════════════════════ */
:root{
  --gold:#c9a227;
  --gold-light:#f0d060;
  --gold-bright:#ffd700;
  --gold-dark:#8b6914;
  --gold-glow:rgba(201,162,39,.45);
  --gold-glow-s:rgba(201,162,39,.15);
  --bg:#080808;
  --bg-alt:#0c0c10;
  --panel:rgba(255,255,255,.028);
  --border:rgba(201,162,39,.18);
  --border-s:rgba(255,255,255,.05);
  --text:#e8e0d0;
  --text-dim:rgba(232,224,208,.5);
  --red:#ff4f6b;
  --green:#00e676;
  --nav-h:68px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}

/* ══════════════════════════════
   NAVIGATION
══════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(8,8,8,.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background .3s,box-shadow .3s;
}
.nav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright) 50%,transparent);
  opacity:.5;
}
.nav.scrolled{
  background:rgba(6,6,8,.96);
  box-shadow:0 4px 32px rgba(0,0,0,.7);
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  padding:0 24px;height:100%;
  display:flex;align-items:center;gap:32px;
}
.nav-logo-link{flex-shrink:0;display:flex;align-items:center;cursor:pointer;}
.nav-logo{
  height:48px;width:auto;border-radius:6px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s;
}
.nav-logo-link:hover .nav-logo{
  transform:scale(1.07);
  filter:brightness(1.12) drop-shadow(0 0 12px rgba(201,162,39,.75));
}
.nav-spacer{flex:1;}
.nav-links{
  display:flex;align-items:center;gap:4px;flex:1;
}
.nav-link{
  padding:8px 14px;font-size:14px;font-weight:600;
  color:var(--text-dim);border-radius:8px;
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.nav-link:hover,.nav-link.active{
  color:var(--gold-light);background:rgba(201,162,39,.1);
}
.nav-auth{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.btn-login{
  padding:9px 20px;background:transparent;
  border:1px solid var(--border);border-radius:10px;
  color:var(--gold-light);font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s;
}
.btn-login:hover{background:rgba(201,162,39,.1);border-color:var(--gold);}
.btn-register{
  padding:9px 20px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
  border:none;border-radius:10px;
  color:#0a0800;font-size:14px;font-weight:800;
  cursor:pointer;font-family:inherit;
  box-shadow:0 2px 16px rgba(201,162,39,.35);
  transition:transform .15s,box-shadow .15s;
}
.btn-register:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(201,162,39,.55);}
.nav-auth-in{gap:14px;}
.nav-balance-wrap{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;
}
.nav-balance-label{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--text-dim);text-transform:uppercase;}
.nav-balance-amount{font-size:15px;font-weight:800;color:var(--gold-light);}
.nav-username{font-size:13px;font-weight:600;color:var(--text-dim);white-space:nowrap;}
.nav-admin-link{
  padding:7px 14px;border:1px solid var(--border);border-radius:8px;
  font-size:12.5px;font-weight:700;color:var(--gold-light);white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.nav-admin-link:hover{background:rgba(201,162,39,.1);border-color:var(--gold);}
.nav-stats-btn,.nav-search-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:10px;
  color:var(--gold-light);cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s;
  flex-shrink:0;
}
.nav-stats-btn:hover,.nav-search-btn:hover,
.nav-search-btn.active{background:rgba(201,162,39,.1);border-color:var(--gold);transform:translateY(-1px);}

/* ── Search overlay ── */
.search-overlay{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:98;
  background:rgba(8,8,8,.93);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:12px 24px;
  transform:translateY(-110%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.search-overlay.open{transform:translateY(0);pointer-events:auto;}
.search-inner{
  max-width:620px;margin:0 auto;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:12px;
  padding:0 16px;
  transition:border-color .15s;
}
.search-inner:focus-within{border-color:var(--gold);}
.search-overlay-icon{color:var(--text-dim);flex-shrink:0;}
.search-input{
  flex:1;background:none;border:none;outline:none;
  font-family:inherit;font-size:15px;color:var(--text);
  padding:13px 0;min-width:0;
}
.search-input::placeholder{color:var(--text-dim);}
.search-close-btn{
  background:none;border:none;color:var(--text-dim);
  cursor:pointer;padding:4px;display:flex;flex-shrink:0;
  transition:color .15s;
}
.search-close-btn:hover{color:var(--gold-light);}


/* ══════════════════════════════
   SECTIONS COMMON
══════════════════════════════ */
.section{padding:calc(var(--nav-h) + 40px) 24px 100px;}
.section-inner{max-width:1200px;margin:0 auto;}

/* fade-in on scroll */
.fade-in{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ══════════════════════════════
   ACTIVE GAMES — 3-UP GRID
══════════════════════════════ */
.games-duo{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1280px;
  margin:0 auto 48px;
}

.game-hero-card{
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(201,162,39,.32);
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
  cursor:pointer;text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.2,.64,1),
             box-shadow .3s ease,border-color .3s ease;
  will-change:transform;
}
.game-hero-card:hover{
  transform:scale(1.03) translateY(-5px);
  border-color:var(--gold);
  box-shadow:
    0 20px 56px rgba(0,0,0,.6),
    0 0 50px rgba(201,162,39,.24),
    0 0 100px rgba(201,162,39,.09);
}

/* ambient glow layer */
.ghc-glow{
  position:absolute;inset:-20px;
  background:radial-gradient(ellipse at 50% 35%,rgba(201,162,39,.16),transparent 65%);
  pointer-events:none;z-index:0;
  opacity:0;transition:opacity .3s;
}
.game-hero-card:hover .ghc-glow{opacity:1;}

/* Live badge */
.ghc-badge{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:4px 12px;font-size:11px;font-weight:800;letter-spacing:.6px;
  background:rgba(0,230,118,.12);border:1px solid rgba(0,230,118,.4);
  border-radius:20px;color:#00e676;
  box-shadow:0 0 10px rgba(0,230,118,.18);
}

/* Logo image */
.ghc-logo{
  display:block;width:100%;
  position:relative;z-index:1;
  border-radius:12px 12px 0 0;
  transition:filter .3s ease;
}
.game-hero-card:hover .ghc-logo{
  filter:brightness(1.07) drop-shadow(0 0 20px rgba(201,162,39,.45));
}


/* ── Site footer (legal links) ── */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--bg-alt);
  padding:26px 0;
}
.site-footer-inner{
  width:min(1180px,94%);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
}
.sf-copy{font-size:12.5px;color:var(--text-dim);}
.sf-links{display:flex;gap:22px;}
.sf-links a{
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  transition:color .15s ease;
}
.sf-links a:hover{color:var(--gold-light);}
@media (max-width:560px){
  .site-footer-inner{flex-direction:column;text-align:center;}
}

/* Footer */
.ghc-footer{
  position:relative;z-index:1;
  padding:16px 18px 20px;
  display:flex;flex-direction:column;gap:10px;align-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
  flex:1;
}
.ghc-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.ghc-available{
  font-size:13px;font-weight:800;color:var(--gold-light);
  letter-spacing:.4px;text-shadow:0 0 10px rgba(201,162,39,.4);
}

/* shared tag pill */
.gtag{
  padding:3px 10px;font-size:11px;font-weight:600;
  background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.22);
  border-radius:12px;color:var(--gold);
}
.gtag.dim{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.35);
}

@media(max-width:640px){
  .games-duo{grid-template-columns:1fr;max-width:400px;}
}

/* ══════════════════════════════
   COMING SOON GRID
══════════════════════════════ */
.coming-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.cs-card{
  position:relative;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:28px 24px;
  display:flex;flex-direction:column;gap:10px;
  opacity:.6;cursor:not-allowed;
  backdrop-filter:blur(6px);
  transition:opacity .2s;
}
.cs-card:hover{opacity:.72;}
.cs-icon{font-size:36px;line-height:1;filter:grayscale(.5);}
.cs-badge{
  position:absolute;top:16px;right:16px;
  padding:4px 10px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;color:rgba(255,255,255,.38);
}
.cs-name{font-size:20px;font-weight:800;color:rgba(255,255,255,.7);}
.cs-desc{font-size:13px;color:rgba(255,255,255,.35);line-height:1.6;flex:1;}
.cs-tags{display:flex;flex-wrap:wrap;gap:5px;}
.cs-btn{
  margin-top:6px;padding:10px 0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;color:rgba(255,255,255,.25);
  font-size:13px;font-weight:700;text-align:center;
}


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:768px){
  .section{padding:72px 20px;}
}
@media(max-width:540px){
  .nav-inner{gap:10px;padding:0 14px;}
  .btn-login,.btn-register{padding:8px 14px;font-size:13px;}
  .nav-username,.nav-balance-label{display:none;}
  .nav-balance-amount{font-size:13px;}
}
@media(max-width:480px){
  .games-grid{grid-template-columns:1fr;}
  .nav-logo{height:36px;}
}