/* ============================================================
   Jupitercast — styles (faithful to nfxgaming.com)
   Dark monochrome theme. Retheme by editing the variables below.
   ============================================================ */
:root{
  --bg:#17181A;        /* page background (charcoal) */
  --black:#000000;     /* darker alternating bands */
  --white:#FFFFFF;     /* emphasis + button bg + stat numbers */
  --text:#FFFCFC;      /* body text (off-white) */
  --muted:#C4C4C4;     /* secondary text */
  --green:#3fcf6a;     /* live "Playing" value on game cards */
  --line:rgba(255,252,252,0.12);
  --wide:80rem;
  --pad-x:clamp(1.5rem,6vw,2rem);
  --pad-y:clamp(3.5rem,10vw,6rem);
  --gap:clamp(1.5rem,6vw,2rem);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Hind",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(0.95rem,1.4vw,1.0625rem);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4,.brand span,.nav a,.btn-display{
  font-family:"Koulen",Impact,"Arial Narrow Bold",sans-serif;
  font-weight:400;line-height:1.1;text-transform:uppercase;letter-spacing:0.01em;
}
h1,h2,h3,h4{margin:0;color:var(--text);letter-spacing:-0.01em;}
p{margin:0;}

/* layout helpers */
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad-x);width:100%;}
.section{padding-block:var(--pad-y);padding-inline:var(--pad-x);}
.section>.wrap{padding-inline:0;}
.band-black{background:var(--black);}
.band-base{background:var(--bg);}
.center{text-align:center;}
.muted{color:var(--muted);}
.mt-intro{margin-top:16px;}
.section-head h2{font-size:clamp(1.85rem,4.5vw,3rem);}
.section-head .mt-intro{color:var(--muted);max-width:62ch;}
.section-head.center{text-align:center;}
.section-head.center .mt-intro{margin-inline:auto;}

/* buttons */
.btn{
  display:inline-block;background:var(--white);color:var(--bg);
  font-family:"Hind",sans-serif;font-weight:600;font-size:1rem;
  padding:0.7em 1.5em;border-radius:9999px;border:0;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--muted);}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);}
.site-header>.wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:clamp(0.9rem,2.5vw,1.2rem);}
.brand{display:flex;align-items:center;gap:0.6rem;color:var(--text);}
.brand span{font-size:1.5rem;}
.brand .logo{width:34px;height:34px;flex:0 0 auto;}
.nav{display:flex;align-items:center;gap:clamp(1rem,3vw,1.8rem);}
.nav a{font-size:1.05rem;color:var(--text);letter-spacing:0.04em;}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;}
.menu-btn,.menu-close{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:6px;}
.menu-btn svg,.menu-close svg{width:28px;height:28px;display:block;}
@media(max-width:760px){
  .menu-btn{display:inline-flex;}
  .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;
    gap:2rem;transform:translateX(100%);transition:transform .25s ease;z-index:70;}
  .nav a{font-size:2rem;}
  .site-header.open .nav{transform:translateX(0);}
  .menu-close{display:inline-flex;position:absolute;top:1.4rem;right:1.4rem;}
}

/* ---------- hero ---------- */
.hero{background:var(--bg);text-align:center;}
.hero h1{font-size:clamp(2.25rem,6vw,3.75rem);max-width:18ch;margin-inline:auto;}
.hero .sub{margin-top:16px;font-size:clamp(1rem,2vw,1.25rem);color:var(--text);}
.hero .btn{margin-top:clamp(2rem,8vw,3rem);}

