/* Missile Protector pages. One dark look on purpose: the game is played on a
   lit board in a dark studio, and the page is that studio. The colours are
   the game's own (MPCore Palette.swift): Farmland's studio teal for the
   ground, its green for the accent, cobalt for the convoy, rust orange for
   the machines and each missile's own mark colour. Archivo at its widest and
   narrowest stands in for the SF Pro Expanded and Compressed the app uses,
   which only Apple devices have. */

:root {
  color-scheme: dark;

  --bg: #0b1718;
  --bg-deep: #081112;
  --surface: #11201f;
  --surface-2: #162927;
  --ink: #f4f1ea;
  --ink-soft: #b8c3be;
  --ink-faint: #7d8c87;
  --rule: rgba(244, 241, 234, 0.1);
  --accent: #7cd14e;
  --accent-ink: #0b1020;
  --convoy: #6fa5f5;
  --rust: #f07a4b;
  --eye: #ffe45c;
  --mark-standard: #ffffff;
  --mark-cluster: #2ce3c7;
  --mark-heavy: #b27cff;
  --mark-hawk: #c4f03a;
  --mark-airburst: #ffd447;
  --mark-salvo: #ff6f91;
  --mark-emp: #7fe3ff;
  --mark-chain: #4f7bff;
  --mark-napalm: #ff5530;
  --mark-mine: #d2bd7c;
  --mark-swarm: #ea6bff;
  --mark-lance: #ff2a4b;
  --mark-vortex: #6a5cff;
  --mark-bunker: #c08a5e;
  --mark-barrage: #ffa23a;
  --mark-aegis: #3fefb0;
  --mark-mender: #7dff6a;

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --wide: 700px;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1200px 700px at 50% -10%, #173634 0%, rgba(11, 23, 24, 0) 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--max), 100% - 32px); margin: 0 auto; padding-block: 28px 80px; }
.narrow { max-width: var(--wide); }

/* Type */
.display, h1, h2, .label, .num { font-family: var(--sans); }
h1 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(30px, 6.2vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-wrap: balance;
}
h3 { font-weight: 800; font-stretch: 112%; font-size: 17px; line-height: 1.2; margin: 0 0 4px; }
p { margin: 0 0 14px; color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 700; }
.label {
  font-weight: 700;
  font-stretch: 125%;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.num { font-weight: 900; font-stretch: 62%; font-variant-numeric: tabular-nums; }

.crumb {
  display: inline-block;
  font-weight: 700;
  font-stretch: 125%;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 36px;
}
.crumb:hover { color: var(--ink-soft); }

/* Hero */
.hero { display: grid; gap: 22px; margin-bottom: 30px; }
.title { display: flex; align-items: center; gap: 18px; }
.title img { width: 76px; height: 76px; border-radius: 17px; box-shadow: 0 0 0 1px var(--rule), 0 14px 30px -12px rgba(0, 0, 0, 0.7); flex: none; }
.title .sub { margin-top: 8px; letter-spacing: 0.12em; }
.lead { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.4; color: var(--ink); margin: 0; max-width: 34ch; text-wrap: balance; }
.intro { max-width: 60ch; margin: 0; }
.status {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  font-weight: 700; font-stretch: 112%; font-size: 14px; color: var(--ink);
}
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(124, 209, 78, 0.18); }

.shot {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #6e3a2a;
  box-shadow: 0 0 0 1px var(--rule), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
figcaption, .cap { font-size: 14px; color: var(--ink-faint); margin-top: 12px; }

section { margin-top: 76px; }
section > .label { display: block; margin-bottom: 10px; }

/* How it plays */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.step { background: var(--surface); border-radius: 16px; padding: 18px 18px 16px; box-shadow: inset 0 0 0 1px var(--rule); }
.step .num { display: block; font-size: 44px; line-height: 1; color: var(--accent); margin-bottom: 12px; }
.step p { margin: 0; font-size: 15px; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }

/* Regions: a strip of boards that scrolls sideways */
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 340px); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-top: 22px; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(244, 241, 234, 0.2) transparent;
}
.region { margin: 0; scroll-snap-align: start; }
.region img { width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 16px; box-shadow: 0 0 0 1px var(--rule); }
.region figcaption { margin-top: 10px; display: grid; gap: 1px; }
.region b { color: var(--ink); font-weight: 800; font-stretch: 112%; font-size: 15px; }
.region span { font-size: 13px; color: var(--ink-faint); }
/* Wide enough for all five side by side: no scrolling. */
@media (min-width: 900px) {
  .strip { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}

/* Missiles */
.missiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.missile { background: var(--surface); border-radius: 16px; padding: 18px; box-shadow: inset 0 0 0 1px var(--rule); display: grid; gap: 10px; align-content: start; }
.missile .art { height: 76px; display: flex; align-items: center; }
.missile .art img { height: 70px; width: auto; }
.missile h3 { color: var(--mark); }
.missile p { margin: 0; font-size: 15px; }
.missile .pips { display: flex; gap: 5px; margin-top: 2px; }
.missile .pips i { width: 16px; height: 5px; border-radius: 3px; background: var(--mark); }
@media (max-width: 720px) { .missiles { grid-template-columns: 1fr; } .missile { grid-template-columns: 92px minmax(0, 1fr); } .missile .art { grid-row: span 3; } }

/* Machines and convoy: one column per piece on a wide screen, the picture
   above the words; a list with the picture on the left on a narrow one. */
.roster { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 20px; margin-top: 18px; }
.unit { display: grid; gap: 12px; align-content: start; padding: 20px 0 4px; border-top: 1px solid var(--rule); }
.unit .art { height: 72px; display: flex; align-items: center; }
.unit .art img { max-height: 68px; max-width: 100%; width: auto; }
.unit p { margin: 0; font-size: 15px; }
.rust h3 { color: var(--rust); }
.convoy h3 { color: var(--convoy); }
@media (max-width: 860px) {
  .roster { grid-template-columns: 1fr; }
  .unit { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; }
  .unit .art { height: 64px; justify-content: center; }
  .unit .art img { max-height: 64px; }
}

/* Numbers */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.fact { border-top: 2px solid var(--accent); padding-top: 12px; }
.fact .num { display: block; font-size: clamp(48px, 7vw, 72px); line-height: 0.9; color: var(--ink); }
.fact span { font-size: 14px; color: var(--ink-faint); }
@media (max-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }

.promise { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.promise span { padding: 9px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); font-weight: 700; font-stretch: 112%; font-size: 14px; }

footer {
  margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  font-size: 14px; color: var(--ink-faint);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); }

