/*
 * Board B / painted paper
 * Color-only treatment. The shared board owns every measurement and motion rule.
 */
:root {
  color-scheme: light;
  --board-ground: #f2eee5;
  --board-panel: #eee9df;
  --board-panel-alt: #e9e3d8;
  --board-rule: #bdb5a7;
  --board-soft-rule: #d4cbbd;
  --board-ink: #282923;
  --board-muted: #55574d;
  --board-dim: #646459;
  --board-red: #762124;
  --board-over: #264b3d;
  --board-ivory: #faf3df;
}

html,
body {
  background: var(--board-ground);
  color: var(--board-ink);
}

#board-root {
  background:
    linear-gradient(90deg, transparent 0, rgba(104, 82, 53, .065) 50%, transparent 100%) top / 100% 1px no-repeat,
    var(--board-ground);
}

.board-head {
  background: var(--board-ground);
  border-bottom-color: var(--board-rule);
}
.board-mast { border-bottom-color: var(--board-soft-rule); }
.board-brand {
  color: var(--board-ink);
  border-right-color: var(--board-rule);
}
.board-brand::before {
  border-color: var(--board-over);
  box-shadow: inset 0 0 0 2px var(--board-ground), inset 0 0 0 4px var(--board-over);
}
.board-event { color: var(--board-ink); }
.board-venue,
.board-controls-note { color: var(--board-muted); }
.board-variant {
  border-color: var(--board-rule);
  background: #e9e1d3;
  color: var(--board-muted);
}
.board-links a {
  border-left-color: var(--board-rule);
  color: var(--board-muted);
}
.board-links a:hover,
.board-links a:focus-visible {
  background: #ded5c7;
  color: var(--board-ink);
}
.board-links a:focus-visible,
#board-rounds button:focus-visible,
.board-scroll:focus-visible {
  outline: 2px solid var(--board-over);
  outline-offset: -2px;
}
.board-controls-label { color: var(--board-dim); }
#board-rounds button { color: var(--board-muted); }
#board-rounds button:hover,
#board-rounds button:focus-visible {
  background: #ded5c7;
  color: var(--board-ink);
}
#board-rounds button.active,
#board-rounds button.is-active,
#board-rounds button[aria-selected="true"],
#board-rounds button[aria-pressed="true"] {
  border-color: #a49a8b;
  background: #d8cebd;
  color: var(--board-ink);
}
#board-score-modes button[aria-pressed="true"] {
  border-color: #a49a8b;
  background: #d8cebd;
  color: var(--board-ink);
}
#board-score-modes button:focus-visible { outline-color: var(--board-over); }

