@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("/fonts/sora.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}

/* Shared styling for the static content pages (how to play, privacy).
   These sit outside the bundled app, so the tokens are restated here rather
   than imported. Kept deliberately small and readable. */

:root {
  color-scheme: light dark;
  --bg: #eef0f8;
  --surface: #ffffff;
  --line: rgba(30, 34, 56, 0.09);
  --text: #1e2238;
  --muted: #616881;
  --brand: #5a6be0;
  --accent: #ffb673;
  --accent-ink: #35200a;
  --good: #6fe0b8;
  --good-ink: #0b2e23;
  --shadow: 0 1px 2px rgba(30, 34, 56, 0.06), 0 3px 8px rgba(30, 34, 56, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1220;
    --surface: #191e33;
    --line: rgba(255, 255, 255, 0.08);
    --text: #eceffa;
    --muted: #949cbc;
    --brand: #8b9cff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px 20px 64px;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 640px;
  margin-inline: auto;
}

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

.top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.logo {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--text);
}

.logo span {
  color: var(--brand);
}

h1 {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 8px;
}

h2 {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 40px 0 8px;
}

h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 4px;
}

.lede {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 8px;
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin: 6px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

th {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Little inline number tiles, so the rules can be shown rather than described. */
/* Nine tiles have to sit on one line or the row-wrap example contradicts
   itself, so they scale with the viewport rather than sitting at a fixed size. */
.row {
  display: flex;
  gap: 4px;
  margin: 14px 0;
}

.t {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(24px, 7.6vw, 34px);
  height: clamp(24px, 7.6vw, 34px);
  border-radius: clamp(7px, 2.2vw, 10px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-weight: 600;
  font-size: clamp(13px, 3.8vw, 16px);
}

.t.empty {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  color: transparent;
}

.t.a {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}

.t.b {
  background: var(--good);
  border-color: transparent;
  color: var(--good-ink);
}

.note {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin: 18px 0;
}

.play {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 26px;
  margin-top: 28px;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

footer a {
  margin-right: 14px;
}