/* ================= Voxel Survival (scoped) ================ */
.vs{
  --bg:#0d1117; --fg:#c9d1d9; --muted:#8b949e; --brand:#58a6ff; --ok:#28a745; --err:#ff4d4d;
  --card:#11171f; --ring:#30363d; --tile:#0f141b; --overlay: rgba(0,0,0,.85);
}

body.vs{ background:var(--bg); color:var(--fg); }
.vs *{ box-sizing:border-box; }

/* Layout / header */
.vs .wrap{ max-width:1100px; margin:0 auto; padding:20px; }
.vs header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.vs .logo{ display:flex; gap:12px; align-items:center; }
.vs .logo-badge{ width:36px; height:36px; border-radius:10px; background:var(--brand); color:#081018; font-weight:800; display:grid; place-items:center; }
.vs .nav a{ color:var(--muted); margin-left:16px; text-decoration:none; }
.vs .nav a:hover{ color:var(--fg); }

/* Hero */
.vs .hero{
  background:linear-gradient(180deg,#0d1117 0%, #0b1219 100%), url('/assets/images/hero-noise.png');
  border:1px solid var(--ring); border-radius:16px; padding:28px;
}
.vs .eyebrow{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.vs .eyebrow .dot{ width:8px; height:8px; border-radius:8px; background:var(--brand); display:inline-block; }
.vs h1{ font-size:clamp(26px,3.2vw,44px); line-height:1.12; margin:6px 0 10px; }
.vs .sub{ color:var(--muted); max-width:70ch; }

/* CTAs / badges */
.vs .actions{ display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }
.vs .actions.center{ justify-content:center; } /* new */
.vs .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--ring); border-radius:12px; text-decoration:none; color:var(--fg); background:#0f1723; }
.vs .btn.small { padding:8px 12px; font-size:14px; } /* new */
.vs .btn.primary{ background:var(--brand); color:#081018; border-color:transparent; font-weight:700; }
.vs .btn[aria-disabled="true"], .vs .btn[disabled]{ opacity:.6; cursor:not-allowed; pointer-events:none; } /* merged */
.vs .badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.vs .badges{ justify-content:center; } /* new center on badges */
.vs .pill{ border:1px solid var(--ring); color:var(--muted); border-radius:999px; padding:6px 10px; font-size:12px; }
.vs .pill.soon { background:#30363d; color:#9aa7b5; } /* new */

/* Notices, grid, footer */
.vs .notice{ margin-top:14px; background:var(--tile); border:1px solid var(--ring); border-radius:12px; padding:10px 12px; }
.vs .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:18px; }
.vs .card{ background:var(--tile); border:1px solid var(--ring); border-radius:12px; padding:12px; }
.vs footer{ display:flex; justify-content:space-between; align-items:center; margin:18px 0; color:var(--muted); font-size:14px; }
.vs code.kbd{ background:#0b1117; border:1px solid var(--ring); padding:2px 6px; border-radius:6px; }
.vs .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Content link styles (only inside main; doesn't touch nav/buttons) */
.vs main a:not(.btn){
  color: var(--brand); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color .15s, text-decoration-thickness .15s;
}
.vs main a:not(.btn):hover{ text-decoration-thickness: 2px; }
.vs main a:not(.btn):focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.vs main a:not(.btn):visited{ color:#9fb4d6; }

/* Countdown (includes Years) */
.vs .count{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.vs .tile{ background:var(--tile); border:1px solid var(--ring); border-radius:12px; padding:10px 14px; min-width:84px; text-align:center; }
.vs .num{ font-weight:800; font-size:28px; }
.vs .lab{ color:var(--muted); font-size:12px; }

/* Center prelaunch/live blocks + countdown row (new) */
.vs #prelaunch, .vs #live{
  display:grid; justify-items:center; text-align:center; gap:14px;
}
.vs #countdown, .vs .count{
  display:flex; gap:10px; align-items:stretch; justify-content:center; margin:8px auto 0;
}

/* Forms */
.vs form.notify{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.vs form.notify{ justify-content:center; max-width:520px; margin-left:auto; margin-right:auto; gap:8px; } /* new centering */
.vs form.notify input[type="email"]{ background:#0f141b; border:1px solid var(--ring); border-radius:10px; padding:10px 12px; color:#fff; min-width:260px; flex:1 1 300px; } /* new flex */
.vs form.notify button{ background:#141a23; border:1px solid var(--ring); color:var(--fg); border-radius:10px; padding:10px 12px; white-space:nowrap; } /* new nowrap */
.vs .msg{ margin-top:8px; font-size:14px; }
.vs .msg.ok{ color:var(--ok); } .vs .msg.err{ color:var(--err); }

/* Section title */
.vs .section-title{ margin:28px 0 10px; font-size:20px; font-weight:700; } /* normalized to latest */

/* Gallery */
.vs .gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;
}
.vs .gallery figure{
  margin:0; background:var(--tile); border:1px solid var(--ring); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
}
.vs .gallery img, .vs .gallery video{
  width:100%; height:160px; object-fit:cover; display:block;
}
/* Force captions to sit UNDER the media */
.vs .gallery figure > figcaption{
  position: static !important; inset: auto !important;
  display:flex; flex-direction:column; gap:4px; padding:10px; font-size:13px; color:var(--muted); background:transparent;
}
.vs .gallery .cap-left{ color:var(--fg); font-weight:600; overflow:visible; white-space:normal; }
.vs .gallery .cap-right{ opacity:.7; }

/* Thank-you banner (new) */
.vs .dl-thanks{
  display:none; margin:16px 0; padding:14px 16px; border:1px solid var(--ring);
  background:var(--card); border-radius:10px; text-align:center;
}
.vs .dl-thanks.show{ display:block; }

/* Lightbox (scoped) */
.vs .lightbox{ position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; z-index:9999; padding:20px; }
.vs .lightbox.open{ display:flex; }
.vs .lb-inner{ max-width:min(1100px,95vw); max-height:90vh; }
.vs .lb-inner img, .vs .lb-inner video, .vs .lb-inner iframe{ max-width:100%; max-height:90vh; display:block; background:#000; border-radius:10px; }
.vs .lb-close{
  position:absolute; top:16px; right:16px; background:var(--brand); color:#081018;
  border:none; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer;
}
.vs .lb-prev, .vs .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); border:1px solid var(--ring); color:#fff;
  font-weight:800; font-size:18px; line-height:1; border-radius:10px; padding:10px 14px; cursor:pointer; user-select:none;
}
.vs .lb-prev:hover, .vs .lb-next:hover{ background:rgba(0,0,0,.6); }
.vs .lb-prev{ left:12px; } .vs .lb-next{ right:12px; }
.vs .lb-cap{ color:#c9d1d9; margin-top:10px; text-align:center; font-size:14px; }

/* Center the support line inside the banner */
.vs .dl-thanks { text-align: center; }
.vs .dl-thanks .support-line {
  margin: 6px auto 0;
  max-width: 70ch;
  text-align: center;
}

/* Make sure links in banners are styled (if any non-button links appear later) */
.vs .dl-thanks a:not(.btn) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vs .dl-thanks a:not(.btn):hover { text-decoration-thickness: 2px; }

/* Socials (helper) */
.vs .socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

/* ========================================================== */