/* Shared shell for arclightgame.space. Same palette as the game, so the store
   listing, the site and the app read as one product. */
:root {
  --bg: #05070d;
  --panel: #0b1120;
  --line: #18223a;
  --text: #e6edf7;
  --dim: #8aa0bf;
  --cyan: #22d3ee;
  --amber: #ffb020;
  --magenta: #f0369b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 22px; }
header.site {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  position: sticky; top: 0;
  background: rgba(5, 7, 13, .92);
  backdrop-filter: blur(8px);
  z-index: 10;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand {
  font-weight: 700; letter-spacing: .32em; font-size: 15px;
  color: var(--text); text-transform: uppercase;
}
.brand span { color: var(--cyan); }
nav a { color: var(--dim); font-size: 14px; margin-left: 20px; }
nav a:hover { color: var(--text); text-decoration: none; }
h1 { font-size: 34px; line-height: 1.2; margin: 46px 0 10px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 40px 0 10px; }
h3 { font-size: 16px; margin: 26px 0 6px; color: var(--cyan); }
p, li { color: #c3cee0; }
.lede { font-size: 18px; color: var(--dim); margin-bottom: 30px; }
.meta { color: var(--dim); font-size: 14px; margin: 0 0 34px; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin: 20px 0; }
footer.site { border-top: 1px solid var(--line); margin-top: 70px; padding: 28px 0 60px; color: var(--dim); font-size: 14px; }
footer.site a { color: var(--dim); }
code { background: #0c1322; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 14px; color: var(--amber); }
@media (max-width: 560px) {
  h1 { font-size: 27px; }
  nav a { margin-left: 12px; font-size: 13px; }
}

/* --- store badges -------------------------------------------------------
   Google and Apple both require their badge to be used as supplied: no
   recolouring, no stretching, no text laid over it, and clear space around it.
   So nothing here touches the artwork. The badges are only scaled by height
   with width left automatic, and the unreleased state dims the whole badge and
   puts its caption underneath rather than on top. */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  margin: 34px 0 10px;
}
.badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* The clear space the guidelines ask for, expressed as padding so a
     neighbouring element can never crowd the mark. */
  padding: 6px 10px;
  border-radius: 10px;
  transition: transform .15s ease, background .15s ease;
}
.badge img {
  height: 60px;
  width: auto;
  display: block;
}
a.badge:hover {
  background: rgba(34, 211, 238, .07);
  transform: translateY(-2px);
  text-decoration: none;
}
.badge.soon {
  cursor: default;
}
.badge.soon img {
  /* Dimmed rather than greyscaled: a colour filter would alter the mark, and
     opacity leaves it untouched. */
  opacity: .38;
}
.badge.soon em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width: 480px) {
  .stores { gap: 10px; }
  .badge img { height: 48px; }
}