:root {
  color-scheme: light;
  --page-background: #fff7e3;
  --page-text: #20333d;
  --page-muted: #59646a;
  --page-accent: #1047e0;
  --game-surround: #fffaf0;
  --game-shadow: #dfd5bc;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-background: #151b2b;
  --page-text: #eef2f7;
  --page-muted: #bbc7d6;
  --page-accent: #789cff;
  --game-surround: #202a40;
  --game-shadow: #090e19;
}

html, body { background: var(--page-background); color: var(--page-text); }
.game { background: var(--game-surround); box-shadow: 0 8px 0 var(--game-shadow); }
canvas, .loading { background: var(--page-background); }
.loading h1 { color: var(--page-accent); }
progress { accent-color: var(--page-accent); }
aside, .presence, .hint, .privacy-links a, .privacy-links button { color: var(--page-muted); }

.site-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 12px;
  max-width: 1920px;
  margin: 0 auto 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--page-muted);
}
.site-controls .presence { margin: 0; }
.project-note { margin: 8px 12px 0; text-align: center; font-size: 11px; line-height: 1.5; color: var(--page-muted); }
.theme-options { display: flex; gap: 8px; border: 0; padding: 0; margin: 0; }
.theme-options label { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; cursor: pointer; white-space: nowrap; }
.theme-options input { width: 13px; height: 13px; margin: 0; accent-color: var(--page-accent); cursor: pointer; }
.theme-options input:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }