/* Chain of Command's launch page, in the game's own palette and pieces: the
   colors come from products/ccmd/ccmd_game/src/screen.rs and screen/hud.rs. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/PixelifySans-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: rgb(18 44 39);
  --panel: rgb(24 61 55);
  --panel-light: rgb(36 83 70);
  --mint: rgb(162 219 124);
  --gold: rgb(241 190 95);
  --text: rgb(255 243 203);
  --muted: rgb(181 203 165);
  --ink: rgb(9 26 23);
  --coral: rgb(237 140 128);

  /* The primary command button's fill and bevel. */
  --go: rgb(41 120 89);
  --go-light: rgb(117 204 143);
  --go-dark: rgb(13 51 36);

  --bevel-light: rgb(255 242 204 / 16%);
  --bevel-dark: rgb(0 0 0 / 40%);
  --rain: rgb(204 230 250 / 45%);

  --page: min(1180px, 100% - 32px);
}

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(
      ellipse 90% 60% at 50% 0%,
      rgb(52 110 80 / 45%),
      transparent 70%
    ),
    var(--bg);
  font-family: "Pixelify Sans", ui-monospace, monospace;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
}

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

.sprite {
  image-rendering: pixelated;
}

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

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Rain, like the title screen's storm: slanted streaks falling over the
   page. */
.rain {
  position: fixed;
  inset: -200px 0 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='260'%3E%3Cg fill='%23cce6fa'%3E%3Crect x='20' y='10' width='2' height='22'/%3E%3Crect x='96' y='70' width='2' height='16'/%3E%3Crect x='170' y='30' width='2' height='26'/%3E%3Crect x='58' y='150' width='2' height='18'/%3E%3Crect x='140' y='190' width='2' height='24'/%3E%3Crect x='200' y='130' width='2' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='340'%3E%3Cg fill='%23cce6fa'%3E%3Crect x='40' y='40' width='2' height='12'/%3E%3Crect x='190' y='10' width='2' height='10'/%3E%3Crect x='260' y='200' width='2' height='12'/%3E%3Crect x='120' y='260' width='2' height='10'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.22;
  transform: skewX(-12deg);
  animation: rain 0.9s linear infinite;
}

@keyframes rain {
  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      0 260px,
      0 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rain {
    animation: none;
    opacity: 0.12;
  }
}

/* Pieces from the game's HUD ---------------------------------------------- */

/* A raised panel with a hard pixel drop shadow. */
.panel {
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark)
    var(--bevel-light);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: 0 3px 0 rgb(9 26 23 / 70%);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark)
    var(--bevel-light);
  border-radius: 3px;
  background: var(--panel-light);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.button:hover {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  min-height: 60px;
  padding: 0 26px;
  border-color: var(--go-light) var(--go-dark) var(--go-dark) var(--go-light);
  background: var(--go);
  font-size: 22px;
  box-shadow: 0 3px 0 rgb(9 26 23 / 70%);
}

/* A small outlined key name beside the control it names. */
.keycap {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid rgb(255 243 203 / 40%);
  border-radius: 2px;
  color: rgb(255 243 203 / 80%);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A pill of colored text on a tinted ground, for statuses. */
.chip {
  --chip: var(--mint);

  display: inline-block;
  padding: 1px 9px;
  border: 1px solid color-mix(in srgb, var(--chip) 60%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--chip) 14%, transparent);
  color: var(--chip);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-gold {
  --chip: var(--gold);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Top bar ------------------------------------------------------------------ */

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: var(--page);
  margin: 0 auto;
  padding: 16px 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 22px;
  text-decoration: none;
  white-space: nowrap;
}

/* The brass badge beside the name, as in a match's top bar. */
.badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 30px;
  padding: 0 6px;
  border: 2px solid rgb(77 69 43);
  border-radius: 3px;
  background: var(--gold);
}

.badge span {
  height: 2px;
  background: rgb(61 51 26);
}

.topnav {
  display: flex;
  gap: 22px;
}

.topnav a {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.topnav a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

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

.hero {
  position: relative;
  isolation: isolate;
  margin-top: -76px;
  padding: 120px 16px 56px;
  text-align: center;
}

/* A match playing out behind the title. The mask fades the board in under
   the title and out to transparent at the bottom, so the page's own
   background shows through and the hero has no edge. */
.hero-diorama {
  position: absolute;
  inset: clamp(150px, 17vw, 250px) 0 0;
  z-index: -1;
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 16%,
    #000 60%,
    transparent
  );
}