/* hero banner — replace .ghost with <img src="assets/your-art.jpg" alt=""> */
.banner-section{padding:0 var(--pad-x) clamp(2rem,8vw,4rem);}
.hero-banner{max-width:var(--wide);margin:0 auto;border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%, #2a2c30 0%, #17181A 62%);}
.hero-banner img{width:100%;height:auto;display:block;}
.hero-banner:not(:has(img)){min-height:clamp(220px,40vw,420px);display:grid;place-items:center;}
.hero-banner .ghost{font-family:"Koulen",sans-serif;text-transform:uppercase;
  font-size:clamp(2.5rem,10vw,6rem);color:rgba(255,252,252,0.05);letter-spacing:0.05em;}

/* ---------- page title band ---------- */
.page-title{background:var(--black);padding-block:clamp(1.5rem,6vw,2rem);padding-inline:var(--pad-x);}
.page-title h1{font-size:clamp(1rem,2.2vw,1.5rem);text-align:left;letter-spacing:0.05em;}

/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.stats-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.stat-card{background:var(--bg);padding:clamp(1.5rem,4vw,2rem) clamp(1.25rem,3vw,1.5rem);}
.stat-num{font-family:"Koulen",sans-serif;text-transform:uppercase;color:var(--white);
  font-size:clamp(1.85rem,4.5vw,3rem);line-height:1;}
.stat-label{font-family:"Koulen",sans-serif;text-transform:uppercase;font-size:1.25rem;margin-top:12px;color:var(--text);}
.stat-cap{font-size:0.875rem;color:var(--muted);margin-top:8px;}
@media(max-width:680px){.stats-grid{grid-template-columns:1fr;}}
@media(max-width:780px){.stats-4{grid-template-columns:repeat(2,1fr);}}

/* ---------- two-column intro ---------- */
.two-col{display:flex;gap:clamp(2rem,5vw,3.5rem);align-items:flex-start;}
.two-col>*{flex:1 1 0;min-width:0;}
.two-col h2{font-size:clamp(1.85rem,4.5vw,3rem);}
.two-col .body p{color:var(--text);}
.two-col .body p+p{margin-top:1rem;}
@media(max-width:820px){.two-col{flex-direction:column;}}

/* ---------- games grid ---------- */
.games-head h2{font-size:clamp(1.85rem,4.5vw,3rem);}
.games-head p{color:var(--muted);margin-top:16px;max-width:60ch;}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(1rem,2.5vw,1.5rem);margin-top:clamp(2rem,5vw,3rem);}
.game-card{background:var(--black);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .12s ease,border-color .12s;}
.game-card:hover{transform:translateY(-3px);border-color:rgba(255,252,252,0.25);}
.game-thumb{position:relative;aspect-ratio:16/9;background:#0d0e0f;overflow:hidden;}
.game-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.game-thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,0.15);}
.badge-new{position:absolute;top:10px;left:10px;background:var(--white);color:var(--bg);
  font-family:"Koulen",sans-serif;text-transform:uppercase;font-size:0.8rem;letter-spacing:0.06em;
  padding:1px 10px;border-radius:9999px;}
.badge-rank{position:absolute;top:10px;left:10px;background:var(--white);color:var(--bg);
  font-family:"Koulen",sans-serif;font-size:1rem;letter-spacing:0.03em;min-width:32px;text-align:center;
  padding:1px 10px;border-radius:9999px;}
.game-title{font-family:"Koulen",sans-serif;text-transform:uppercase;font-size:1.3rem;padding:14px 16px 0;color:var(--text);}
.game-stats{display:flex;gap:1.5rem;padding:10px 16px 0;}
.game-stat{display:flex;flex-direction:column;}
.game-stat .l{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}
.game-stat .v{font-size:1rem;font-weight:600;}
.game-stat .v.green{color:var(--green);}
.game-foot{padding:14px 16px 16px;margin-top:auto;}
.game-foot .btn{font-size:0.95rem;padding:0.55em 1.4em;}

/* ---------- gallery ---------- */
.gallery{display:flex;gap:clamp(1rem,2.5vw,1.5rem);margin-top:clamp(2rem,5vw,3rem);}
.gallery .col{flex:1 1 0;display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.5rem);}
.media-placeholder{background:radial-gradient(120% 140% at 50% 0%, #2a2c30 0%, #121315 70%);
  border-radius:12px;display:grid;place-items:center;color:rgba(255,252,252,0.10);
  font-family:"Koulen",sans-serif;text-transform:uppercase;letter-spacing:0.08em;overflow:hidden;}
.media-placeholder img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.tall{min-height:clamp(320px,42vw,520px);}
.wide-16x9{aspect-ratio:16/9;}
.square{aspect-ratio:1;}
@media(max-width:820px){.gallery{flex-direction:column;}}

/* ---------- contact ---------- */
.contact-grid{display:flex;gap:clamp(2rem,5vw,3.5rem);align-items:flex-start;}
.contact-intro{flex:0 0 40%;}
.contact-intro h2{font-size:clamp(1.85rem,4.5vw,3rem);}
.contact-intro p{color:var(--muted);margin-top:16px;}
.form-card{flex:1 1 0;background:var(--black);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.5rem,4vw,2.5rem);}
.field{margin-bottom:1.1rem;}
.field label{display:block;font-size:0.95rem;margin-bottom:8px;color:var(--text);}
.field label .req{color:var(--muted);}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font:inherit;padding:12px 14px;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--muted);}
.field textarea{min-height:140px;resize:vertical;}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden;}
@media(max-width:820px){.contact-grid{flex-direction:column;}.contact-intro{flex-basis:auto;}}

/* ---------- faq ---------- */
.faq-list{flex:1 1 0;}
.faq-item{padding-block:clamp(1.25rem,3vw,1.5rem);border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:0;}
.faq-item h4{font-size:1.3rem;}
.faq-item p{color:var(--muted);margin-top:12px;}
.faq-media{flex:1 1 0;}

/* ---------- footer ---------- */
.site-footer{background:var(--bg);padding-block:var(--pad-y);text-align:center;}
.site-footer .brand{justify-content:center;}