/* Shelf — the house look, dark. Dan's Hex Smash pass: warm near-black ground,
 * flat fills, a 1.5px dark edge on everything, no gradients and no glows.
 *
 * The two colours carry meaning and nothing else carries theirs:
 *   --good  (green) "you can act here" — the guess timer, the primary button
 *   --warn  (amber) "time you are spending" — the study timer
 *   --bad   (red)   only ever the round you lost
 */

:root {
  --ground: #262421;
  --panel: #1e1c19;
  --panel-2: #2c2a26;
  --ink: #e4e1dd;
  --ink-dim: #98948e;
  --rule: #4b4741;
  --rule-soft: #35322d;
  --accent: #81b64c;
  --accent-ink: #171a11;
  --good: #81b64c;
  --warn: #d9a13b;
  --bad: #c0503f;

  /* The shelf's own two: the plank the objects stand on, and the blank field
   * the mask flashes. The mask has to be unmistakably NOT the shelf — a mask a
   * shade off the background is a mask nobody notices, and then the change
   * looks like it faded in. */
  --plank: #4b4741;
  --mask: #100f0d;

  --display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --ui: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 12px;
  --rule-w: 1.5px;
  --shadow-hard: 0 12px 34px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* The display face is a grotesque, not a condensed poster face, so it needs the
 * weight the template's 400 does not give it. */
#wordmark, .big, .kg-hudline { font-weight: 700; }
#wordmark { letter-spacing: .01em; }
.big { letter-spacing: -.01em; }

/* Chrome comes off the board: the board is centred and the buttons sit under
 * it, so nothing competes with the shelf. */
#stage { padding: 14px; }
.btn { box-shadow: 0 4px 0 #5c8236; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5c8236; }
.btn.ghost { box-shadow: 0 4px 0 var(--rule-soft); }
.btn.ghost:active { box-shadow: 0 1px 0 var(--rule-soft); }