/* Privacy and Support */
.doc h1 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 8px; }
.doc .updated { font-size: 14px; color: var(--ink-faint); margin: 0 0 30px; }
.doc h2 { font-size: 17px; font-stretch: 112%; font-weight: 800; text-transform: none; margin: 32px 0 8px; }
.doc ul { padding-left: 20px; margin: 0 0 16px; }
.doc li { color: var(--ink-soft); margin-bottom: 8px; }
.note { background: var(--surface); border-radius: 14px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--rule); margin: 0 0 8px; }
.note p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .strip { scroll-behavior: smooth; }
}

.upgrades { margin-top: 18px; }

/* The four earned missiles: smaller cards, the level that brings each. */
.earned-lead { margin-top: 26px; }
.earned { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.earned .missile { padding: 16px; }
.earned .missile .art { height: 60px; }
.earned .missile .art img { height: 54px; }
.missile .when { justify-self: start; font-weight: 700; font-stretch: 125%; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mark); padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mark) 14%, transparent); }
/* The two for the convoy, side by side under the twelve. */
.earned.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .earned { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .earned, .earned.pair { grid-template-columns: 1fr; } .earned .missile .art { grid-row: span 3; } }

/* The last cell of the machines: a note, not a machine. */
.unit-note { align-content: center; }
.unit-note h3 { color: var(--ink); }