/* =====================================================================
   UltimateX — Homepage Refresh  ·  "Sleek Minimal Dark"
   Overrides /css/style.css for index.php only (loaded after it).
   No markup/PHP changed — purely visual. Safe & reversible.
   ===================================================================== */

:root{
  --ux-bg:#070b14;
  --ux-bg-soft:#0c1220;
  --ux-line:rgba(255,255,255,.07);
  --ux-line-strong:rgba(255,255,255,.14);
  --ux-text:#e7ecf3;
  --ux-muted:#8a98ad;
  --ux-accent:#38bdf8;          /* calmer sky-cyan */
  --ux-accent-soft:rgba(56,189,248,.14);
}

/* ---- Base canvas: flat, quiet ---- */
body{ background:var(--ux-bg)!important; color:var(--ux-text)!important; }
#particles{
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(56,189,248,.06), transparent 60%),
    var(--ux-bg)!important;
}
::selection{ background:var(--ux-accent); color:#04121d; }

/* slim modern scrollbar */
*::-webkit-scrollbar{ width:10px;height:10px; }
*::-webkit-scrollbar-track{ background:var(--ux-bg); }
*::-webkit-scrollbar-thumb{ background:#22304a;border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:#33476b; }

/* ---- Header / nav: calm, organised ---- */
header{
  background:rgba(7,11,20,.72)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid var(--ux-line)!important;
  padding:16px 6%!important;
}
.logo{ letter-spacing:-.5px!important; }
.logo span{ color:var(--ux-accent)!important; }
nav{ gap:2px!important; }
nav a{
  font-family:'Rajdhani',sans-serif!important;
  font-size:.9rem!important;
  font-weight:600!important;
  letter-spacing:.2px!important;
  color:var(--ux-muted)!important;
  text-transform:none!important;
  padding:9px 14px!important;
  border-radius:10px!important;
  transition:.18s!important;
}
nav a:hover{ color:#fff!important; background:rgba(255,255,255,.06)!important; }
nav .nav-cta{
  background:var(--ux-accent)!important;
  color:#04121d!important;
  font-weight:800!important;
  box-shadow:none!important;
  border:none!important;
  margin-left:6px;
}
nav .nav-cta:hover{ background:#7dd3fc!important; color:#04121d!important; }

/* ---- Hero: cinematic but quiet ---- */
.hero{ background-size:cover!important; }
.hero::before{
  background:linear-gradient(180deg, rgba(7,11,20,.55) 0%, rgba(7,11,20,.86) 60%, var(--ux-bg) 100%)!important;
}
.zombie-overlay{ opacity:.10!important; filter:grayscale(1) brightness(.7)!important; }
.hero:hover .zombie-overlay{ opacity:.16!important; filter:grayscale(1) brightness(.8)!important; }

/* keep the original glitch FX on the hero wordmark (XPlayZM) */
.subtitle{ color:var(--ux-muted)!important; letter-spacing:1px!important; font-weight:600!important; }
.subtitle span{ color:var(--ux-accent)!important; }

.status-dot{ box-shadow:none!important; }
.server-status{ letter-spacing:1.5px!important; font-size:.8rem!important; opacity:.95; }

/* ---- Connect box: tidy card ---- */
/* Connect info: NO black box — free/transparent over the hero bg */
.ip-box{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:10px 0!important;
}
/* Map preview: blend the GameTracker screenshot into the dark UI */
.map-thumb{
  border-radius:12px!important;
  border:1px solid var(--ux-line)!important;
  width:130px!important; height:90px!important;
  object-fit:cover!important;
  filter:grayscale(.45) brightness(.62) contrast(1.12) saturate(.7)!important;
  position:relative!important;
}
@media (max-width:768px){ .map-thumb{ width:100%!important; height:120px!important; } }
.player-count{ color:var(--ux-accent)!important; }
.copy-btn{
  border:1px solid var(--ux-line-strong)!important;
  background:transparent!important;
  color:#fff!important;
  border-radius:10px!important;
}
.copy-btn:hover{ background:#fff!important; color:#04121d!important; box-shadow:none!important; }

/* ---- Buttons: one system, flat, sharp ---- */
.btn{
  border-radius:12px!important;
  font-weight:800!important;
  letter-spacing:.4px!important;
  text-transform:none!important;
  font-size:.92rem!important;
  padding:15px 28px!important;
  transition:.18s!important;
}
.btn-main{
  background:var(--ux-accent)!important;
  color:#04121d!important;
  box-shadow:none!important;
}
.btn-main:hover{ background:#7dd3fc!important; transform:translateY(-2px)!important; }
/* keep per-button accent colors (inline) — only normalise shape/bg */
.btn-sec{
  background:rgba(255,255,255,.03)!important;
  border-width:1px!important; border-style:solid!important;
}
.btn-sec:hover{ background:rgba(255,255,255,.07)!important; transform:translateY(-2px)!important; }
.hero-btns{ gap:12px!important; }

/* ---- Sections: breathing room + container feel ---- */
section{ padding:84px 6%!important; }
.section-title{
  letter-spacing:-.5px!important;
  font-weight:900!important;
}

/* ---- Cards: uniform, minimal ---- */
.card{
  background:rgba(255,255,255,.025)!important;
  border:1px solid var(--ux-line)!important;
  border-radius:18px!important;
  transition:.2s!important;
}
.card:hover{
  transform:translateY(-4px)!important;
  border-color:var(--ux-line-strong)!important;
  background:rgba(255,255,255,.04)!important;
}
.card i{ color:var(--ux-accent)!important; font-size:2.4rem!important; margin-bottom:18px!important; }
.card h3{ letter-spacing:-.3px!important; }
.card p{ color:var(--ux-muted)!important; }

/* ---- Reward / news pills: calmer ---- */
.reward-widget{
  background:var(--ux-bg-soft)!important;
  border:1px solid var(--ux-line)!important;
  box-shadow:none!important;
}

/* ---- Footer ---- */
footer{ background:#05080f!important; border-top:1px solid var(--ux-line)!important; }
.footer-text span{ color:var(--ux-accent)!important; }

/* ---- Mobile polish ---- */
@media (max-width:768px){
  header{ padding:14px 5%!important; }
  nav{ flex-wrap:wrap; justify-content:flex-end; }
  nav a{ font-size:.82rem!important; padding:7px 10px!important; }
  section{ padding:60px 5%!important; }
  .btn{ padding:13px 22px!important; font-size:.86rem!important; }
}