/* Asteroids Siege, bigoathgames.com/asteroids-siege/: the game's own look. Near-black
   space, a green-terminal HUD (#4ed971, softened from pure green), a cyan station, yellow ore, one
   neon colour per ship class, and panels with cut corners like the in-game buttons. No web fonts:
   the wordmark is the game's vector font as SVG, and labels use the system monospace. */

:root {
  --bg: #050607;
  --bg2: #08110f;
  --ui: #4ed971;
  --ui-dim: #439a5a;
  --ui-faint: #2a6339;
  --panel: rgba(8, 22, 13, 0.88);
  --text: #d6e6db;
  --muted: #95ad9c;
  --station: #88fefe;
  --ore: #fefd00;
  --crystal: #ff5cff;
  --dart: #5fdd85;
  --hammer: #ff9d3b;
  --lance: #acacff;
  --mender: #86fc86;
  --miner: #fefd00;
  --enemy: #ff4f7b;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cut: 12px;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(40, 90, 96, 0.28), transparent 70%),
    radial-gradient(900px 600px at 0% 40%, rgba(70, 40, 110, 0.18), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ui);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--station);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  color: var(--ui);
  text-shadow: 0 0 14px rgba(78, 217, 113, 0.45);
}

h3 {
  font-size: 1.125rem;
  color: var(--text);
}

p {
  margin: 0 0 1em;
}

.wrap {
  width: min(1160px, 100% - 32px);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--ui);
  color: var(--bg);
}
.skip:focus {
  left: 8px;
}

.kicker,
.tag {
  margin: 0 0 0.5rem;
  font: 600 0.8125rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ui-dim);
}

.tag {
  color: var(--ore);
}

.lead {
  max-width: 62ch;
  color: var(--muted);
}

/* ------------------------------------------------------------------ buttons and chips */

.btn {
  --c: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  font: 700 0.9375rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ui);
  background: rgba(78, 217, 113, 0.08);
  border: 1.5px solid var(--ui);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  transition: background 0.15s, color 0.15s;
}
.btn:hover {
  background: rgba(78, 217, 113, 0.2);
}
.btn.solid {
  min-height: 52px;
  padding: 0 26px;
  font-size: 1.0625rem;
  background: var(--ui);
  color: #04140a;
}
.btn.solid:hover {
  background: #7ae896;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px dashed var(--ui-faint);
  font: 600 0.8125rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ top bar */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(5, 6, 7, 0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(42, 99, 57, 0.6);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 0.9375rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
.brand img {
  border-radius: 8px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav a:not(.btn) {
  font: 600 0.8125rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
}
.nav a:not(.btn):hover {
  color: var(--ui);
}
@media (max-width: 940px) {
  .nav a:not(.btn) {
    display: none;
  }
}
@media (max-width: 760px) {
  .brand span {
    font-size: 0.75rem;
  }
  .nav .btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.8125rem;
  }
}
@media (max-width: 360px) {
  .brand span {
    display: none;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding: 40px 0 56px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: 24px;
  align-items: center;
}
.hero h1 {
  line-height: 0;
}
.wordmark {
  width: min(100%, 600px);
}
/* the line under the name, as the title screen's subtitle */
.tagline {
  margin: 14px 0 0;
  font: 700 clamp(0.875rem, 0.75rem + 0.6vw, 1.125rem)/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ui-dim);
}
.pitch {
  max-width: 52ch;
  margin-top: 18px;
  font-size: 1.125rem;
  color: var(--text);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 24px 0 14px;
}
.facts span {
  white-space: nowrap;
}
.facts {
  font: 600 0.8125rem/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-dim);
}
.field {
  position: relative;
  order: -1;
  width: min(100%, 420px);
  margin-inline: auto;
  aspect-ratio: 1;
}
.field canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 900px) {
  .hero {
    padding: 56px 0 80px;
  }
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
  }
  .field {
    order: 0;
    width: 100%;
    max-width: 560px;
  }
}

/* ------------------------------------------------------------------ sections */

section {
  scroll-margin-top: 64px;
}
.play,
.ships,
.modes,
.siege,
.multi,
.screens,
.beta {
  padding: 64px 0;
}
.play h2,
.ships h2,
.modes h2,
.siege h2,
.multi h2,
.screens h2 {
  margin-bottom: 20px;
}

/* screenshots in a thin HUD-green frame */
.shot-frame {
  display: block;
  padding: 3px;
  background: linear-gradient(135deg, rgba(78, 217, 113, 0.7), rgba(42, 99, 57, 0.5) 40%, rgba(136, 254, 254, 0.45));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.shot-frame img {
  display: block;
  width: 100%;
  clip-path: inherit;
  background: var(--bg2);
}

.feature {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-top: 40px;
}
.feature h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  margin-bottom: 12px;
}
.feature-copy p:not(.tag) {
  color: var(--muted);
  max-width: 58ch;
}
@media (min-width: 900px) {
  .feature {
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    margin-top: 56px;
  }
  .feature.flip .shot-frame {
    order: 2;
  }
}

