/*
  store-router.css — the shared look of the store-router pages (links/play.html, napkin-scores.html).

  Extracted alongside store-router.js for the same reason: the two pages are the same page with
  different targets, and a duplicated stylesheet is a second place to forget. Referenced by a
  *relative* path so the pages still work opened straight off disk with file://.

  A page that wants its own accent overrides --accent / --accent-fg in its own inline <style>; nothing
  else here is meant to be re-stated per page.
*/
:root {
  color-scheme: light dark;
  --bg: #fbfaf8;
  --fg: #1a1a1c;
  --muted: #61616b;
  --rule: #e3e0da;
  --card: #ffffff;
  --accent: #406797;
  --accent-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --fg: #f2f1ee;
    --muted: #9a9aa4;
    --rule: #2d2d34;
    --card: #1d1d22;
    --accent: #7ea3cf;
    --accent-fg: #10131a;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  width: 100%;
  max-width: 30rem;
  text-align: center;
}
h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
p.lede {
  margin: 0 auto 2rem;
  max-width: 24rem;
  color: var(--muted);
}
/* The detected platform's download, promoted above the full list. */
.primary {
  display: none;
  margin-bottom: 0.75rem;
}
.primary a {
  display: block;
  padding: 0.9rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.primary a:hover,
.primary a:focus-visible {
  filter: brightness(1.08);
}
.primary .note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
h2 {
  margin: 2rem 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  text-align: left;
}
li a,
li span.unavailable {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0.625rem;
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
li a:hover,
li a:focus-visible {
  border-color: var(--accent);
}
li span.unavailable {
  color: var(--muted);
}
.name {
  font-weight: 600;
}
.detail {
  font-size: 0.8125rem;
  color: var(--muted);
}
/* A boxed aside above the download — play.html's invite code, napkin-scores' "it's free" note. */
.aside {
  margin: -1rem auto 2rem;
  padding: 0.75rem 1rem;
  max-width: 24rem;
  border: 1px solid var(--rule);
  border-radius: 0.625rem;
  background: var(--card);
  font-size: 0.9375rem;
}
.aside code {
  font-weight: 600;
  letter-spacing: 0.08em;
}
hr {
  width: 3rem;
  margin: 2.5rem auto 1.5rem;
  border: 0;
  border-top: 1px solid var(--rule);
}
footer {
  font-size: 0.875rem;
  color: var(--muted);
}
footer a {
  color: inherit;
}