/* BANK SHOT.
 *
 * There is one material in this game and it is the paint. Everything the player
 * looks at is either the dark ground it is spread on, or the paint itself.
 * Nothing else gets invented: no frames, no cards, no outlines drawn round
 * things to make them look like objects, no second material borrowed from
 * somewhere else. The board already establishes the whole language — thick
 * saturated colour with a hard edge, on near-black — and the interface is built
 * from that and nothing but that.
 *
 * The rule, written down because it was broken once: WHEN A GAME ALREADY HAS A
 * MATERIAL THAT WORKS, THE INTERFACE IS MADE OF THAT MATERIAL. An art pack is
 * for a game with no visual language of its own, and dressing one that has a
 * language in somebody else's is how you get two things on screen arguing.
 */

@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 {
  /* the ground the paint is spread on */
  --ground: #17160f;
  --panel: #1e1c14;
  --panel-2: #26241a;
  --ink: #efece0;
  --ink-dim: #8b8778;
  --rule: #2f2c21;
  --rule-soft: #24221a;

  /* the paint */
  --accent: #81b64c;
  --accent-ink: #12170a;
  --good: #81b64c;
  --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, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 3px;              /* paint does not have rounded corners */
  --rule-w: 1px;
  --shadow-hard: none;
  color-scheme: dark;
}

/* --- the stage ------------------------------------------------------------
   No frame. The board is the object; anything drawn round it is another object
   competing with it. */
#stage {
  background: var(--ground);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 14px 14px;
}
#wordmark { font-weight: 500; }

/* --- the button is a slab of the paint -----------------------------------
   Not a picture of a button. The same swatch the board is painted with, cut to
   a rectangle, with the underside in shadow the way a thick edge of paint sits
   proud of what it is on. */
.btn {
  display: block; width: 100%;
  min-height: 56px; padding: 15px 16px;
  font: inherit; font-family: var(--display);
  font-weight: 700; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  color: var(--accent-ink);
  background: var(--accent) url('/tex/paint.png') center / 340px repeat;
  background-blend-mode: multiply;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 4px 0 rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }

/* A second action is the same slab with no paint on it — bare ground with an
   edge, which is exactly what the board calls unpainted. */
.btn.ghost {
  background: var(--panel-2); color: var(--ink);
  box-shadow: inset 0 0 0 var(--rule-w) var(--rule);
  text-shadow: none;
}
.btn.ghost:active { transform: translateY(1px); box-shadow: inset 0 0 0 var(--rule-w) var(--rule); }

/* Nothing to fire with yet. Bare ground, and it does not pretend otherwise. */
.btn[disabled], .btn:disabled {
  background: var(--panel); color: var(--ink-dim);
  box-shadow: inset 0 0 0 var(--rule-w) var(--rule-soft);
  text-shadow: none; transform: none; cursor: default;
}

/* THE TITLE IS PAINTED, because everything else in this game is. The host
   renders the name as text; this swaps the glyphs for the wordmark and leaves
   the text in the document for anything that reads rather than looks. Only on
   the title screen — the header keeps the plain word, because it carries the
   day number and a number set in paint is a number nobody can read.

   The height is in pixels rather than container units. `cqw` would resolve
   against #stage, whose width comes from an aspect-ratio and a max-height, so
   its width depends on its content height — height from width from height is a
   dependency worth not having even where a browser resolves it. */
.screen.on-splash .big {
  font-size: 0; line-height: 0; color: transparent;
  background: url('/logo.png') center / contain no-repeat;
  height: 80px; margin-bottom: 4px;
}
@media (max-height: 720px) { .screen.on-splash .big { height: 62px; } }

/* --- panels ---------------------------------------------------------------
   A panel is a slightly different dark, and that is all. */
.screen.on-splash {
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  border: 0; border-radius: 0;
  padding: 22px 16px 24px;
}


.sheet-body { background: var(--panel); border-radius: 0; }
.chip { border-radius: 2px; }
.textlink { color: var(--ink-dim); }
.textlink:hover { color: var(--ink); }