.hero-diorama img,
.hero-diorama video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The board sits high in the clip, clear of the buttons; on a screen
     wider than the clip, crop mostly the valley below it. */
  object-position: 50% 20%;
}

/* The clip stays hidden over its still until it plays. */
.hero-diorama video {
  opacity: 0;
  transition: opacity 0.3s;
}

.hero-diorama video[data-playing] {
  opacity: 1;
}

.hero-diorama::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 55%,
    rgb(18 44 39 / 55%)
  );
}

.title {
  margin: 0;
  color: var(--text);
  font-size: clamp(40px, 9vw, 112px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0.08em 0 rgb(5 18 15 / 85%);
}

.pitch {
  max-width: 34em;
  margin: 18px auto 0;
  color: var(--text);
  font-size: clamp(18px, 2.4vw, 23px);
  text-shadow: 0 2px 0 rgb(5 18 15 / 85%);
}

.hero-stage {
  height: clamp(210px, 30vw, 400px);
}

.hero-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sections ----------------------------------------------------------------- */

main {
  position: relative;
  z-index: 2;
}

.section {
  width: var(--page);
  margin: 0 auto;
  padding: 56px 0 0;
}

.section-title {
  margin: 0 0 20px;
  text-transform: uppercase;
  color: var(--text);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 4px 0 rgb(5 18 15 / 85%);
}

.lede {
  max-width: 44em;
  margin: -8px 0 24px;
  color: var(--muted);
}

/* How it plays: numbered like the order strip's cards. */
.orders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-left: 4px solid var(--gold);
}

.order-number {
  color: var(--gold);
  font-size: 22px;
  line-height: 1.2;
}

.order h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Screenshots: a carousel that scrolls sideways, one shot at a time. */
.carousel {
  padding: 8px;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 2px;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  scroll-snap-align: center;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 4px;
}

.carousel-controls[hidden] {
  display: none;
}

.carousel-dots {
  display: flex;
  gap: 10px;
}

.carousel-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.carousel-dot[aria-current="true"] {
  background: var(--gold);
}

.carousel-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    scroll-behavior: auto;
  }
}

/* Install. */
.install {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
}

.install + .install {
  margin-top: 16px;
}

.install-card {
  padding: 22px;
}

.install-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.install-card p,
.install-card li {
  color: var(--muted);
  font-size: 16px;
}

.install-card p {
  margin: 0 0 12px;
}

.install-card code {
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
}

.install-card strong {
  color: var(--text);
  font-weight: 400;
}

.command {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 14px 0;
}

.command pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border: 2px solid var(--gold);
  border-radius: 3px;
  background: var(--ink);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.command-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--mint);
  font-size: 14px;
}

.steps {
  margin: 0;
  padding-left: 1.3em;
}

.steps li + li {
  margin-top: 6px;
}

.requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Footer. */
.footer {
  width: var(--page);
  margin: 72px auto 0;
  padding: 20px 0 32px;
  border-top: 2px solid var(--bevel-light);
  color: var(--muted);
  font-size: 14px;
}

.footer p {
  margin: 0 0 4px;
}

@media (width <= 820px) {
  .topnav {
    display: none;
  }

  .install {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 520px) {
  body {
    font-size: 16px;
  }

  .hero {
    padding-top: 104px;
  }

  /* A narrow screen shows the board in a band under the title, rather than
     cropping it to the hero's full height. */
  .hero-diorama {
    inset: 250px 0 auto;
    height: 300px;
    mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 14%,
      #000 78%,
      transparent
    );
  }

  .hero-stage {
    height: 230px;
  }

  .hero-actions {
    width: 100%;
    padding: 18px 14px;
  }

  .button-primary {
    width: 100%;
    font-size: 19px;
  }

  .bots {
    grid-template-columns: minmax(0, 1fr);
  }

  .bot {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 12px;
  }

  .bot-portrait {
    width: 76px;
    height: 76px;
  }

  .bot-portrait img {
    width: 64px;
    height: 64px;
  }

  .command {
    flex-direction: column;
  }
}

/* The 404 page. */
.lost-card {
  margin-top: 64px;
  padding: 32px;
  text-align: center;
}

.lost-card .lede {
  margin: 0 auto 24px;
}