.board-ruler {
  border-bottom-color: #a99f8f;
  background: #ded5c6;
  color: #45463d;
}
.board-ruler > span { border-right-color: #c7bdae; }
.board-ruler > .ruler-total,
.board-ruler > .ruler-prior { color: var(--board-ink); }
.board-ruler > .ruler-round { border-left-color: #aaa08e; }
.board-scroll {
  scrollbar-color: #aaa08e #e6e0d4;
}
.board-scroll::-webkit-scrollbar { background: #e6e0d4; }
.board-scroll::-webkit-scrollbar-thumb {
  background: #aaa08e;
  border: 2px solid #e6e0d4;
}
.board-scroll::-webkit-scrollbar-thumb:hover { background: #847b6e; }

.board-par {
  border-bottom-color: #aaa08f;
  background: #e4dccc;
  color: var(--board-ink);
}
.board-par > * { border-right-color: #c9bfaf; }
.board-par .board-round { border-left-color: #aaa08f; }

.board-player,
.board-player:nth-child(2n + 1) { color: var(--board-ink); }
.board-player { background: var(--board-panel); }
.board-player:nth-child(2n + 1) { background: var(--board-panel-alt); }
.board-player::after { background: var(--board-soft-rule); }
.board-player > * { border-right-color: rgba(95, 83, 66, .16); }
.board-player .board-pos,
.board-first { color: #57594e; }
.board-player .board-name { border-right-color: #bdb4a4; }

/* Every surname is a field of individual, raised ivory letter plates. */
.board-letter,
body[data-board="b"] .board-player .board-letter {
  background: linear-gradient(180deg, #fff9eb 0%, #f3ead5 52%, #e5d9bf 100%);
  border-top-color: #fffdf4;
  border-left-color: #fbf3df;
  border-right-color: #b4a790;
  border-bottom-color: #a99a80;
  box-shadow: 0 2px 1px rgba(83, 67, 45, .22), inset 0 1px 0 rgba(255, 255, 255, .8);
  color: #292923;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.board-letter:empty,
body[data-board="b"] .board-player .board-letter:empty {
  background: none;
  border: 0;
  box-shadow: none;
}
body[data-board="b"] .board-player:is(.is-leader, .board-leader, [data-leader="true"], [data-position="1"]) .board-letter {
  background: linear-gradient(180deg, #fffef6 0%, #fff7e3 52%, #ebddbc 100%);
  border-top-color: #fffefa;
  border-left-color: #fffdf3;
  border-right-color: #aa9b7f;
  border-bottom-color: #968668;
  box-shadow: 0 2px 1px rgba(83, 67, 45, .3), inset 0 1px 0 #fffefa;
  color: #242720;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
body[data-board="b"] .board-player:is(.is-leader, .board-leader, [data-leader="true"], [data-position="1"]) .board-letter:empty {
  background: none;
  border: 0;
  box-shadow: none;
}

.board-player :is(.board-total, .board-prior) {
  background: rgba(126, 104, 71, .075);
  color: var(--board-ink);
}
.board-player .board-hole { color: var(--board-ink); }
.board-player .board-round {
  border-left-color: #bdb4a4;
  color: var(--board-ink);
}
.board-player .board-movement { color: var(--board-muted); }
.board-player :is(.under-par, .is-under, .board-under, .board-negative, .birdie, .eagle, [data-score="under"], [data-result="birdie"], [data-result="eagle"]),
.board-player :is(.board-total, .board-prior).is-under,
.board-player .board-round.is-under,
.board-player .board-movement.is-up,
body[data-board="b"] .board-player .board-hole.is-under {
  color: var(--board-red);
}
.board-player :is(.over-par, .is-over, .board-over, .bogey, .double-bogey, [data-score="over"], [data-result="bogey"], [data-result="double-bogey"]),
.board-player :is(.board-total, .board-prior).is-over,
.board-player .board-round.is-over,
.board-player .board-movement.is-down,
body[data-board="b"] .board-player .board-hole.is-over {
  color: var(--board-over);
}
body[data-board="b"] .board-player .board-hole.is-level { color: var(--board-ink); }
.board-player .board-hole.result-birdie {
  background: #f0dbd3;
  box-shadow: inset 0 0 0 1px #d8b8ae;
}
.board-player .board-hole.result-eagle {
  background: #e9cdc3;
  box-shadow: inset 0 0 0 1px #bf9c90, inset 0 0 0 2px #f5e2d8;
}
.board-player .board-hole.result-bogey { background: #dce7dc; }
.board-player .board-hole.result-double {
  background: #d0dfd1;
  box-shadow: inset 0 0 0 1px #aec4af;
}
.board-player .board-hole:is(.result-birdie, .result-eagle) { color: var(--board-red); }
.board-player .board-hole:is(.result-bogey, .result-double) { color: var(--board-over); }
/* Never fade 11px scores below accessible contrast, including cut players. */
.board-player.is-cut { opacity: 1; }
.board-player.is-cut .board-name,
.board-player.is-cut .board-pos { color: var(--board-muted); }
.board-player.is-waiting::before {
  background: #e7e0d2;
  color: var(--board-muted);
  box-shadow: inset 0 1px 0 #f4eee3, inset 0 -1px 0 #cfc4b3;
}