/* ONE TAKE — the stage.
 *
 * Dan's Zen pass on Hex Smash is the house look and this is it, with one thing
 * added. Warm dark ground, flat fills, a 1.5px near-black edge on everything,
 * no gradients, no glows, no blur. One green that means "you can act here" and
 * nothing else; one amber that means "this is about to spend something you do
 * not get back".
 *
 * The addition is that this game has a CLOCK running through it, so the ground
 * carries a bar line. Everything on the play surface is aligned to the beat
 * grid or deliberately not aligned to it, and nothing floats.
 */

@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
  --ground: #262421;
  --panel: #21201d;
  --panel-2: #2d2b27;
  --ink: #e4e1dd;
  --ink-dim: #98948e;
  --rule: #221f1c;
  --rule-soft: #3a3732;
  --tile: #4b4741;

  /* The only green in the product. It means YOU CAN ACT HERE: a lane that is
     live, a slot you can claim, the button that starts something. */
  --accent: #81b64c;
  --accent-ink: #16180f;
  --good: #81b64c;
  /* And the only amber. It means THIS SPENDS SOMETHING YOU DO NOT GET BACK,
     which in this game is exactly one button. */
  --warn: #d9a13b;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ui: "Space Grotesk", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 12px;
  --rule-w: 1.5px;
  --shadow-hard: 0 3px 0 var(--rule);
  color-scheme: dark;
}

/* There is no light variant. A stage is dark. */

body { font-weight: 500; }

#wordmark { font-weight: 700; letter-spacing: -.01em; }

#stage { background: var(--panel); }

.btn {
  border-radius: var(--radius);
  letter-spacing: -.01em;
  box-shadow: 0 3px 0 var(--rule);
  transition: transform .06s, box-shadow .06s;
}
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn.ghost { background: var(--panel-2); border-color: var(--rule-soft); }
/* Relay styles .btn and had nothing for :disabled, so a switched-off primary
   button arrived full-green and full-contrast — the player taps it, nothing
   happens, and that reads as broken rather than as "not yet". Crown Run logged
   this; every game on this template will disable its action button somewhere. */
.btn:disabled, .btn[disabled] {
  background: var(--tile); color: var(--ink-dim); border-color: var(--rule-soft);
  box-shadow: none; cursor: default; transform: none;
}
/* The one button in this game that spends something. */
.btn.commit { background: var(--warn); color: #1b1710; }

.label { color: var(--ink-dim); font-weight: 700; }
.big { font-weight: 700; letter-spacing: -.02em; }
.muted { color: var(--ink-dim); }

.chip { background: var(--panel-2); border-color: var(--rule-soft); font-weight: 500; }