/* No fonts, libraries, or other external requests. */

:root {
  color-scheme: dark;
  --bg: #101213;
  --panel: #1b1e20;
  --line: #373c3f;
  --text: #f0eee8;
  --muted: #b4b8b8;
  --orange: #f09958;
  --blue: #8eb8d4;
  --heading: Impact, "Arial Narrow", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 2rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 Arial, Helvetica, sans-serif;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

a { color: inherit; text-underline-offset: 4px; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

::selection { background: var(--orange); color: var(--bg); }

h1, h2, h3, p { margin: 0; }

h1, h2, h3 { font-family: var(--heading); font-weight: 800; line-height: 1.05; }

h1 { font-size: clamp(2.8rem, 11.3vw, 9rem); letter-spacing: -.045em; overflow-wrap: anywhere; }

h2 { font-size: clamp(2rem, 4.5vw, 3.8rem); text-transform: uppercase; letter-spacing: -.025em; }

h3 { font-size: 1.65rem; }

p { color: var(--muted); }

.section, .site-header, .site-footer { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }

.section { padding-block: 64px; border-bottom: 1px solid var(--line); }

.eyebrow, .micro, .map-number, .frame-label, .frame-bottom, .faction-color { font-family: "Courier New", monospace; }

.eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 18px; color: var(--orange);
}

.micro { font-size: .72rem; margin-top: 14px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; background: var(--text); color: var(--bg);
  padding: 10px; z-index: 30; transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 24px; border-bottom: 1px solid var(--line);
}
.wordmark { font-family: var(--heading); font-size: 1.35rem; text-decoration: none; letter-spacing: -.04em; white-space: nowrap; }
.wordmark span { color: var(--orange); }
.wordmark i { font: 700 1rem monospace; color: var(--orange); margin-left: 12px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: .8rem; }
.site-header nav a { text-decoration: none; }
.site-header nav a:hover { color: var(--orange); }
.nav-cta { color: var(--orange); }

/* Buttons */
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 24px;
  min-height: 50px; padding: 13px 23px; border: 1px solid transparent;
  text-decoration: none; font-size: .84rem; font-weight: 700;
  transition: background .18s, color .18s;
}
.primary { background: var(--orange); color: #15100d; }
.primary:hover { background: #ffb783; }
.secondary { background: transparent; border-color: #68747b; color: var(--text); }
.secondary:hover { background: #2b343a; }

/* Hero and trailer */
.hero { padding-top: 64px; background: radial-gradient(ellipse at 80% 30%, #37414733, transparent 65%); }
.signal { display: inline-block; width: 7px; height: 7px; background: var(--orange); margin-right: 6px; }
.tagline { color: var(--text); font-size: clamp(1.3rem, 3vw, 2rem); margin-top: 10px; }
.intro { max-width: 550px; margin-block: 20px 28px; }

.trailer {
  aspect-ratio: 16 / 9; margin-top: 42px; border: 1px solid #596065; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background:
    linear-gradient(135deg, #3b454844, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 5px, #ffffff03 5px 6px),
    radial-gradient(ellipse at bottom, #353b3f, #171b1d 75%);
}
.trailer strong { font-size: clamp(.65rem, 2vw, .9rem); letter-spacing: .14em; color: #c4cacd; }
.play-symbol { font-size: clamp(2rem, 6vw, 4rem); color: var(--orange); line-height: 1; }
.frame-label, .frame-bottom {
  position: absolute; font-size: clamp(.5rem, 1.7vw, .67rem); letter-spacing: .08em; color: #bac1c4; left: 16px;
}
.frame-label { top: 12px; }
.frame-bottom { bottom: 12px; right: 16px; display: flex; justify-content: space-between; }

/* Section headings */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.section-heading > p { max-width: 280px; font-size: .85rem; }

/* Battlefields */
.map-grid, .media-grid, .roadmap-grid { display: grid; gap: 16px; }
.map {
  position: relative; min-height: 280px; padding: 24px; display: flex; flex-direction: column;
  justify-content: space-between; border: 1px solid var(--line); overflow: hidden;
}
.map::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(125deg, transparent 0 35px, #ffffff04 35px 36px);
  pointer-events: none;
}
.jungle { background: linear-gradient(0deg, #161d16, #425041); }
.city { background: linear-gradient(0deg, #181b1d, #48535c); }
.desert { background: linear-gradient(0deg, #252019, #6b5740); }
.map-number { font-size: .7rem; letter-spacing: .1em; color: #e1e1d8; }
.map h3 { margin-bottom: 8px; }
.map p { font-size: .85rem; color: #d1d4ce; }
.coming {
  background: #181a1b; border: 1px dashed #42474a; padding: 22px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.coming h3 { font-size: 1.2rem; color: #aeb3b5; }
.coming p { font: .68rem "Courier New", monospace; text-transform: uppercase; color: #adb2b5; }

/* Factions */
.faction-grid { display: grid; gap: 16px; }
.faction {
  padding: 30px; position: relative; overflow: hidden; min-height: 300px;
  border: 1px solid var(--line); border-top: 3px solid var(--orange);
  background: radial-gradient(ellipse at top right, #c76b2426, transparent 70%), var(--panel);
}
.raptors {
  border-top-color: var(--blue);
  background: radial-gradient(ellipse at top right, #538db333, transparent 70%), var(--panel);
}
.raptors .eyebrow, .raptors .faction-color { color: var(--blue); }
.faction-mark { display: block; font: italic 700 4rem var(--heading); color: var(--orange); opacity: .65; margin-bottom: 20px; }
.raptors .faction-mark { color: var(--blue); }
.faction h3 { text-transform: uppercase; font-size: 2.5rem; }
.faction p:not(.eyebrow) { max-width: 360px; margin-top: 14px; }
.faction-color { display: block; font-size: .65rem; letter-spacing: .15em; color: var(--orange); margin-top: 28px; }

/* Roadmap */
.milestone { border-top: 2px solid #626d74; padding: 25px 5px; }
.milestone.current { border-color: var(--orange); }
.milestone h3 { margin-bottom: 20px; }
.milestone ul { padding-left: 20px; color: var(--muted); margin-bottom: 0; }
.milestone li { margin-block: 8px; }
.milestone li::marker { color: var(--orange); }
.milestone > p:last-child { font-size: .9rem; }

/* Pricing */
.price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; }
.price h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 16px; }
.price strong { color: var(--text); }
.price .orange { color: var(--orange); }

/* Media */
.screenshot {
  padding: 0; position: relative; aspect-ratio: 16 / 9;
  background: radial-gradient(ellipse at top right, #3b464d, #1b2023);
  border: 1px solid #495157; overflow: hidden; color: var(--text); text-align: left;
}
.screenshot img { width: 100%; height: 100%; object-fit: cover; font-size: .8rem; color: var(--muted); }
.screenshot span {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: #101213e8;
  font: .65rem "Courier New", monospace; letter-spacing: .07em; display: flex; justify-content: space-between;
}
.screenshot:hover { border-color: var(--orange); }
.screenshot b { color: var(--orange); }

/* Newsletter */
.contact > p:not(.eyebrow) { margin-top: 16px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-top: 28px; }
.contact form { flex: 1 1 350px; max-width: 650px; }
.contact label { display: block; font-size: .85rem; margin-bottom: 8px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-row input {
  flex: 1 1 180px; min-width: 0; width: 100%; border: 1px solid #677176;
  background: #1c2124; color: var(--text); padding: 14px;
}
.signup-row input::placeholder { color: #a8b0b4; }
#newsletter-status { color: var(--orange); }

/* FAQ */
.faq h2 { margin-bottom: 30px; }
details { border-top: 1px solid var(--line); padding: 20px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; padding-right: 8px; }
summary::marker { color: var(--orange); }
details p { max-width: 800px; margin: 16px 0 0 20px; }

/* Footer */
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-block: 30px; font-size: .75rem; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Screenshot lightbox */
dialog {
  width: min(1100px, calc(100% - 32px)); max-height: 90dvh; background: #171c1f;
  color: var(--text); border: 1px solid #68747b; padding: 20px;
}
dialog::backdrop { background: #000e; }
dialog figure { margin: 20px 0 0; }
dialog img { display: block; width: 100%; max-height: 65dvh; object-fit: contain; }
dialog figcaption { color: var(--muted); font-size: .85rem; margin-top: 12px; }
.lightbox-close { display: flex; margin-left: auto; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }

/* Larger screens */
@media (min-width: 640px) {
  .map-grid, .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coming { flex-direction: column; align-items: start; gap: 6px; }
  .section { padding-block: 80px; }
  .hero { padding-top: 70px; }
  .faction { padding: 36px; }
}

/* Small-screen adjustments */
@media (max-width: 639px) {
  .site-header { align-items: start; flex-direction: column; gap: 14px; }
  .site-header nav { gap: 16px; font-size: .72rem; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-heading > p { max-width: none; }
  .map { min-height: 240px; }
  .discord { width: 100%; }
  .hero .eyebrow { font-size: .63rem; }
  .site-footer { font-size: .7rem; }
}

/* Respect the visitor's motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* --- extended layout --- */

.wordmark {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  line-height: 1; flex-shrink: 0;
}
.wordmark-studio {
  font: 700 .58rem/1 "Courier New", monospace;
  letter-spacing: .22em; color: var(--muted);
}
.nav-toggle { position: relative; }
.nav-toggle > summary {
  list-style: none; cursor: pointer; font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 8px 0;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.site-header nav a[aria-current="page"] { color: var(--orange); }

.lockup-studio {
  font-family: var(--heading);
  font-size: clamp(.85rem, 1.8vw, 1.15rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px;
}
.game-line {
  font-family: var(--heading); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.05rem, 2.4vw, 1.55rem); color: var(--text);
  margin: 0 0 22px;
}
.game-line .lockup-game {
  font-size: .62em; letter-spacing: .22em; margin-left: .2em; font-weight: 800;
  color: var(--muted);
}
h1.lockup-title, h1.teaser-title {
  display: flex; flex-direction: column; align-items: flex-start;
}
.lockup-title .lockup-game {
  display: block; font-size: .28em; letter-spacing: .28em;
  margin-top: .18em; font-weight: 800; color: var(--text);
}

.teaser-title .hero-brand {
  font-size: 1em; letter-spacing: -.045em;
}
.teaser-title .hero-when {
  display: block; font-size: clamp(1.25rem, 3.6vw, 2.35rem);
  letter-spacing: -.02em; margin-top: .18em; font-weight: 800; color: var(--text);
  text-transform: none;
}
.hero-actions, .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hero-frame {
  aspect-ratio: 16 / 9; margin-top: 42px; border: 1px solid #596065; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background:
    linear-gradient(135deg, #3b454844, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 5px, #ffffff03 5px 6px),
    radial-gradient(ellipse at bottom, #353b3f, #171b1d 75%);
  overflow: hidden; text-decoration: none; color: inherit;
}
.hero-frame img, .trailer img.poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-frame .play-symbol, .trailer .play-symbol { position: relative; z-index: 1; }
.hero-frame strong, .trailer strong { position: relative; z-index: 1; }

.strip {
  display: grid; gap: 16px;
  padding-block: 28px !important;
}
.strip p { font: 700 .84rem/1.4 "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.strip p span { display: block; color: var(--orange); font-size: .68rem; margin-bottom: 6px; }
.section-heading a { color: var(--orange); font-size: .85rem; }
a.map { text-decoration: none; color: inherit; }

.role-list { margin: 20px 0 0; padding-left: 20px; color: var(--muted); }
.role-list li { margin-block: 6px; }
.gorillas .role-list li::marker { color: var(--orange); }
.raptors .role-list li::marker { color: var(--blue); }
.faction-art {
  aspect-ratio: 16 / 9; margin-top: 24px; border: 1px solid var(--line); overflow: hidden;
  background: #151718;
}
.faction-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact form, .signup form { flex: 1 1 350px; max-width: 650px; }
.contact label, .signup label { display: block; font-size: .85rem; margin-bottom: 8px; color: var(--text); }
.newsletter-thanks { color: var(--orange); margin-top: 20px; }
.signup { margin-top: 8px; }
.teaser-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; font-size: .85rem; }
.teaser-links a { color: var(--orange); text-decoration: none; }
.teaser-links a:hover { text-decoration: underline; }

.page-hero { padding-top: 56px; }
.page-hero .intro { max-width: 680px; margin-bottom: 0; }
.prose { max-width: 720px; }
.prose p, .prose ul { margin-top: 16px; color: var(--muted); }
.prose h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 40px; margin-bottom: 8px; text-transform: uppercase; }
.prose a { color: var(--orange); }
.example-banner {
  border: 1px solid var(--orange); background: #f0995814;
  padding: 12px 16px; font: .8rem/1.5 "Courier New", monospace;
  color: var(--orange); margin-bottom: 28px;
}
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { border-top: 1px solid var(--line); padding: 24px 0; }
.news-list time { display: block; font: .72rem "Courier New", monospace; color: var(--orange); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.news-list h3 { font-size: 1.4rem; margin-bottom: 8px; }
.news-list a { text-decoration: none; }
.news-list a:hover h3 { color: var(--orange); }
.article-meta { font: .72rem "Courier New", monospace; color: var(--orange); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }

.fact-sheet { display: grid; grid-template-columns: 160px 1fr; gap: 10px 24px; margin-top: 28px; max-width: 720px; }
.fact-sheet dt { font: 700 .68rem/1.5 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); padding-top: 4px; }
.fact-sheet dd { margin: 0; color: var(--muted); }
.logo-grid { display: grid; gap: 16px; margin-top: 24px; }
.logo-card {
  min-height: 160px; border: 1px dashed #42474a; background: #181a1b;
  display: flex; flex-direction: column; justify-content: center; padding: 24px;
}
.logo-card strong { font-family: var(--heading); font-size: 1.6rem; letter-spacing: -.03em; }
.logo-card span { font: .68rem "Courier New", monospace; color: var(--muted); margin-top: 8px; }

.map-detail { display: grid; gap: 24px; margin-bottom: 56px; }
.map-detail .shots { display: grid; gap: 12px; }
.map-kicker { font: .72rem "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.map-detail h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); text-transform: uppercase; margin-bottom: 12px; }
.map-mood { font: .72rem "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-top: 16px; }

.error-page { min-height: 60vh; padding-top: 80px; padding-bottom: 80px; }
.error-page h1 { font-size: clamp(3rem, 10vw, 6rem); }
.error-page .cta-row { margin-top: 32px; }

.sticky-cta {
  position: sticky; bottom: 0; z-index: 15;
  padding: 12px 20px; background: #101213f2; border-top: 1px solid var(--line);
  display: flex; justify-content: center;
}
.site-footer .fine { flex-basis: 100%; color: var(--muted); margin: 0; }

@media (min-width: 640px) {
  .strip, .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-detail .shots { grid-template-columns: 1fr 1fr; }
  .map-detail .shots .screenshot:first-child { grid-column: 1 / -1; }
}
@media (min-width: 800px) {
  .map-detail { grid-template-columns: 1.15fr 1fr; align-items: start; }
}
@media (min-width: 900px) {
  .nav-toggle > summary { display: none; }
  .nav-toggle nav { display: flex !important; }
  .sticky-cta { display: none; }
}
@media (max-width: 899px) {
  .site-header { align-items: center; }
  .nav-toggle nav {
    display: none; flex-direction: column; gap: 14px;
    position: absolute; right: 0; top: 100%;
    background: #16191b; border: 1px solid var(--line);
    padding: 16px 20px; min-width: 200px; z-index: 12;
  }
  .nav-toggle[open] nav { display: flex; }
}
@media (max-width: 639px) {
  .fact-sheet { grid-template-columns: 1fr; gap: 4px; }
  .fact-sheet dt { padding-top: 12px; }
}


/* --- teaser keyart hero --- */

body.teaser-page {
  background: var(--bg);
}
body.teaser-page .teaser-header {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
  background: transparent;
  border-bottom-color: transparent;
}
body.teaser-page .teaser-header .wordmark-studio {
  color: #d5d8d6;
}

.teaser-hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--text);
}
.teaser-hero-bg,
.teaser-hero-scrim {
  position: absolute;
  inset: 0;
}
.teaser-hero-bg { z-index: 0; }
.teaser-hero-scrim { z-index: 1; pointer-events: none; }
.teaser-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* Darken the left and lower third so the tagline stays readable over the sunrise. */
.teaser-hero-scrim {
  background:
    linear-gradient(90deg, #101213f2 0%, #101213d8 28%, #10121399 52%, #10121355 78%, #10121366 100%),
    linear-gradient(180deg, #101213cc 0%, #10121366 28%, #1012134d 52%, #101213e8 100%);
}
.teaser-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 40px));
  margin-inline: auto;
  padding: 140px 0 72px;
}
.teaser-hero .lockup-studio,
.teaser-hero .game-line,
.teaser-hero .teaser-title,
.teaser-hero .tagline,
.teaser-hero .intro {
  text-shadow: 0 2px 18px #101213cc;
}
.teaser-hero .lockup-studio { color: #d7dbd8; }
.teaser-hero .game-line .lockup-game { color: #d7dbd8; }
.teaser-hero .intro { color: #dce0dd; max-width: 34rem; }

.teaser-trailer-section { padding-top: 48px; }
.teaser-trailer { margin: 24px 0 0; }
.teaser-video-frame {
  margin-top: 0;
  background: #101213;
}
.teaser-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #101213;
}
.trailer-caption {
  margin-top: 14px;
  font: .72rem/1.5 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.trailer-caption a { color: var(--orange); text-decoration: none; }
.trailer-caption a:hover { text-decoration: underline; }

.more-grid { display: grid; gap: 16px; }
.more-card {
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.more-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.more-card-copy { padding: 20px 22px 24px; }
.more-card h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -.03em;
}
.more-card p {
  margin-top: 8px;
  font: 700 .72rem/1 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}

@media (min-width: 700px) {
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .teaser-hero { min-height: min(88vh, 720px); }
  .teaser-hero-inner { padding: 120px 0 56px; }
  .teaser-hero-bg img { object-position: 45% 40%; }
}

@media (prefers-reduced-motion: reduce) {
  #teaser-loop:not([controls]) { /* JS adds controls; no extra motion here */ }
}