/* Shared look of the text pages (guide, faq, about): the same dark panel
   as the game's cards, but wide and made for reading. */
:root {
  --bg: #07090d;
  --panel: rgba(12, 17, 24, 0.82);
  --line: rgba(154, 166, 200, 0.18);
  --ink: #dfe7f2;
  --ink-dim: #7d8aa0;
  --safe: #39d0c0;
  --smaller: #3a8dff;
  --bigger: #ff3b3f;
  --warm: #ffd27a;
  --well: #9b7bff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 24px 16px 48px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 34px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
}
h1 { margin: 0 0 6px; font-size: 1.8rem; line-height: 1.25; }
h2 { margin: 34px 0 8px; font-size: 1.2rem; }
h3 { margin: 22px 0 6px; font-size: 1rem; }
p, li, dd { font-size: 0.97rem; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
.lead { color: var(--ink-dim); font-size: 1.02rem; margin-top: 0; }
/* About: the kolonie mark above the heading */
.mark { display: block; margin: 0 0 14px; }
/* Changelog: each heading carries its date on a line of its own */
h2 time { display: block; color: var(--ink-dim); font-size: 0.85rem; font-weight: 400; }
a { color: var(--safe); }
.dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.play {
  display: inline-block;
  margin: 18px 0 4px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--safe);
  color: #04120f;
  font-weight: 600;
  text-decoration: none;
}
.site-nav, .site-foot {
  max-width: 760px;
  margin: 0 auto 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.9rem;
}
.site-nav a, .site-foot a { color: var(--ink-dim); text-decoration: none; }
.site-nav a:hover, .site-foot a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); }
.site-nav .brand { color: var(--ink); font-weight: 600; margin-right: auto; }
.site-foot { margin: 18px auto 0; justify-content: center; font-size: 0.8rem; }
/* Tables (the guide's numbers): scroll sideways on narrow screens */
.table-wrap { overflow-x: auto; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-dim); font-weight: 600; }
td:first-child { font-weight: 600; }
td:nth-child(2), td:nth-child(4) { white-space: nowrap; }