/* ------------------------------------------------------------------ ships */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  margin: 28px 0 24px;
  padding: 0;
  list-style: none;
}
.roster li {
  --c: var(--ui);
  padding: 18px 18px 8px;
  background: var(--panel);
  border-top: 2px solid var(--c);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.ship-scene {
  margin: -4px -4px 14px;
}
.roster h3 {
  color: var(--c);
  margin-bottom: 8px;
}
.roster h3 span {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.roster p {
  font-size: 0.9375rem;
  color: var(--muted);
}
.roster b {
  color: var(--text);
  font-weight: 600;
}
.roster .dart {
  --c: var(--dart);
}
.roster .hammer {
  --c: var(--hammer);
}
.roster .lance {
  --c: var(--lance);
}
.roster .mender {
  --c: var(--mender);
}
.roster .miner {
  --c: var(--miner);
}
.rocks {
  max-width: 70ch;
  padding-left: 14px;
  border-left: 2px solid var(--rock, #8f8f8f);
  color: var(--muted);
}
.rocks b {
  color: var(--text);
}

/* ------------------------------------------------------------------ modes */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.cards li {
  padding: 20px 20px 6px;
  background: var(--panel);
  border: 1px solid rgba(42, 99, 57, 0.8);
}
.cards h3 {
  color: var(--ui);
  margin-bottom: 10px;
}
.cards p {
  font-size: 0.9375rem;
  color: var(--muted);
}
.play .cards {
  margin-top: 56px;
}

/* the two modes side by side, equal, as on the title screen */
.mode-cards {
  display: grid;
  gap: 16px;
  margin: 28px 0 22px;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .mode-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.mode-cards a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 24px 22px;
  background: var(--panel);
  border-top: 2px solid var(--ui);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s;
}
.mode-cards a:hover {
  background: rgba(20, 52, 30, 0.92);
}
.mode-cards a:focus-visible {
  outline-offset: -5px;
}
.mode-cards h3 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--ui);
}
.mode-cards .who {
  margin-top: auto;
  font: 600 0.8125rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--station);
}
.online-line {
  max-width: 70ch;
  color: var(--muted);
}
.online-line b {
  color: var(--text);
}

/* ------------------------------------------------------------------ siege */

.siege-grid {
  display: grid;
  gap: 28px;
}
@media (min-width: 1000px) {
  .siege-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
  }
}
.siege-stage {
  width: 100%;
  max-width: 820px;
  margin: 0;
}
/* the vector scenes (site.js): the siege map, the fleet, the Colossus, a ship class per card */
svg.vec {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inherit;
  background: var(--bg);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  text-anchor: middle;
}
.scene text {
  stroke: none;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.scene.paused svg * {
  animation-play-state: paused;
}
.siege-stage .shot-frame svg {
  aspect-ratio: 3880 / 2580;
}
@media (max-width: 599px) {
  /* phones: the map stands up, your base at the bottom as in the game (site.js turns it) */
  .siege-stage .shot-frame svg {
    aspect-ratio: 2580 / 3880;
  }
}
.siege-stage figcaption {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.siege-stage text {
  stroke: none;
  font: 700 62px var(--mono);
  letter-spacing: 0.06em;
}
.siege-stage .sv-small {
  font-size: 50px;
  font-weight: 600;
}
.siege-stage .sv-big {
  font-size: 190px;
  letter-spacing: 0.14em;
}
.sv-link {
  stroke-dasharray: 34 56;
}
.sv-ring {
  stroke-dasharray: 20 46;
}
.sv-dash {
  stroke-dasharray: 18 26;
}
.sv-thin {
  stroke-width: 1.5px;
}
/* a lane lit for a warp: dashes running toward the circle it goes to */
.sv-lit {
  stroke-dasharray: 34 56;
  animation: sv-crawl 0.8s linear infinite;
}
@keyframes sv-crawl {
  to {
    stroke-dashoffset: -90;
  }
}
.sv-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: sv-spin 50s linear infinite;
}
.sv-spin.sv-back {
  animation-duration: 80s;
  animation-direction: reverse;
}
@keyframes sv-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ships hover round their post */
.sv-bob {
  animation: sv-bob 2.4s ease-in-out infinite alternate;
}
@keyframes sv-bob {
  to {
    transform: translate(-8px, 14px);
  }
}
.scene-fleet .sv-bob,
.scene-colossus .sv-bob {
  animation-name: sv-bob-m;
}
.scene-ship .sv-bob {
  animation-name: sv-bob-s;
}
@keyframes sv-bob-m {
  to {
    transform: translate(-3px, 5px);
  }
}
@keyframes sv-bob-s {
  to {
    transform: translate(-2px, 3px);
  }
}
/* the next wave's arrows */
.sv-blink {
  animation: sv-blink 0.5s ease-in-out infinite alternate;
}
@keyframes sv-blink {
  to {
    opacity: 0.3;
  }
}
/* a mender's repair line, its dashes running to what it mends */
.sv-repair {
  stroke-dasharray: 5 5;
  animation: sv-repair 0.5s linear infinite;
}
@keyframes sv-repair {
  to {
    stroke-dashoffset: -10;
  }
}
/* the marks under a ship's scene: the one playing lit (site.js), a tap jumps to one */
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.marks button {
  min-height: 32px;
  padding: 0 10px;
  font: 700 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--ui-faint);
  cursor: pointer;
}
.marks button:hover {
  border-color: var(--ui-dim);
}
.siege-copy .lead {
  color: var(--text);
}
.siege-copy .lead + .lead {
  color: var(--muted);
}
.versus {
  margin-top: 24px;
  padding: 18px 20px 6px;
  background: var(--panel);
  border-left: 2px solid var(--enemy);
}
.versus ul {
  margin: 12px 0 0;
  padding-left: 1.1em;
  color: var(--muted);
}
.versus li {
  margin-bottom: 0.75em;
}
.versus b {
  color: var(--text);
}
.rules {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 40px;
}
.ore {
  color: var(--ore);
}
.crystal {
  color: var(--crystal);
}

