/* ===== Enthusia palette ===== */
:root{
  --bg:#0c0f14; --fg:#f5fbff; --muted:#a7b7c8; --card:#121826; --border:#273447;
  --brand-red:#ff3b3b; --brand-orange:#ff8a00; --brand-yellow:#ffd166;
  --brand-grad:linear-gradient(90deg, var(--brand-red), var(--brand-orange), var(--brand-yellow));
  --good:#47d16c;

  /* spacing */
  --s-0:8px; --s-1:12px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:80px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block}
a{color:#ffd166;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.tiny{font-size:12px;color:var(--muted)}

/* ★ Global section spacing and a hard “stack” utility so cards never touch */
main > section{margin-block: var(--s-6);}
.stack{margin-block: var(--s-6) !important;}

/* Background diamond pattern (fixed) */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.08;
  background-image:
    linear-gradient(45deg, #ffffff10 25%, #0000 25%),
    linear-gradient(-45deg, #ffffff10 25%, #0000 25%),
    linear-gradient(45deg, #0000 75%, #ffffff10 75%),
    linear-gradient(-45deg, #0000 75%, #ffffff10 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:5;
  background:linear-gradient(180deg, rgba(14,18,26,.95), rgba(14,18,26,.75));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:10px}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none}
.logo-img{height:40px;width:auto}
.wordmark{font-family:'Fredoka', system-ui; font-weight:900; font-size:22px; letter-spacing:.2px}

.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
  color:var(--fg); font-weight:800; line-height:1;
  padding:11px 16px; border-radius:12px; border:1px solid var(--border); background:#141c2a;
}
.nav a.active{
  color:#111; border:1px solid transparent;
  background-image: var(--brand-grad), var(--brand-grad);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow:0 10px 24px rgba(255,138,0,.25);
}
.nav a:hover{filter:brightness(1.05)}

/* ===== Card base ===== */
.mc-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14)), var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,200,120,.06) inset;
}

/* Hover glow utility */
.card-hover-glow:hover{
  box-shadow:0 16px 40px rgba(255,138,0,.18), 0 0 0 1px rgba(255,200,120,.10) inset;
}

/* ===== Titles ===== */
.section-title{
  font-weight:900; letter-spacing:.2px; margin:0 0 var(--s-2);
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Hero ===== */
.hero{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-5);align-items:start}
.brand-title{
  font-family:'Fredoka', system-ui; font-weight:900;
  font-size:clamp(36px,7vw,64px); line-height:1.05; margin:0 0 var(--s-1);
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-subtitle{
  font-family:'Fredoka', system-ui; font-weight:900;
  font-size:clamp(18px,3vw,28px); margin:0 0 var(--s-2); color:#ffe4ad;
}
.subtitle{color:var(--muted); margin:0 0 var(--s-3)}

.ip-box{
  display:flex;align-items:stretch;gap:10px;background:#0e1624;
  border:1px solid #23324a;border-radius:14px;padding:10px
}
.ip-left{display:flex;gap:10px;align-items:center}
.ip-left .label{
  font-family:'Fredoka',system-ui;font-weight:900;font-size:12px;letter-spacing:.3px;
  background:#18243a;border:1px solid #22314a;border-radius:8px;padding:6px 8px
}
.ip-left .value{font-weight:900;font-size:18px}

.btn{
  border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;
  background:var(--brand-grad); color:#111; box-shadow:0 10px 30px rgba(255,138,0,.25);
}
.btn:hover{filter:brightness(1.04)}
.btn.ghost{background:#141f31;color:var(--fg);border:1px solid var(--border);box-shadow:none}
.btn.small{padding:8px 12px;font-size:12px}

/* Pill rows — now with guaranteed vertical spacing */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s-2)}
.pill-row{
  display:flex; flex-wrap:wrap; gap:12px 12px; /* row-gap and column-gap */
  margin-top: var(--s-2);
}
.pill{
  display:inline-flex;align-items:center;gap:8px;background:#121a2b;border:1px solid var(--border);
  padding:8px 10px;border-radius:999px;font-weight:800;
}
.pill .dot{width:10px;height:10px;border-radius:999px;background:#666}
.pill .dot.on{background:var(--good)}
.pill-online{border-color:#1e8b54;background:linear-gradient(180deg,#10241a,#0f1b28)}
.pill-version{border-color:#7a4f00;background:linear-gradient(180deg,#20190d,#0f1b28)}

/* ===== Discord card ===== */
.discord .discord-card{min-height:180px}
.discord-card .head{display:flex;align-items:center;justify-content:space-between}
.discord-card .title{font-weight:900}
.discord-card .counts{display:flex;gap:8px}
.discord-card .avatars{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.discord-card .avatars img{width:28px;height:28px;border-radius:999px;border:1px solid var(--border);background:#0f141d}

/* ===== Features ===== */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.feature{display:flex;gap:12px;align-items:flex-start}

/* ===== Staff ===== */
.staff .section-head{margin-bottom:var(--s-3)}
.staff-grid{
  display:grid; gap:var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.staff-card{
  display:flex; align-items:center; gap:14px;
  padding:14px; border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10)), var(--card);
  box-shadow:0 10px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,200,120,.06) inset;
}
.staff-card .skin{
  width:72px; height:auto; border-radius:10px; border:1px solid var(--border); background:#0f141d;
}
.staff-meta{display:flex; flex-direction:column; gap:4px}
.staff-name{font-weight:900}
.staff-role{font-weight:800; color:#ffe4ad}

/* ===== Gallery (images not clickable) ===== */
.gallery .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.gallery .shot{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0e1522}
.gallery .shot img{width:100%;height:auto;display:block;pointer-events:none}

/* ===== Changelogs ===== */
.changelog-cta .changelog-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ===== FAQ boxes ===== */
.faq .faq-box{
  border:1px solid var(--border); border-radius:12px; padding:0; background:#0f1726; margin: var(--s-3) 0;
}
.faq .faq-box > summary{
  cursor:pointer; padding:14px 16px; font-weight:800; list-style:none;
}
.faq .faq-box > summary::-webkit-details-marker{display:none}
.faq .faq-box[open] > summary{border-bottom:1px solid var(--border)}
.faq .faq-box > p{padding:12px 16px; margin:0}

/* ===== Rules teaser ===== */
.rule-list{margin:0;padding-left:18px}
.rule-list.compact li{margin:6px 0}

/* ===== Footer: pill links ===== */
.site-footer{border-top:1px solid var(--border);margin-top:var(--s-6)}
.foot-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-4);align-items:start;padding:16px}
.foot-ip{display:flex;align-items:center;gap:10px}
.foot-ip .label{
  font-family:'Fredoka', system-ui; font-weight:900; font-size:12px;letter-spacing:.2px;
  background:#18263e;border:1px solid #22314a;border-radius:8px;padding:6px 8px
}
.foot-links{display:flex;gap:10px;flex-wrap:wrap}
.pill-link{
  display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:10px;
  background:#141c2a; color:var(--fg); font-weight:800;
}
.pill-link:hover{filter:brightness(1.06)}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .gallery .shots{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .features{grid-template-columns:1fr}
  .gallery .shots{grid-template-columns:1fr}
}