/*
 * The game's palette, DESIGN.md section 5.2, with its semantic rule kept:
 * green is a pickup so it marks a download, crimson only ever warns, and
 * nothing is coloured decoratively.
 */
:root {
  --ground: #0b0d12;
  --grid: #141b26;
  --structure: #2a3547;
  --face: #39485f;
  --player: #f5efe3;
  --fire: #8fe9f7;
  --enemy: #b8414a;
  --pickup: #5ce46a;
  --warning: #e8873a;
  --dim: #8a93a6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 5rem;
  background: var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--player);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 46rem; margin: 0 auto; }

header { padding: 5rem 0 3rem; }

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 11vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

h1 .second { display: block; color: var(--enemy); }

.pitch {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--dim);
}

.pitch strong { color: var(--player); font-weight: 600; }

h2 {
  margin: 3.5rem 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The hero shape. Flat forms on a dark ground, section 5.1. */
.arena {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.5rem 0 0;
  border: 1px solid var(--structure);
  background: var(--ground);
}

/* One platform, its newest build and a fold for the rest. */
.platform {
  border: 1px solid var(--structure);
  background: rgba(11, 13, 18, 0.82);
  margin: 0 0 1rem;
}

.latest {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
}

.platform-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  flex: 1 1 8rem;
}

.build-meta {
  font-size: 0.875rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.build-meta .sha { color: var(--face); }

a.download {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--pickup);
  color: var(--pickup);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

a.download:hover, a.download:focus {
  background: var(--pickup);
  color: var(--ground);
}

details { border-top: 1px solid var(--grid); }

summary {
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--dim);
  cursor: pointer;
}

summary:hover { color: var(--fire); }

.older { list-style: none; margin: 0; padding: 0 1.5rem 1rem; }

.older li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.older a { color: var(--fire); }

.checksum { color: var(--face); font-size: 0.8125rem; }
.checksum a { color: inherit; }

.empty {
  border: 1px dashed var(--structure);
  padding: 1.5rem;
  color: var(--dim);
}

.notes { color: var(--dim); font-size: 0.9375rem; }
.notes li { margin: 0 0 0.5rem; }
.notes code {
  background: var(--grid);
  padding: 0.125rem 0.375rem;
  color: var(--player);
  font-size: 0.875rem;
}

.warn { color: var(--warning); }

footer {
  margin: 4rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--grid);
  color: var(--face);
  font-size: 0.8125rem;
}

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