/* Colours live in custom properties so M5 can reuse them for tokens. */
:root {
  --red: #d64541;
  --green: #2e9e5b;
  --yellow: #e8b923;
  --blue: #2f6fd6;
  --square: #ffffff;
  --line: #333333;
  --page: #f4f1ea;
}

body {
  margin: 0;
  background: var(--page);
  font-family: system-ui, sans-serif;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

/* Status text with the buttons right after it, in a row that keeps its height when the buttons
   are hidden: the board below never jumps. */
.controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;  /* tall enough for the Roll button, so hiding it changes nothing */
}

/* The button pressed most often: big enough to hit easily, on a phone too. */
#roll {
  font-size: 1.25rem;
  padding: 0.4rem 1.5rem;
}

.controls #status {
  margin: 0;
}

/* Reserve one line even when there's no error, for the same reason. */
#error {
  min-height: 1.5em;
  margin: 0.25rem 0;
  color: var(--red);
}

/* The SVG scales to the width of its container; the viewBox keeps it square. */
.board {
  display: block;
  width: 100%;
  height: auto;
}

/* Sizes inside the SVG are in board units (1 = one square), so lines must be thin fractions. */
.board rect {
  fill: var(--square);
  stroke: var(--line);
  stroke-width: 0.03;
}

/* Attribute selectors: style by data-colour, so the template doesn't repeat the colour as a class. */
[data-colour="red"] { --colour: var(--red); }
[data-colour="green"] { --colour: var(--green); }
[data-colour="yellow"] { --colour: var(--yellow); }
[data-colour="blue"] { --colour: var(--blue); }

.board .yard { fill: var(--colour); }
.board .home { fill: var(--colour); }

/* Base slots: white spots inside the coloured yard. */
.board .base { fill: var(--square); stroke: var(--colour); stroke-width: 0.08; }

.board .safe { fill: #d9d9d9; }

.board .centre-area { fill: #e6e0d4; }
.board .centre { fill: #555555; }

/* Tokens: drawn by app.js with data-colour, so the attribute rules above give them --colour. */
.board .token { fill: var(--colour); stroke: var(--line); stroke-width: 0.04; }

/* Tokens the player may move now: a thick dark ring (white would vanish on the white base slots),
   and a pointer to say "click me". */
.board .movable { stroke: #111111; stroke-width: 0.14; cursor: pointer; }

/* Each member's bullet in their colour. app.js sets data-colour on the <li> once a game exists, and
   the attribute rules above turn that into --colour. In the lobby there are no colours yet: grey. */
#members li::marker {
  color: var(--colour, #999999);
  font-size: 1.4em;
}