/* Vibin' & Survivin' -- marketing site stylesheet.
   Reuses the same design tokens (colors/fonts) as the game's own style.css
   for brand consistency, but is otherwise a fully independent stylesheet --
   this site has no dependency on the game's CSS/JS. */

:root {
  --bg-color: #0b0813;
  --panel-bg: rgba(22, 17, 39, 0.72);
  --border-color: rgba(255, 255, 255, 0.08);

  --color-primary: #a855f7;
  --color-primary-glow: rgba(168, 85, 247, 0.4);
  --color-secondary: #ec4899;
  --color-secondary-glow: rgba(236, 72, 153, 0.4);
  --color-accent-blue: #38bdf8;
  --color-text-main: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-success: #10b981;
  --color-muted-btn: rgba(255, 255, 255, 0.06);

  --font-main: 'Outfit', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;

  --max-width: 1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-color);
  color: var(--color-text-main);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 90px 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

/* ---- Top nav ---- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(to bottom, rgba(11, 8, 19, 0.9), transparent);
  backdrop-filter: blur(4px);
}

.site-nav__logo img {
  height: 34px;
  width: auto;
}

.site-nav__links {
  display: flex;
  gap: 28px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav__links a {
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.site-nav__links a:hover { color: var(--color-text-main); }

/* ---- Hero ---- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 100px;
  background-image:
    linear-gradient(180deg, rgba(11,8,19,0.35) 0%, rgba(11,8,19,0.55) 55%, var(--bg-color) 100%),
    url('assets/hero-bg.webp?v=2');
  background-size: cover;
  /* Focal point, not a guess: the key art puts the armoured survivor right of
     centre, so a plain `center` crop slices his head in half the moment the
     viewport goes portrait (checked by simulating a 390x844 cover crop at
     50% / 62% / 70%). 62% keeps the head, helmet glow and raised pistol all
     in frame on a phone, and on desktop it shifts the crop by only ~40px so
     the wide composition is unaffected. */
  background-position: 62% 30%;
}

.hero__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hero__logo {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.5));
}

.hero__tagline {
  font-size: 1.15rem;
  color: rgba(243, 244, 246, 0.9);
  max-width: 560px;
}

.hero__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-blue);
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.08);
  border-radius: 999px;
  padding: 6px 16px;
}

/* ---- Store / CTA buttons ---- */

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.store-btn:hover { transform: translateY(-2px); }

.store-btn--live.store-btn--steam {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  box-shadow: 0 0 24px var(--color-primary-glow);
}

.store-btn--live {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  box-shadow: 0 0 24px var(--color-primary-glow);
}

.store-btn--muted {
  background: var(--color-muted-btn);
  border-color: var(--border-color);
  color: var(--color-text-muted);
  cursor: default;
}

.store-btn--muted:hover { transform: none; }

.store-btn__icon { font-size: 1.1rem; line-height: 1; }

.store-btn__sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Section headers ---- */

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.section-header__eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 10px;
}

.section-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 12px;
}

.section-header p {
  color: var(--color-text-muted);
  font-size: 0.98rem;
}

/* ---- Screenshots ---- */

.screenshots {
  background: linear-gradient(180deg, transparent, rgba(168,85,247,0.04), transparent);
}

.screenshot-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.screenshot-gallery__item {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.screenshot-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(168,85,247,0.25);
}

.screenshot-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.screenshot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 3, 10, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.screenshot-lightbox.is-open { display: flex; }

.screenshot-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(168,85,247,0.35);
}

.screenshot-lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

/* ---- Features ---- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.feature-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 26px 24px;
}

.feature-card__icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--color-text-main);
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---- What's New ---- */

.whats-new-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}

.whats-new-entry {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 26px;
}

.whats-new-entry__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.whats-new-entry__version {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
}

.whats-new-entry__date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-family: monospace;
}

.whats-new-entry__intro {
  color: rgba(243,244,246,0.85);
  font-size: 0.92rem;
  margin-bottom: 10px;
}

.whats-new-entry__section-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-blue);
  margin: 12px 0 6px;
}

.whats-new-entry ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.whats-new-entry li {
  font-size: 0.87rem;
  color: rgba(243,244,246,0.8);
  padding-left: 16px;
  position: relative;
}

.whats-new-entry li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.whats-new-more {
  text-align: center;
  margin-top: 28px;
}

.whats-new-more a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent-blue);
  text-decoration: none;
}

/* ---- Bottom CTA band ---- */

.cta-band {
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(168,85,247,0.12), transparent 70%);
}

.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 10px;
}

.cta-band p {
  color: var(--color-text-muted);
  margin-bottom: 30px;
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--border-color);
  padding: 40px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.site-footer a {
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color 0.2s;
}

.site-footer a:hover { color: var(--color-text-main); }

.site-footer__links {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .site-nav__links { display: none; }
  section { padding: 60px 0; }
  .hero { padding-top: 120px; }

  /* On a phone the cover crop fills the frame with the survivor's helmet and
     chest plate, so the hero copy sits directly over the busiest, brightest
     part of the art rather than over open sky as it does on desktop. Deepen
     the overlay here only -- the desktop composition doesn't need it and
     darkening it there would flatten the neon. */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(11,8,19,0.55) 0%, rgba(11,8,19,0.72) 55%, var(--bg-color) 100%),
      url('assets/hero-bg.webp?v=2');
  }
}