/* Room — candlelight in a cold house.
 *
 * The parent game's palette is the house Zen pass: warm dark ground, one bright
 * green meaning "you can act here". That green is wrong for this. A chess-green
 * button over a photograph of a dark parlour reads as a productivity app wearing
 * a sheet, and the one screen a pasted link is judged on is the one it sits on.
 *
 * So the meaning stays and the colour moves: AMBER is "this is yours to act on"
 * — the primary button, the guess clock, the thing you have hold of. The study
 * clock is a cold grey, because that is time being spent rather than time being
 * offered. Red is only ever the round you lost.
 *
 * The display face is a serif, because everything in this room is older than the
 * person looking at it.
 */

:root {
  --ground: #14110e;
  --panel: #1b1713;
  --panel-2: #241e18;
  --ink: #e9e0cf;
  --ink-dim: #948872;
  --rule: #3d342a;
  --rule-soft: #2a231c;

  --accent: #d09a3c;          /* candlelight: yours to act on */
  --accent-ink: #16120c;
  --good: #d8a748;            /* the guess clock, running for you */
  --warn: #6f6455;            /* the study clock: time being spent */
  --bad: #9c3b2e;             /* only ever the round you lost */

  --plank: #45413b;
  --mask: #080706;            /* the dark has to be darker than the room */

  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --ui: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 10px;
  --rule-w: 1px;
  --shadow-hard: 0 16px 40px rgba(0,0,0,.62);
  color-scheme: dark;
}

/* A serif wants letterspacing in caps and no fake bolding. */
#wordmark, .big, .hk-hudline, .hk-tell-line {
  font-weight: 600;
  letter-spacing: .07em;
}
#wordmark { font-size: clamp(17px, 4.6vw, 25px); }
.big { letter-spacing: .05em; }

/* Chrome comes off the board: the stage is the room, everything else defers. */
#stage { padding: 12px; }
#top { opacity: .92; }
.chip { background: transparent; border-color: var(--rule-soft); }

/* Buttons are lit brass, not plastic. */
.btn {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 16px;
  border-color: #8a6522;
  box-shadow: 0 3px 0 #8a6522;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6522; }
.btn.ghost {
  background: transparent; color: var(--ink);
  border-color: var(--rule); box-shadow: 0 3px 0 var(--rule-soft);
}
.btn.ghost:active { box-shadow: 0 1px 0 var(--rule-soft); }

.label { letter-spacing: .18em; }
.strip { letter-spacing: 3px; }

/* The sheets and the board are furniture in the same room. */
.sheet { background: rgba(8,7,6,.66); }
.sheet-body { border-color: var(--rule); }
.sheet h2 { font-family: var(--display); font-weight: 600; letter-spacing: .06em; }
ol.board li:nth-child(odd) { background: var(--panel-2); }
ol.board li.me { outline-color: var(--accent); }