/* Quadrant LIVE: shared tokens. Used by the host screen and the phones. */

:root {
  --d: #bb4430; /* The Driver */
  --i: #d99a2b; /* The Spark (gold, takes dark ink text) */
  --s: #4f7a6b; /* The Anchor */
  --c: #3a5a8c; /* The Craftsman */

  --paper: #f3eee2;
  --ink: #211f1a;
  --ink-soft: #5b564b;
  --line: #d8cfba;

  --gold-a: #e8c15a;
  --gold-b: #b8862b;

  --font-display: 'Bricolage Grotesque', 'Arial Black', Impact, system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Each player carries their own style colour: --sc is the fill, --sc-ink the
   text that sits on it, --sc-lt reads on dark, --sc-dk reads on paper. */
[data-style='D'] {
  --sc: var(--d);
  --sc-ink: var(--paper);
  --sc-lt: #e47b66;
  --sc-dk: #bb4430;
}
[data-style='I'] {
  --sc: var(--i);
  --sc-ink: var(--ink);
  --sc-lt: #ebb54f;
  --sc-dk: #94650f;
}
[data-style='S'] {
  --sc: var(--s);
  --sc-ink: var(--paper);
  --sc-lt: #8abaa8;
  --sc-dk: #3f6b5c;
}
[data-style='C'] {
  --sc: var(--c);
  --sc-ink: var(--paper);
  --sc-lt: #83a4da;
  --sc-dk: #3a5a8c;
}

/* The second-strongest style, when a player has one (Di, Cs ...): --ac is its colour.
   data-style stays the PRIMARY letter, so every colour above keeps working. Pure styles
   carry no data-accent at all. */
[data-accent='D'] {
  --ac: var(--d);
}
[data-accent='I'] {
  --ac: var(--i);
}
[data-accent='S'] {
  --ac: var(--s);
}
[data-accent='C'] {
  --ac: var(--c);
}

/* The mark: 2x2 grid, D top-left, I top-right, C bottom-left, S bottom-right. */
.mark {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.09em;
  padding: 0.09em;
  width: 1em;
  height: 1em;
  background: var(--ink);
  flex: none;
}
.mark i {
  display: block;
}
.mark i:nth-child(1) {
  background: var(--d);
}
.mark i:nth-child(2) {
  background: var(--i);
}
.mark i:nth-child(3) {
  background: var(--c);
}
.mark i:nth-child(4) {
  background: var(--s);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.wordmark em {
  font-style: normal;
  color: var(--gold-a);
  margin-left: 0.25em;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}