/* Landing / Age Gate — xBetBrothers */
/* Colors */
:root{
  --bg-deep: #050616;
  --bg-mid: #0e1230;
  --neon-purple: #8B5CF6;
  --neon-blue: #3B82F6;
  --accent: linear-gradient(90deg,var(--neon-purple),var(--neon-blue));
  --gold: #F6C85F;
  --muted: rgba(255,255,255,0.72);
  --card-bg: rgba(255,255,255,0.03);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #fff;
  background:
    radial-gradient(800px 400px at 10% 85%, rgba(139,92,246,0.06), transparent 6%),
    radial-gradient(700px 300px at 85% 15%, rgba(59,130,246,0.04), transparent 6%),
    linear-gradient(180deg,var(--bg-deep),var(--bg-mid));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Layout wrap */
.landing-wrap{width:100%;max-width:1100px;padding:28px}

/* top header */
.landing-top{display:flex;justify-content:center;margin-bottom:20px}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;background:transparent;padding:6px 12px}
.brand{display:flex;gap:12px;align-items:center}
.brand-logo{width:64px;height:auto;display:block;filter:drop-shadow(0 16px 40px rgba(139,92,246,0.14))}
.brand-name{font-weight:800;color:var(--neon-purple);font-family: 'Rubik', sans-serif}
.brand-sub{font-size:12px;color:var(--muted)}

/* socials (header) */
.socials{display:flex;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-weight:700;text-decoration:none;color:#fff;font-size:13px}
.pill.twitch{background:linear-gradient(90deg,#7f4ef0,#5aa3ff);box-shadow:0 12px 36px rgba(91,66,255,0.08)}
.pill.discord{background:linear-gradient(90deg,#5865F2,#4752C4);box-shadow:0 12px 36px rgba(71,82,196,0.08)}

/* main card */
.landing-main{display:flex;justify-content:center}
.card{
  width:560px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  border: 1px solid rgba(139,92,246,0.06);
  border-radius:12px;
  box-shadow: 0 30px 80px rgba(2,6,23,0.6);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(6px);
}

/* little top row */
.card-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.age-badge{background:linear-gradient(90deg,#ff4757,#ff9a6b);padding:6px 12px;border-radius:999px;font-weight:800;color:#fff}
.title{font-family:'Rubik', sans-serif;font-size:28px;margin:0;color:#fff;letter-spacing:0.2px}
.lead{color:var(--muted);max-width:440px;margin:0}

/* hero logo */
.card-hero{display:flex;justify-content:center;margin-top:4px}
.hero-logo{width:140px;height:auto;filter:drop-shadow(0 18px 42px rgba(59,130,246,0.08))}

/* body / actions */
.card-body{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.muted{color:var(--muted)}
.actions{display:flex;gap:12px;align-items:center}
.btn{
  padding:12px 20px;border-radius:12px;border:0;font-weight:800;cursor:pointer;font-family:'Rubik',sans-serif;
  box-shadow: 0 10px 28px rgba(2,6,23,0.4);
}
.btn-primary{
  text-decoration: none;
  background: linear-gradient(90deg,var(--neon-purple),var(--neon-blue));
  color: #fff;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow: 0 16px 44px rgba(59,130,246,0.12);
}

.btn-ghost{ 
    text-decoration: none;
  background-color: #0000007c;;
  color: #fff;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow: 0 16px 44px rgba(59,130,246,0.12);
}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost:hover{transform:translateY(-3px)}

/* small note */
.small-note{font-size:13px;color:var(--muted);margin-top:6px}

/* footer */
.landing-footer{text-align:center;margin-top:18px;color:rgba(255,255,255,0.5);font-size:13px}

/* responsive */
@media (max-width:640px){
  .card{width:92%;padding:18px}
  .brand-logo{width:52px}
  .hero-logo{width:120px}
  .title{font-size:22px}
  .btn{padding:10px 14px}
}

/* subtle animated glow (decorative circles) */
.card::before, .card::after{
  content:"";
  position:absolute;z-index:0;border-radius:50%;
  pointer-events:none;
}
.card::before{
  width:520px;height:520px;right:-160px;top:-120px;
  background:radial-gradient(circle at 30% 30%, rgba(139,92,246,0.09), transparent 20%), radial-gradient(circle at 70% 70%, rgba(59,130,246,0.06), transparent 25%);
  filter: blur(40px);
  transform: scale(1);
}
.card::after{
  width:380px;height:380px;left:-120px;bottom:-160px;
  background:radial-gradient(circle at 20% 30%, rgba(247,181,93,0.03), transparent 20%);
  filter: blur(40px);
  opacity:0.85;
}


/* FORCE LOGO VISIBILITY - FINAL FIX */
.logo-stage {
  position: relative;
  z-index: 9999;
  overflow: visible;
}

/* FORCE VISIBILITY FOR ALL IMAGES & VIDEOS (GLOBAL FIX) */
/* FORCE VISIBILITY FOR ALL IMAGES & VIDEOS (GLOBAL FIX) */
img,
video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  z-index: 9999 !important;
  position: relative !important;
  pointer-events: auto !important;
  max-width: 100%;
  height: auto;
}