:root {
  /* ===== Color tokens (LIGHT FIRST) ===== */
  --c-bg: #ffffff;
  --c-bg-soft: #f6f7fb;
  --c-bg-elev: #ffffff;

  --c-border: #e3e8f1;
  --c-border-soft: #eef1f6;

  --c-text: #1f2937; /* slate-800 */
  --c-text-dim: rgba(31, 41, 55, 0.72);

  /* Brand & accents */
  --c-primary: #7c86ff; /* soft lavender */
  --c-primary-ink: #ffffff; /* text on primary */
  --c-accent: #7c86ff;

  /* Status */
  --c-success-bg: #eef7ea;
  --c-success-ink: #2f7d32;

  /* ===== Shadows & radii ===== */
  --shadow-1: 0 6px 18px rgba(17, 24, 39, 0.08);
  --shadow-2: 0 12px 30px rgba(17, 24, 39, 0.12);
  --shadow-soft-1: 0 10px 24px rgba(16, 30, 54, 0.1);
  --shadow-soft-2: 0 18px 46px rgba(16, 30, 54, 0.14);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px; /* preferred default */
  --r-lg: 12px; /* for primary panels */

  /* ===== Spacing scale ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;

  /* ===== Typography scale ===== */
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-title-sm: 16px;
  --fs-title-md: 20px;
  --fs-title-lg: 30px; /* slightly larger for airy header */
}

/* DARK fallback */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0f1115;
    --c-bg-soft: #14171c;
    --c-bg-elev: #1a1f26;

    --c-border: #2a323c;
    --c-border-soft: #333;

    --c-text: #eaeaea;
    --c-text-dim: rgba(234, 234, 234, 0.75);

    --c-success-bg: #0d2b10;
    --c-success-ink: #86efac;

    --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-soft-1: 0 8px 20px rgba(16, 30, 54, 0.12);
    --shadow-soft-2: 0 16px 40px rgba(16, 30, 54, 0.18);
  }
}

/* The static pages (how to play, privacy, terms): plain HTML, no JavaScript.
   The two blocks above are copied from client/src/ui/tokens.css; scripts/pages.test.js
   checks that both files declare the same variables. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.p-header,
.p-main,
.p-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.p-header {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.p-header a {
  color: var(--c-text);
  font-size: var(--fs-title-md);
  font-weight: 700;
  text-decoration: none;
}

.p-main {
  padding-bottom: calc(var(--sp-5) * 2);
}

h1 {
  font-size: var(--fs-title-lg);
  line-height: 1.2;
  margin: var(--sp-5) 0 var(--sp-3);
}

h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: calc(var(--sp-5) * 1.5) 0 var(--sp-2);
}

p,
ul,
ol {
  margin: 0 0 var(--sp-4);
}

li {
  margin-bottom: var(--sp-2);
}

/* Links and the start button use a darker lavender than --c-primary: --c-primary on white is
   about 3:1, too faint for body text read with reading glasses. */
a {
  color: #4651d1;
  text-underline-offset: 3px;
}

.p-lead {
  font-size: 20px;
}

.p-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-4);
}

.p-table th,
.p-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}

.p-table th:first-child,
.p-table td:first-child {
  padding-left: 0;
}

.p-table td.p-num,
.p-table th.p-num {
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
}

.p-table thead th {
  border-bottom: 2px solid var(--c-border);
}

.p-start {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  background: #4651d1;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.p-footer {
  padding-top: var(--sp-4);
  padding-bottom: calc(var(--sp-5) * 2);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-dim);
}

.p-footer a {
  display: inline-block;
  padding: var(--sp-2) 0;
  margin-right: var(--sp-4);
}

@media (prefers-color-scheme: dark) {
  a {
    color: #a5acff;
  }

  .p-start {
    color: #0f1115;
    background: #a5acff;
  }
}