:root {
  --bg: #f4f3ef;
  --ink: #111111;
  --muted: #6f6f69;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #101012; --ink: #ecebe5; --muted: #8b8b85; }
}
/* Themes other than the default pin their own colours; see src/themes.js */
:root[data-theme="neon"]     { --bg: #07060d; --ink: #f0e8ff; --muted: #8a7fa8; }
:root[data-theme="terminal"] { --bg: #040a05; --ink: #33ff66; --muted: #1f9a3e; }
:root[data-theme="ocean"]    { --bg: #04141f; --ink: #bfe9ff; --muted: #5d8aa3; }
:root[data-theme="ink"]      { --bg: #efe9dc; --ink: #1d1d1f; --muted: #807a6e; }
:root[data-theme="candy"]    { --bg: #fff3f6; --ink: #5b3a4a; --muted: #b08597; }
:root[data-theme="ocean"] body { background: radial-gradient(circle at 50% 45%, #0b2e44, #030c14 75%); }
:root[data-theme="terminal"] #hud { text-shadow: 0 0 6px currentColor; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
}
canvas { display: block; touch-action: none; }
#hud  { position: fixed; left: 14px; top: 12px; white-space: pre; letter-spacing: .02em;
        pointer-events: none; }
#help {
  position: fixed; left: 14px; bottom: 12px; right: 14px;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  pointer-events: none;
}
#help button {
  pointer-events: auto;
  font: inherit; color: var(--muted); background: transparent;
  border: 1px solid rgba(128, 128, 128, .35); border-radius: 5px;
  padding: 3px 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
#help button:hover { color: var(--ink); border-color: rgba(128, 128, 128, .75); }
#help button:disabled { opacity: .4; cursor: default; }
#help button:disabled:hover { color: var(--muted); border-color: rgba(128, 128, 128, .35); }
#help button.on { color: var(--ink); border-color: currentColor; }
#help .val { color: var(--ink); }
#help button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
kbd {
  font: inherit; opacity: .65;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 4px;
}
#help button[hidden] { display: none; }   /* beats the inline-flex above */
/* touch device: the key names mean nothing without a keyboard */
@media (hover: none) and (pointer: coarse) {
  #help kbd { display: none; }
  #help button { padding: 6px 10px; }     /* easier to hit with a thumb */
  #help { gap: 8px; }
}