@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --board-ground: #0b0d0d;
  --board-panel: #151817;
  --board-panel-alt: #191c1b;
  --board-rule: #343936;
  --board-soft-rule: #282d2a;
  --board-ink: #ebe8dd;
  --board-muted: #929c94;
  --board-dim: #66716a;
  --board-red: #e45b53;
  --board-over: #8b9d8d;
  --board-ivory: #e3decf;
  --row-height: 1.75rem;
  --board-score-col: clamp(30px, 5vw, 44px);
  --board-cols: clamp(22px, 3.4vw, 30px) minmax(0, min(19%, 165px)) var(--board-score-col) repeat(18, minmax(0, 1fr)) clamp(30px, 5vw, 44px);
}

* { box-sizing: border-box; }
html { width: 100%; height: 100%; overflow: hidden; background: var(--board-ground); }
body {
  margin: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--board-ground);
  color: var(--board-ink);
  font-family: 'IBM Plex Mono', monospace;
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

#board-root {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 11px;
  background:
    linear-gradient(90deg, transparent 0, rgba(225, 223, 208, .035) 50%, transparent 100%) top / 100% 1px no-repeat,
    var(--board-ground);
}

.board-head {
  flex: none;
  position: relative;
  z-index: 5;
  min-height: 83px;
  border-bottom: 1px solid var(--board-rule);
  background: var(--board-ground);
}
.board-mast {
  min-height: 53px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--board-soft-rule);
}
.board-brand {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: 15px;
  border-right: 1px solid var(--board-rule);
  color: var(--board-ivory);
  font: 700 17px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-brand::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1px solid var(--board-ivory);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--board-ground), inset 0 0 0 4px var(--board-ivory);
}
.board-event-block {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 12px;
}
.board-event {
  overflow: hidden;
  color: var(--board-ink);
  font: 600 21px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-venue {
  overflow: hidden;
  color: var(--board-muted);
  font: 500 10px/1.2 'IBM Plex Mono', monospace;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-variant {
  flex: 0 0 auto;
  padding: 5px 7px 4px;
  border: 1px solid #4b514c;
  color: var(--board-muted);
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-links { display: flex; flex: 0 0 auto; height: 27px; align-items: center; gap: 0; }
.board-links a {
  display: inline-flex;
  height: 27px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-left: 1px solid var(--board-rule);
  color: var(--board-muted);
  font: 600 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .025em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}
.board-links a:hover, .board-links a:focus-visible { color: var(--board-ink); background: #252a27; }
.board-links a:focus-visible, #board-rounds button:focus-visible { outline: 1px solid var(--board-ivory); outline-offset: -2px; }

.board-controls {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 12px;
}
.board-controls-label {
  flex: 0 0 auto;
  color: var(--board-dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#board-rounds { display: flex; min-width: 0; align-items: center; gap: 3px; }
#board-rounds button {
  min-width: 33px;
  height: 23px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--board-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
#board-rounds button:hover { color: var(--board-ink); background: #252a27; }
#board-rounds button.active,
#board-rounds button.is-active,
#board-rounds button[aria-selected="true"],
#board-rounds button[aria-pressed="true"] {
  border-color: #676c63;
  background: #363b36;
  color: var(--board-ink);
}
#board-score-modes { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-left: 5px; }
#board-score-modes button {
  height: 23px;
  padding: 0 7px;
  border: 1px solid var(--board-rule);
  border-radius: 0;
  background: transparent;
  color: var(--board-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
  cursor: pointer;
}
#board-score-modes button:hover { color: var(--board-ink); }
#board-score-modes button[aria-pressed="true"] {
  border-color: var(--board-muted);
  background: #363b36;
  color: var(--board-ink);
}
#board-score-modes button:focus-visible { outline: 2px solid var(--board-ivory); outline-offset: 1px; }
.board-controls-note {
  margin-left: auto;
  color: var(--board-dim);
  font-size: 9px;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* One coordinate system for the fixed ruler, pinned par strip, and moving rows. */
.board-ruler,
.board-par,
.board-player {
  display: grid;
  grid-template-columns: var(--board-cols);
  min-width: 0;
  width: 100%;
  align-items: stretch;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body[data-board="b"] {
  --board-score-col: clamp(29px, 4.8vw, 43px);
  --board-cols: clamp(22px, 3.4vw, 30px) minmax(0, min(18%, 160px)) var(--board-score-col) repeat(18, minmax(0, 1fr)) clamp(27px, 4.6vw, 41px) clamp(25px, 4vw, 36px);
}
body[data-score-mode="running"] { --board-score-col: clamp(27px, 4.4vw, 38px); }
:is(.board-ruler, .board-par, .board-player) > .board-prior { display: none; }
body[data-score-mode="running"] :is(.board-ruler, .board-par, .board-player) > .board-total { display: none; }
body[data-score-mode="running"] :is(.board-ruler, .board-par, .board-player) > .board-prior { display: flex; }
.board-ruler {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 27px;
  border-bottom: 1px solid #5a625a;
  background: #242925;
  color: #b9c0b5;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
}
.board-ruler > span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #3a413a;
}
.board-ruler > .ruler-name { justify-content: flex-start; padding-left: 9px; }
.board-ruler > .ruler-total { color: var(--board-ivory); }
.board-ruler > .ruler-prior { color: var(--board-ivory); font-size: 8px; letter-spacing: 0; }
.board-ruler > .ruler-round { border-left: 1px solid #5b625a; }
.board-ruler > .ruler-move { border-right: 0; }

.board-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-color: #4f5850 #151917;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
#board-grid {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 100%;
}
.board-par {
  position: sticky;
  top: 27px;
  z-index: 4;
  height: 25px;
  border-bottom: 1px solid #4b554b;
  background: #1a211c;
  color: #9da99c;
  font-size: 9px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.board-par > * {
  min-width: 0;
  border-right: 1px solid #303a32;
  overflow: hidden;
  white-space: nowrap;
}
.board-par .board-name { padding-left: 9px; text-align: left; }
.board-par .board-round { border-left: 1px solid #465249; }
.board-par .board-movement { border-right: 0; }

.board-player {
  position: absolute;
  top: 25px;
  left: 0;
  z-index: 1;
  height: var(--row-height);
  background: var(--board-panel);
  color: var(--board-ink);
  font-size: 11px;
  line-height: var(--row-height);
  transform: translate3d(0, var(--row-y, 0px), 0);
  transition: transform 750ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.board-player.board-no-motion { transition: none; }
.board-player:nth-child(2n + 1) { background: var(--board-panel-alt); }
.board-player::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--board-soft-rule);
  pointer-events: none;
}
.board-player > * {
  display: flex;
  min-width: 0;
  height: var(--row-height);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid rgba(110, 122, 111, .14);
  white-space: nowrap;
}
.board-player .board-pos {
  color: #c8cabe;
  font-size: 10px;
  font-weight: 600;
}
.board-player .board-name {
  justify-content: flex-start;
  gap: 1px;
  overflow: hidden;
  padding: 0 5px 0 8px;
  border-right: 1px solid #424a42;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .025em;
  text-align: left;
  text-transform: uppercase;
}
.board-first { flex: 0 0 auto; margin-right: 3px; color: #aab2a7; font-size: 10px; }
.board-surname { display: inline-flex; flex: 1 1 auto; width: 0; min-width: 0; align-items: center; gap: 1px; overflow: hidden; }
.board-punctuation { display: inline-flex; align-items: center; justify-content: center; width: 5px; }
.board-letter {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--tile-width, 9px);
  height: 18px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #434844 0%, #303532 49%, #292d2b 100%);
  border-top: 1px solid #777e75;
  border-left: 1px solid #5f665e;
  border-right: 1px solid #171b19;
  border-bottom: 2px solid #101311;
  box-shadow: 0 2px 1px #090b0a, inset 0 1px 0 rgba(235, 235, 218, .09);
  color: #eeede3;
  font-size: var(--tile-font, 12px);
  line-height: 1;
  text-shadow: 0 1px 0 #161a17;
}
.board-letter:empty { width: 4px; border: 0; background: none; box-shadow: none; }
.board-player :is(.board-total, .board-prior) {
  background: rgba(220, 215, 192, .055);
  color: var(--board-ink);
  font-weight: 600;
}
.board-player .board-hole { color: #dfdfd4; }
.board-player .board-hole:empty { background: transparent; }
.board-player .board-round {
  border-left: 1px solid #454c43;
  color: #d4d8cb;
  font-weight: 600;
}
.board-player .board-movement {
  border-right: 0;
  color: #a8b1a7;
  font-size: 10px;
  font-weight: 600;
}
.board-player :is(.under-par, .is-under, .board-under, .board-negative, .birdie, .eagle, [data-score="under"], [data-result="birdie"], [data-result="eagle"]) {
  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"]) {
  color: var(--board-over);
}
.board-player :is(.board-hole, .board-total, .board-prior, .board-round):empty { color: transparent; }
.board-player .board-hole.result-birdie {
  background: #391e21;
  box-shadow: inset 0 0 0 1px #5d3032;
}
.board-player .board-hole.result-eagle {
  background: #692b2c;
  box-shadow: inset 0 0 0 1px #b4554e, inset 0 0 0 2px #3a1f20;
  font-weight: 700;
}
.board-player .board-hole.result-bogey { background: #1b2220; }
.board-player .board-hole.result-double {
  background: #28302b;
  box-shadow: inset 0 0 0 1px #526457;
  font-weight: 700;
}
.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); }
body[data-board="b"] .board-player .board-hole.is-under { color: var(--board-red); }
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 :is(.board-total, .board-prior, .board-round).is-under,
.board-player .board-movement.is-up { color: var(--board-red); }
.board-player :is(.board-total, .board-prior, .board-round).is-over,
.board-player .board-movement.is-down { color: var(--board-over); }
body[data-score-mode="running"] .board-player .board-hole.is-under { color: var(--board-red); }
body[data-score-mode="running"] .board-player .board-hole.is-over { color: var(--board-over); }
body[data-score-mode="running"] .board-player .board-hole.is-level { color: var(--board-ink); }
.board-player.is-cut { opacity: .68; }
.board-player.is-waiting::before {
  content: attr(data-tee);
  position: absolute;
  left: calc(clamp(22px, 3.4vw, 30px) + min(19%, 165px) + var(--board-score-col));
  right: clamp(30px, 5vw, 44px);
  z-index: 2;
  height: 27px;
  padding-left: 10px;
  background: #171c19;
  color: var(--board-muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-align: left;
}
body[data-board="b"] .board-player.is-waiting::before {
  left: calc(clamp(22px, 3.4vw, 30px) + min(18%, 160px) + var(--board-score-col));
  right: calc(clamp(27px, 4.6vw, 41px) + clamp(25px, 4vw, 36px));
}

body[data-board="b"] .board-player:is(.is-leader, .board-leader, [data-leader="true"], [data-position="1"]) .board-letter {
  background: linear-gradient(180deg, #f4f0e3 0%, #e2dccd 58%, #c5beae 100%);
  border-top-color: #fff9ec;
  border-left-color: #eee9da;
  border-right-color: #978f82;
  border-bottom-color: #8f887b;
  box-shadow: 0 2px 1px #090b0a, inset 0 1px 0 rgba(255, 255, 255, .5);
  color: #252a25;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .32);
}
.board-spacer { width: 1px; pointer-events: none; }
.board-page-snap {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
}

@media (max-width: 800px) {
  #board-root { padding-right: 7px; padding-left: 7px; }
  .board-brand { font-size: 15px; padding-right: 9px; }
  .board-event { font-size: 18px; }
  .board-venue, .board-controls-note { display: none; }
}
@media (max-width: 580px) {
  .board-mast { flex-wrap: wrap; gap: 0 9px; padding-top: 7px; }
  .board-brand { height: 24px; }
  .board-event-block { height: 24px; align-items: center; }
  .board-variant { order: 2; }
  .board-links { order: 3; margin-left: auto; }
  .board-controls { gap: 5px; }
  .board-controls-label { display: none; }
  #board-score-modes { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .board-player { transition: none; }
  .board-links a, #board-rounds button, #board-score-modes button { transition: none; }
}