/* ------------------------------------------------------------------ screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.shots a {
  display: block;
  text-decoration: none;
}
.shots a:hover .shot-frame {
  background: var(--ui);
}
.cap {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ beta */

.beta .panel {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: 28px 22px;
  background: var(--panel);
  border: 1.5px solid var(--ui);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: inset 0 0 60px rgba(78, 217, 113, 0.08);
}
.beta h2 {
  margin-bottom: 12px;
}
.beta .lead {
  color: var(--text);
}
.beta .fine {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}
@media (min-width: 700px) {
  .beta .panel {
    grid-template-columns: auto 1fr;
    gap: 28px;
    padding: 40px;
  }
}

/* ------------------------------------------------------------------ footer */

.foot {
  padding: 28px 0 36px;
  border-top: 1px solid rgba(42, 99, 57, 0.6);
  font-size: 0.875rem;
  color: var(--muted);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.foot a {
  color: var(--muted);
}
.foot a:hover {
  color: var(--ui);
}
.foot .foot-address {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.85em;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ lightbox */

.lightbox {
  width: min(96vw, 1600px);
  max-width: none;
  max-height: 96vh;
  padding: 0;
  border: 1.5px solid var(--ui);
  background: var(--bg);
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(2, 4, 3, 0.88);
}
.lightbox img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(96vh - 4px);
  object-fit: contain;
}
.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ui);
  background: var(--bg);
  color: var(--ui);
  font: 700 1.5rem/1 var(--mono);
  cursor: pointer;
}
.lightbox button:hover {
  background: var(--ui);
  color: var(--bg);
}
.lightbox .close {
  top: -14px;
  right: -10px;
}
.lightbox .prev,
.lightbox .next {
  top: 50%;
  translate: 0 -50%;
}
.lightbox .prev {
  left: -10px;
}
.lightbox .next {
  right: -10px;
}

/* ------------------------------------------------------------------ plain pages (privacy) */

.doc {
  max-width: 760px;
  margin: 40px auto 64px;
  padding: 0 0 8px;
}
.doc h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  color: var(--ui);
  margin-bottom: 8px;
}
.doc h2 {
  font-size: 1.25rem;
  margin: 32px 0 10px;
  scroll-margin-top: 72px;
}
.doc .date {
  font: 600 0.8125rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-dim);
}
.doc p,
.doc li {
  color: var(--muted);
}
.doc b {
  color: var(--text);
}
.doc ul {
  padding-left: 1.25em;
}
.doc li {
  margin-bottom: 0.5em;
}

/* the room invite page (join/): the code, large */
.join .join-code {
  font: 600 0.8125rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-dim);
}
.join .join-code b {
  display: block;
  margin-top: 4px;
  font: 700 3rem/1.1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--ui);
}
.btn[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .mode-cards a {
    transition: none;
  }
  /* the scenes hold one frame (site.js stops their scripted moves) */
  .scene svg * {
    animation: none !important;
  }
}