Skip to content

Instantly share code, notes, and snippets.

@rgstephens

rgstephens/241-a-pairing-matrix.html

Last active September 14, 2026 15:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rgstephens/88d466c1be195d55f6fe27ea7a1ac083 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rgstephens/88d466c1be195d55f6fe27ea7a1ac083 to your computer and use it in GitHub Desktop.
Download ZIP
TourneyCard issue 241 — three frontend design directions (anonymized mockups)
Raw
241-a-pairing-matrix.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>241 A — Pairing Matrix</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--surface: #f7fbf8;
--panel: #ffffff;
--ink: #16282c;
--ink-soft: #364958;
--teal: #3b6064;
--teal-mid: #55828b;
--sage: #87bba2;
--mint: #c9e4ca;
--mint-faint: #e6f2e7;
--line: #dde9e0;
--flag: #b8443a;
--flag-faint: #f6e7e4;
}
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
background: var(--surface);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
.page { width: 1180px; margin: 0 auto; padding: 34px 30px 48px; }
.kicker {
font-size: 11px; font-weight: 900; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--teal-mid); margin-bottom: 6px;
}
h1 { font-size: 23px; font-weight: 950; letter-spacing: -0.01em; margin-bottom: 6px; }
.page-sub { font-size: 13px; color: var(--teal-mid); font-weight: 600; margin-bottom: 24px; max-width: 820px; line-height: 1.55; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; border-radius: 6px; }
/* ---------- panel shell ---------- */
.panel {
display: grid;
grid-template-columns: minmax(0, 1fr) 292px;
gap: 20px;
align-items: start;
}
.card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
}
/* ---------- header ---------- */
.setup-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line);
}
.setup-head h2 { font-size: 18px; font-weight: 950; letter-spacing: -0.01em; }
.setup-head .group-meta { font-size: 12px; color: var(--teal-mid); font-weight: 650; margin-top: 3px; }
.roster-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 560px; }
.chip {
display: inline-flex; align-items: baseline; gap: 5px;
border: 1px solid var(--line); background: var(--mint-faint);
border-radius: 999px; padding: 5px 11px;
font-size: 12px; font-weight: 800; color: var(--teal);
}
.chip .hcp { font-size: 10.5px; font-weight: 700; color: var(--teal-mid); }
/* ---------- matrix ---------- */
.matrix-wrap { padding: 20px; }
.matrix-title {
display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;
}
.matrix-title strong { font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.matrix-title span { font-size: 11.5px; font-weight: 650; color: var(--teal-mid); }
table.matrix { border-collapse: separate; border-spacing: 4px; width: 100%; }
table.matrix th {
font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--teal-mid); padding: 2px; text-align: center;
}
table.matrix th.rowhead { text-align: right; padding-right: 8px; white-space: nowrap; }
table.matrix th.rowhead .nm { color: var(--ink); font-size: 12.5px; font-weight: 850; letter-spacing: 0; text-transform: none; }
.puck {
width: 46px; height: 46px; margin: 0 auto;
border-radius: 999px; background: var(--teal); color: #fff;
display: grid; place-items: center; position: relative;
font-size: 15px; font-weight: 950; letter-spacing: 0.02em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
}
.puck .hcp {
position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
background: var(--ink); color: #fff; border-radius: 999px;
font-size: 9.5px; font-weight: 800; padding: 1.5px 7px; letter-spacing: 0.04em;
}
table.matrix td { padding: 0; }
td.cell { width: 96px; height: 62px; }
.cell-off, .cell-on, .cell-mirror { width: 100%; height: 62px; border-radius: 8px; }
.cell-off {
border: 1.5px dashed var(--sage); background: #fff; color: var(--sage);
display: grid; place-items: center; cursor: pointer;
font-size: 20px; font-weight: 700; transition: background 120ms ease;
}
.cell-off:hover { background: var(--mint-faint); }
.cell-mirror {
background: repeating-linear-gradient(-45deg, #f2f7f3 0 6px, #eaf2eb 6px 12px);
border: 1px solid var(--line);
}
.cell-on {
border: 1.5px solid var(--teal); background: var(--mint);
padding: 7px 8px 6px; cursor: pointer; text-align: left;
display: flex; flex-direction: column; justify-content: space-between;
box-shadow: 0 3px 10px rgba(59, 96, 100, 0.16);
}
.cell-on .fmt {
font-size: 9.5px; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
}
.cell-on .segs { display: flex; gap: 3px; }
.cell-on .seg {
flex: 1; background: #fff; border: 1px solid var(--teal);
border-radius: 4px; text-align: center; padding: 2px 0 3px;
}
.cell-on .seg b { display: block; font-size: 8px; font-weight: 900; letter-spacing: 0.06em; color: var(--teal-mid); }
.cell-on .seg i { display: block; font-style: normal; font-size: 12.5px; font-weight: 900; color: var(--flag); font-family: ui-monospace, Menlo, monospace; }
.cell-on.low .seg i { font-size: 12px; }
/* ---------- splits ---------- */
.splits { padding: 4px 20px 20px; }
.splits-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.splits-head strong { font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.splits-head span { font-size: 11.5px; font-weight: 650; color: var(--teal-mid); }
.split-row {
display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center;
border: 1px solid var(--line); border-left: 5px solid var(--teal);
border-radius: 8px; background: #fff; padding: 11px 14px; margin-bottom: 8px;
}
.split-row .teams { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.split-row .teams em { font-style: normal; color: var(--teal-mid); font-weight: 850; padding: 0 6px; }
.split-row .teams small { display: block; font-size: 11px; font-weight: 650; color: var(--teal-mid); margin-top: 2px; }
.split-row .stake { text-align: right; }
.split-row .stake b { font-size: 13px; font-weight: 900; color: var(--flag); }
.split-row .stake small { display: block; font-size: 10px; font-weight: 700; color: var(--teal-mid); letter-spacing: 0.05em; }
.icon-btn {
border: 1px solid var(--line); background: var(--mint-faint); color: var(--teal);
border-radius: 7px; font-size: 11.5px; font-weight: 850; padding: 6px 10px; cursor: pointer;
}
.add-split {
width: 100%; border: 1.5px dashed var(--sage); background: transparent; color: var(--teal-mid);
border-radius: 8px; padding: 9px; font-size: 12.5px; font-weight: 800; cursor: pointer; margin-top: 2px;
}
/* ---------- rail ---------- */
.rail { padding: 18px; position: sticky; top: 20px; }
.rail h3 { font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.rail-sec { font-size: 10px; font-weight: 950; letter-spacing: 0.14em; color: var(--teal-mid); margin: 14px 0 6px; text-transform: uppercase; }
.rail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--line); }
.rail-row .who { font-size: 12.5px; font-weight: 750; color: var(--ink); }
.rail-row .who small { display: block; font-size: 10.5px; font-weight: 650; color: var(--teal-mid); }
.rail-row .amt { font-size: 12.5px; font-weight: 900; color: var(--flag); }
.rail-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); }
.rail-total b { font-size: 13px; font-weight: 950; letter-spacing: 0.02em; }
.rail-total .amt { font-size: 20px; font-weight: 950; color: var(--flag); }
.press-note {
margin-top: 12px; background: var(--flag-faint); border: 1px dashed #e2b8b2; border-radius: 8px;
padding: 9px 11px; font-size: 11px; font-weight: 650; color: #8f3229; line-height: 1.5;
}
.press-note b { font-weight: 900; }
.rail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.save-btn {
border: 0; border-radius: 8px; background: var(--ink); color: #fff;
font-size: 13.5px; font-weight: 900; padding: 11px; cursor: pointer; letter-spacing: 0.01em;
}
.fav-select {
border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft);
font-size: 12px; font-weight: 700; padding: 9px 10px;
}
.foot-note { margin-top: 16px; font-size: 11px; color: var(--teal-mid); font-weight: 600; text-align: center; }
</style>
</head>
<body>
<div class="page">
<p class="kicker">Design A · Issue 241 · Foursome match setup</p>
<h1>Pairing Matrix</h1>
<p class="page-sub">Every possible pairing in the group is one cell. Tap a cell to stake a singles Nassau; build best-ball games in the splits strip below. Works with 3, 4 or 5 players — unmatched golfers rotate or sit, stated per game.</p>
<div class="panel">
<div class="card">
<div class="setup-head">
<div>
<h2>Match Builder</h2>
<div class="group-meta">Saturday Medal · 8:12 AM · 5 players</div>
</div>
<div class="roster-chips" aria-label="Group members">
<span class="chip">Alex <span class="hcp mono">12</span></span>
<span class="chip">Blake <span class="hcp mono">9</span></span>
<span class="chip">Casey <span class="hcp mono">15</span></span>
<span class="chip">Drew <span class="hcp mono">21</span></span>
<span class="chip">Evan <span class="hcp mono">8</span></span>
</div>
</div>
<div class="matrix-wrap">
<div class="matrix-title">
<strong>Singles — tap a pairing</strong>
<span>3 of 10 pairings staked</span>
</div>
<table class="matrix" aria-label="Singles pairing matrix">
<thead>
<tr>
<th></th><th>ALE</th><th>BLA</th><th>CAS</th><th>DRE</th><th>EVA</th>
</tr>
</thead>
<tbody>
<tr>
<th class="rowhead"><span class="nm">Alex</span></th>
<td><div class="puck">AL<span class="hcp mono">12</span></div></td>
<td class="cell"><button class="cell-on" aria-label="Alex vs Blake, singles Nassau, 5 5 10">
<span class="fmt">Sgl Nassau</span>
<span class="segs">
<span class="seg"><b>F</b><i>5</i></span><span class="seg"><b>B</b><i>5</i></span><span class="seg"><b>T</b><i>10</i></span>
</span>
</button></td>
<td class="cell"><button class="cell-off" aria-label="Add Alex vs Casey">+</button></td>
<td class="cell"><button class="cell-on" aria-label="Alex vs Drew, singles Nassau, 5 5 10">
<span class="fmt">Sgl Nassau</span>
<span class="segs">
<span class="seg"><b>F</b><i>5</i></span><span class="seg"><b>B</b><i>5</i></span><span class="seg"><b>T</b><i>10</i></span>
</span>
</button></td>
<td class="cell"><button class="cell-off" aria-label="Add Alex vs Evan">+</button></td>
</tr>
<tr>
<th class="rowhead"><span class="nm">Blake</span></th>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="puck">BL<span class="hcp mono">9</span></div></td>
<td class="cell"><button class="cell-off" aria-label="Add Blake vs Casey">+</button></td>
<td class="cell"><button class="cell-off" aria-label="Add Blake vs Drew">+</button></td>
<td class="cell"><button class="cell-off" aria-label="Add Blake vs Evan">+</button></td>
</tr>
<tr>
<th class="rowhead"><span class="nm">Casey</span></th>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="puck">CA<span class="hcp mono">15</span></div></td>
<td class="cell"><button class="cell-off" aria-label="Add Casey vs Drew">+</button></td>
<td class="cell"><button class="cell-on low" aria-label="Casey vs Evan, singles Nassau, 3 3 6">
<span class="fmt">Sgl Nassau</span>
<span class="segs">
<span class="seg"><b>F</b><i>3</i></span><span class="seg"><b>B</b><i>3</i></span><span class="seg"><b>T</b><i>6</i></span>
</span>
</button></td>
</tr>
<tr>
<th class="rowhead"><span class="nm">Drew</span></th>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="puck">DR<span class="hcp mono">21</span></div></td>
<td class="cell"><button class="cell-off" aria-label="Add Drew vs Evan">+</button></td>
</tr>
<tr>
<th class="rowhead"><span class="nm">Evan</span></th>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="cell-mirror" aria-hidden="true"></div></td>
<td><div class="puck">EV<span class="hcp mono">8</span></div></td>
</tr>
</tbody>
</table>
</div>
<div class="splits">
<div class="splits-head">
<strong>Team splits — best ball</strong>
<span>Runs alongside singles, same card</span>
</div>
<div class="split-row">
<div class="teams">Alex + Casey <em>vs</em> Blake + Drew
<small>Evan rotates in every 9 · both halves scored</small>
</div>
<div class="stake"><b class="mono">$5 · $5 · $10</b><small>F / B / TOT</small></div>
<button class="icon-btn" aria-label="Edit best ball split Alex and Casey versus Blake and Drew">Edit</button>
</div>
<div class="split-row">
<div class="teams">Alex + Blake <em>vs</em> Casey + Evan
<small>Front 9 only · Drew sits</small>
</div>
<div class="stake"><b class="mono">$5 · – · –</b><small>F / B / TOT</small></div>
<button class="icon-btn" aria-label="Edit front nine split">Edit</button>
</div>
<button class="add-split">+ Add a team split</button>
</div>
</div>
<aside class="card rail" aria-label="At stake summary">
<h3>At Stake</h3>
<p class="rail-sec">Singles Nassau ×3</p>
<div class="rail-row"><span class="who">Alex vs Blake<small>F $5 · B $5 · T $10</small></span><span class="amt mono">$20</span></div>
<div class="rail-row"><span class="who">Alex vs Drew<small>F $5 · B $5 · T $10</small></span><span class="amt mono">$20</span></div>
<div class="rail-row"><span class="who">Casey vs Evan<small>F $3 · B $3 · T $6</small></span><span class="amt mono">$12</span></div>
<p class="rail-sec">Best ball ×2</p>
<div class="rail-row"><span class="who">A+C vs B+D<small>F $5 · B $5 · T $10</small></span><span class="amt mono">$20</span></div>
<div class="rail-row"><span class="who">A+B vs C+E<small>Front 9 · $5</small></span><span class="amt mono">$5</span></div>
<div class="rail-total"><b>Total at stake</b><span class="amt mono">$77</span></div>
<div class="press-note"><b>Auto-press at 2 down</b> on every Nassau segment, capped at 2 presses per segment. Presses settle inside their segment.</div>
<div class="rail-actions">
<select class="fav-select" aria-label="Apply favorite match setup">
<option>Apply favorite: TourneyCard Saturday</option>
</select>
<button class="save-btn">Save matches</button>
</div>
</aside>
</div>
<p class="foot-note">Matrix cells are the only toggle surface — no modals to open a match. Stakes edit inline on the cell.</p>
</div>
</body>
</html>
Raw
241-b-nassau-tickets.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>241 B — Nassau Tickets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--course: #dcebe2;
--paper: #fffdf6;
--print: #21403f;
--print-soft: #4d6b66;
--teal: #3b6064;
--mint: #c9e4ca;
--mint-deep: #9fc9a8;
--stamp: #b8443a;
--line: #d8d4c4;
}
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,0.5), transparent 40%),
var(--course);
color: var(--print);
-webkit-font-smoothing: antialiased;
}
.cond { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.phone { width: 430px; margin: 0 auto; min-height: 100vh; padding: 18px 16px 96px; position: relative; }
/* ---------- header ---------- */
.topline {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--teal); margin-bottom: 10px;
}
h1 { font-size: 30px; font-weight: 800; letter-spacing: 0.01em; line-height: 1; text-transform: uppercase; color: var(--print); }
.sub { font-size: 12px; font-weight: 650; color: var(--print-soft); margin-top: 6px; }
.sub b { color: var(--print); }
/* ---------- ticket ---------- */
.ticket {
position: relative; margin-top: 18px;
background: var(--paper);
border: 1.5px solid var(--print);
border-radius: 6px;
box-shadow: 0 10px 22px rgba(33, 64, 63, 0.22);
overflow: hidden;
}
.ticket::before, .ticket::after {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 999px;
background: var(--course); border: 1.5px solid var(--print); bottom: 35px;
}
.ticket::before { left: -11px; }
.ticket::after { right: -11px; }
.tk-banner {
display: flex; justify-content: space-between; align-items: center;
background: var(--print); color: var(--paper); padding: 9px 14px;
}
.tk-banner .fmt { font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.tk-banner .no { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--mint); }
.tk-body { padding: 14px 16px 46px; }
.sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.side .nm { font-size: 16px; font-weight: 850; letter-spacing: -0.01em; }
.side .hcp { font-size: 11px; font-weight: 700; color: var(--print-soft); }
.side.right { text-align: right; }
.vs {
font-size: 11px; font-weight: 900; letter-spacing: 0.1em; color: var(--paper);
background: var(--stamp); border-radius: 999px; padding: 5px 8px; transform: rotate(-3deg);
}
/* tear strip: 18 holes */
.tear { margin-top: 14px; border-top: 1.5px dashed var(--line); padding-top: 10px; }
.holes { display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; }
.hole {
height: 26px; border: 1px solid var(--print);
display: grid; place-items: center;
font-size: 9.5px; font-weight: 800;
background: var(--mint);
}
.hole.back { background: var(--paper); }
.seg-labels { display: grid; grid-template-columns: 9fr 9fr; margin-top: 4px; }
.seg-labels span {
font-size: 9px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--print-soft); text-align: center;
}
.wagers {
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1.5px dashed var(--line); margin-top: 10px;
}
.wager { padding: 9px 6px 10px; text-align: center; border-right: 1.5px dashed var(--line); }
.wager:last-child { border-right: 0; }
.wager b { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--print-soft); }
.wager i { display: block; font-style: normal; font-size: 21px; font-weight: 800; color: var(--stamp); margin-top: 1px; }
.stamp {
position: absolute; right: 14px; bottom: 48px;
border: 2.5px solid var(--stamp); color: var(--stamp); border-radius: 8px;
transform: rotate(-8deg); padding: 5px 10px 6px; text-align: center;
opacity: 0.82; background: rgba(255, 253, 246, 0.4);
}
.stamp b { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1; }
.stamp i { display: block; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; }
.tk-foot {
display: flex; justify-content: space-between; align-items: center;
border-top: 1.5px solid var(--print); background: #f6f3e8;
padding: 9px 14px; margin-top: 14px;
}
.tk-foot .stake { font-size: 12px; font-weight: 800; }
.tk-foot .stake b { font-size: 15px; color: var(--stamp); }
.tk-foot .acts { display: flex; gap: 8px; }
.tk-foot button {
border: 1px solid var(--print); background: var(--paper); color: var(--print);
border-radius: 5px; font-size: 11.5px; font-weight: 800; padding: 5px 10px; cursor: pointer;
}
.tk-foot button.danger { color: var(--stamp); border-color: var(--stamp); }
/* ---------- add ticket ---------- */
.add-ticket {
width: 100%; margin-top: 18px; padding: 15px;
border: 2px dashed var(--teal); border-radius: 8px; background: rgba(255,253,246,0.55);
color: var(--teal); font-size: 15px; font-weight: 850; cursor: pointer; letter-spacing: 0.01em;
}
.add-hint { text-align: center; font-size: 11px; font-weight: 650; color: var(--print-soft); margin-top: 8px; }
/* ---------- save bar ---------- */
.save-bar {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; justify-content: space-between; align-items: center;
background: var(--print); color: var(--paper);
padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
}
.save-bar .sum { font-size: 13px; font-weight: 750; }
.save-bar .sum b { display: block; font-size: 17px; font-weight: 900; color: var(--mint); }
.save-bar button {
border: 0; border-radius: 8px; background: var(--mint); color: var(--print);
font-size: 14.5px; font-weight: 900; padding: 12px 26px; cursor: pointer;
}
</style>
</head>
<body>
<div class="phone">
<div class="topline"><span>TourneyCard · Sat 8:12a</span><span>Foursome · 4 up</span></div>
<h1 class="cond">Match Tickets</h1>
<p class="sub"><b>Alex 12 · Blake 9 · Drew 21 · Casey 15</b> — every ticket is one Nassau: front, back and total, all settling off the same card.</p>
<!-- Ticket 1: best ball -->
<article class="ticket" aria-label="Ticket 1, best ball Nassau">
<div class="tk-banner">
<span class="fmt cond">Best Ball Nassau</span>
<span class="no mono">TKT 01</span>
</div>
<div class="tk-body">
<div class="sides">
<div class="side">
<div class="nm">Alex <span class="hcp mono">12</span></div>
<div class="nm">Casey <span class="hcp mono">15</span></div>
</div>
<span class="vs cond">VS</span>
<div class="side right">
<div class="nm">Blake <span class="hcp mono">9</span></div>
<div class="nm">Drew <span class="hcp mono">21</span></div>
</div>
</div>
<div class="tear">
<div class="holes" aria-hidden="true">
<span class="hole mono">1</span><span class="hole mono">2</span><span class="hole mono">3</span><span class="hole mono">4</span><span class="hole mono">5</span><span class="hole mono">6</span><span class="hole mono">7</span><span class="hole mono">8</span><span class="hole mono">9</span>
<span class="hole back mono">10</span><span class="hole back mono">11</span><span class="hole back mono">12</span><span class="hole back mono">13</span><span class="hole back mono">14</span><span class="hole back mono">15</span><span class="hole back mono">16</span><span class="hole back mono">17</span><span class="hole back mono">18</span>
</div>
<div class="seg-labels" aria-hidden="true"><span>Front 9</span><span>Back 9</span></div>
<div class="wagers">
<div class="wager"><b>Front</b><i class="mono">$5</i></div>
<div class="wager"><b>Back</b><i class="mono">$5</i></div>
<div class="wager"><b>Total</b><i class="mono">$10</i></div>
</div>
</div>
<div class="stamp" aria-label="Auto-press at 2 down, maximum 2 per segment"><b class="cond">Auto-Press</b><i class="mono">2 DOWN · MAX 2</i></div>
</div>
<div class="tk-foot">
<span class="stake">At stake <b class="mono">$20</b></span>
<span class="acts"><button>Edit</button><button class="danger">Void</button></span>
</div>
</article>
<!-- Ticket 2: singles -->
<article class="ticket" aria-label="Ticket 2, singles Nassau, Alex versus Drew">
<div class="tk-banner">
<span class="fmt cond">Singles Nassau</span>
<span class="no mono">TKT 02</span>
</div>
<div class="tk-body">
<div class="sides">
<div class="side"><div class="nm">Alex <span class="hcp mono">12</span></div></div>
<span class="vs cond">VS</span>
<div class="side right"><div class="nm">Drew <span class="hcp mono">21</span></div></div>
</div>
<div class="tear">
<div class="holes" aria-hidden="true">
<span class="hole mono">1</span><span class="hole mono">2</span><span class="hole mono">3</span><span class="hole mono">4</span><span class="hole mono">5</span><span class="hole mono">6</span><span class="hole mono">7</span><span class="hole mono">8</span><span class="hole mono">9</span>
<span class="hole back mono">10</span><span class="hole back mono">11</span><span class="hole back mono">12</span><span class="hole back mono">13</span><span class="hole back mono">14</span><span class="hole back mono">15</span><span class="hole back mono">16</span><span class="hole back mono">17</span><span class="hole back mono">18</span>
</div>
<div class="seg-labels" aria-hidden="true"><span>Front 9</span><span>Back 9</span></div>
<div class="wagers">
<div class="wager"><b>Front</b><i class="mono">$5</i></div>
<div class="wager"><b>Back</b><i class="mono">$5</i></div>
<div class="wager"><b>Total</b><i class="mono">$10</i></div>
</div>
</div>
<div class="stamp" aria-label="Auto-press at 2 down, maximum 2 per segment"><b class="cond">Auto-Press</b><i class="mono">2 DOWN · MAX 2</i></div>
</div>
<div class="tk-foot">
<span class="stake">At stake <b class="mono">$20</b></span>
<span class="acts"><button>Edit</button><button class="danger">Void</button></span>
</div>
</article>
<!-- Ticket 3: singles -->
<article class="ticket" aria-label="Ticket 3, singles Nassau, Blake versus Casey">
<div class="tk-banner">
<span class="fmt cond">Singles Nassau</span>
<span class="no mono">TKT 03</span>
</div>
<div class="tk-body">
<div class="sides">
<div class="side"><div class="nm">Blake <span class="hcp mono">9</span></div></div>
<span class="vs cond">VS</span>
<div class="side right"><div class="nm">Casey <span class="hcp mono">15</span></div></div>
</div>
<div class="tear">
<div class="holes" aria-hidden="true">
<span class="hole mono">1</span><span class="hole mono">2</span><span class="hole mono">3</span><span class="hole mono">4</span><span class="hole mono">5</span><span class="hole mono">6</span><span class="hole mono">7</span><span class="hole mono">8</span><span class="hole mono">9</span>
<span class="hole back mono">10</span><span class="hole back mono">11</span><span class="hole back mono">12</span><span class="hole back mono">13</span><span class="hole back mono">14</span><span class="hole back mono">15</span><span class="hole back mono">16</span><span class="hole back mono">17</span><span class="hole back mono">18</span>
</div>
<div class="seg-labels" aria-hidden="true"><span>Front 9</span><span>Back 9</span></div>
<div class="wagers">
<div class="wager"><b>Front</b><i class="mono">$3</i></div>
<div class="wager"><b>Back</b><i class="mono">$3</i></div>
<div class="wager"><b>Total</b><i class="mono">$6</i></div>
</div>
</div>
<div class="stamp" aria-label="No auto-press"><b class="cond">No Press</b><i class="mono">MANUAL</i></div>
</div>
<div class="tk-foot">
<span class="stake">At stake <b class="mono">$12</b></span>
<span class="acts"><button>Edit</button><button class="danger">Void</button></span>
</div>
</article>
<button class="add-ticket cond">+ Add a ticket</button>
<p class="add-hint">Singles or best ball · any pairing · 3 to 5 players — odd golfer rotates or sits per ticket</p>
<div class="save-bar">
<span class="sum">3 tickets<b class="mono">$52 at stake</b></span>
<button>Save matches</button>
</div>
</div>
</body>
</html>
Raw
241-c-match-lanes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>241 C — Match Lanes Board</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Spectral:wght@500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--board: #16302e;
--board-edge: #0e2220;
--cream: #f2ead8;
--cream-dim: rgba(242, 234, 216, 0.62);
--gold: #c9a227;
--greg: #9fd3ae;
--tom: #c9a227;
--rick: #7fb2c9;
--pat: #d9836b;
--card: #1d3b38;
--card-line: rgba(242, 234, 216, 0.16);
}
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
background: #0c1a19;
color: var(--cream);
-webkit-font-smoothing: antialiased;
}
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.caps { text-transform: uppercase; letter-spacing: 0.14em; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.page { width: 1180px; margin: 0 auto; padding: 34px 30px 48px; }
.kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
h1.title { font-size: 23px; font-weight: 950; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--cream); }
.page-sub { font-size: 13px; color: var(--cream-dim); font-weight: 600; margin-bottom: 24px; max-width: 820px; line-height: 1.55; }
/* ---------- board ---------- */
.board {
position: relative;
background: var(--board);
border: 2px solid var(--board-edge);
border-radius: 14px;
box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(201,162,39,0.28), inset 0 0 90px rgba(0,0,0,0.35);
padding: 26px 30px 30px;
}
.board-head { text-align: center; padding-bottom: 16px; border-bottom: 1px solid rgba(242,234,216,0.25); position: relative; }
.board-head::after { content: ""; display: block; border-bottom: 1px solid rgba(242,234,216,0.12); margin-top: 3px; }
.club { font-family: Spectral, Georgia, serif; font-weight: 600; font-size: 24px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); }
.board-sub { margin-top: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.edit-btn {
position: absolute; right: 0; top: 4px;
border: 1px solid var(--gold); color: var(--gold); background: transparent;
border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
padding: 7px 12px; cursor: pointer;
}
.board-grid { display: grid; grid-template-columns: 800px 1fr; gap: 24px; margin-top: 22px; }
/* ---------- canvas with loom ---------- */
.canvas { position: relative; height: 560px; }
.loom { position: absolute; inset: 0; pointer-events: none; }
.loom path { fill: none; stroke-width: 2; opacity: 0.5; }
.pucks { position: absolute; top: 0; left: 0; right: 0; height: 96px; z-index: 2; }
.puck-slot { position: absolute; top: 0; width: 120px; margin-left: -60px; text-align: center; }
.puck-disc {
width: 54px; height: 54px; margin: 0 auto; border-radius: 999px;
background: var(--board-edge); border: 2.5px solid var(--pc);
display: grid; place-items: center;
font-size: 16px; font-weight: 950; color: var(--cream); letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.puck-slot .pname { margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--cream); }
.puck-slot .phcp { font-size: 10px; font-weight: 700; color: var(--cream-dim); }
.lane-label {
position: absolute; z-index: 2; top: 158px;
font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.mcard {
position: absolute; z-index: 2; top: 182px;
background: var(--card);
border: 1px solid var(--card-line);
border-radius: 10px;
box-shadow: 0 12px 26px rgba(0,0,0,0.35);
padding: 13px 15px 14px;
}
.mcard .fmt { font-size: 9.5px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); }
.mcard .tee { float: right; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--board); background: var(--gold); border-radius: 4px; padding: 2.5px 6px; text-transform: uppercase; }
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 10px; }
.pl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--cream); }
.pl.right { justify-content: flex-end; }
.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--pc); flex: none; }
.pl .h { font-size: 10px; font-weight: 700; color: var(--cream-dim); }
.mvs { font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; color: var(--gold); }
.ribbon { margin-top: 13px; }
.dots18 { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; }
.dots18 i { height: 5px; border-radius: 2px; background: rgba(242,234,216,0.22); }
.dots18 i.f { background: rgba(159,211,174,0.75); }
.dots18 i.b { background: rgba(127,178,201,0.7); }
.brackets { display: grid; grid-template-columns: 9fr 9fr; gap: 3px; margin-top: 5px; }
.brk { border: 1px solid rgba(201,162,39,0.55); border-top: 0; height: 8px; position: relative; }
.brk span { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; }
.brk-total { margin-top: 22px; border: 1px solid rgba(201,162,39,0.55); border-top: 0; height: 8px; position: relative; }
.brk-total span { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; }
.mstake { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; margin-top: 30px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.mstake .press { font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); border: 1px solid var(--card-line); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }
.mstake .amt { font-size: 15px; font-weight: 900; color: var(--gold); white-space: nowrap; margin-left: auto; }
.mstake .amt small { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--cream-dim); margin-right: 5px; text-transform: uppercase; }
/* skins strip */
.strip {
position: absolute; z-index: 2; top: 460px; left: 0; right: 0;
display: flex; align-items: center; gap: 12px;
border: 1px dashed rgba(242,234,216,0.3); border-radius: 10px;
padding: 11px 15px; background: rgba(29,59,56,0.55);
}
.strip .lab { font-size: 9.5px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); }
.strip .what { font-size: 12.5px; font-weight: 800; color: var(--cream); }
.strip .what b { color: var(--gold); }
.strip .dots { display: flex; gap: 5px; margin-left: auto; }
.legend { position: absolute; z-index: 2; top: 522px; left: 0; right: 0; display: flex; gap: 18px; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--cream-dim); }
.legend .li { display: flex; align-items: center; gap: 6px; }
/* ---------- settlement rail ---------- */
.rail { background: rgba(14,34,32,0.6); border: 1px solid var(--card-line); border-radius: 10px; padding: 18px; }
.rail h3 { font-size: 10.5px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--card-line); }
.set-row .who { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; font-weight: 800; color: var(--cream); }
.set-row .who .dot { width: 8px; height: 8px; }
.set-row .who .x { color: var(--cream-dim); font-weight: 700; padding: 0 2px; }
.set-row .seg { grid-column: 1; display: flex; gap: 10px; margin-top: 5px; font-size: 10px; font-weight: 700; color: var(--cream-dim); }
.set-row .seg b { color: var(--cream); font-weight: 800; }
.set-row .tot { grid-column: 2; grid-row: 1; align-self: center; font-size: 13px; font-weight: 900; color: var(--gold); }
.board-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 13px; border-top: 2px solid var(--gold); }
.board-total b { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); }
.board-total .amt { font-size: 24px; font-weight: 950; color: var(--gold); }
.rail-note { margin-top: 14px; font-size: 10.5px; line-height: 1.55; color: var(--cream-dim); font-weight: 600; }
</style>
</head>
<body>
<div class="page">
<p class="kicker">Design C · Issue 241 · Foursome match setup</p>
<h1 class="title">Match Lanes Board</h1>
<p class="page-sub">The group's matches wired on one clubhouse board: each player gets a color, and colored lines run from the player into every match they're staked in — best ball and singles Nassaus at a glance. Odd golfer in a 3 or 5 group simply has fewer wires.</p>
<div class="board">
<div class="board-head">
<div class="club">TourneyCard Club</div>
<div class="board-sub">Foursome Matches · Saturday 8:12 AM · 18 Holes</div>
<button class="edit-btn">Edit matches</button>
</div>
<div class="board-grid">
<div class="canvas">
<!-- wiring loom: player color → each match they're in -->
<svg class="loom" width="800" height="560" viewBox="0 0 800 560" aria-hidden="true">
<!-- Alex #9fd3ae → BB(x=60), S1(x=340) -->
<path d="M100 104 C100 140, 60 145, 60 182" stroke="#9fd3ae"/>
<path d="M100 104 C100 150, 340 130, 340 182" stroke="#9fd3ae"/>
<!-- Blake #c9a227 → BB(x=130), S2(x=600) -->
<path d="M300 104 C300 140, 130 145, 130 182" stroke="#c9a227"/>
<path d="M300 104 C300 155, 600 125, 600 182" stroke="#c9a227"/>
<!-- Drew #7fb2c9 → BB(x=200), S1(x=480) -->
<path d="M500 104 C500 140, 200 145, 200 182" stroke="#7fb2c9"/>
<path d="M500 104 C500 150, 480 145, 480 182" stroke="#7fb2c9"/>
<!-- Casey #d9836b → BB(x=250), S2(x=740) -->
<path d="M700 104 C700 140, 250 150, 250 182" stroke="#d9836b"/>
<path d="M700 104 C700 150, 740 145, 740 182" stroke="#d9836b"/>
</svg>
<div class="pucks" aria-label="The foursome">
<div class="puck-slot" style="left:100px; --pc:#9fd3ae">
<div class="puck-disc">AL</div>
<div class="pname">Alex <span class="phcp mono">· 12</span></div>
</div>
<div class="puck-slot" style="left:300px; --pc:#c9a227">
<div class="puck-disc">BL</div>
<div class="pname">Blake <span class="phcp mono">· 9</span></div>
</div>
<div class="puck-slot" style="left:500px; --pc:#7fb2c9">
<div class="puck-disc">DR</div>
<div class="pname">Drew <span class="phcp mono">· 21</span></div>
</div>
<div class="puck-slot" style="left:700px; --pc:#d9836b">
<div class="puck-disc">CA</div>
<div class="pname">Casey <span class="phcp mono">· 15</span></div>
</div>
</div>
<div class="lane-label" style="left:8px">Best Ball · Nassau</div>
<div class="lane-label" style="left:290px">Singles · Nassau</div>
<!-- Best ball card -->
<article class="mcard" style="left:8px; width:262px" aria-label="Best ball Nassau, Alex and Casey versus Blake and Drew">
<span class="tee">Tee 8:12a</span>
<div class="fmt">Best Ball · 2 v 2</div>
<div class="matchup">
<div>
<div class="pl" style="--pc:#9fd3ae"><span class="dot"></span>Alex <span class="h mono">12</span></div>
<div class="pl" style="--pc:#d9836b; margin-top:4px"><span class="dot"></span>Casey <span class="h mono">15</span></div>
</div>
<span class="mvs">VS</span>
<div>
<div class="pl right" style="--pc:#c9a227"><span class="h mono">9</span> Blake<span class="dot"></span></div>
<div class="pl right" style="--pc:#7fb2c9; margin-top:4px"><span class="h mono">21</span> Drew<span class="dot"></span></div>
</div>
</div>
<div class="ribbon" aria-label="Front nine, back nine and total wagers">
<div class="dots18">
<i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i>
<i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i>
</div>
<div class="brackets">
<div class="brk"><span class="mono">FRONT $5</span></div>
<div class="brk"><span class="mono">BACK $5</span></div>
</div>
<div class="brk-total"><span class="mono">TOTAL 18 · $10</span></div>
</div>
<div class="mstake"><span class="press">Auto-press · 2 down · max 2</span><span class="amt mono"><small>at stake</small>$20</span></div>
</article>
<!-- Singles card 1 -->
<article class="mcard" style="left:290px; width:246px" aria-label="Singles Nassau, Alex versus Drew">
<span class="tee">Tee 8:12a</span>
<div class="fmt">Singles</div>
<div class="matchup">
<div class="pl" style="--pc:#9fd3ae"><span class="dot"></span>Alex <span class="h mono">12</span></div>
<span class="mvs">VS</span>
<div class="pl right" style="--pc:#7fb2c9"><span class="h mono">21</span> Drew<span class="dot"></span></div>
</div>
<div class="ribbon" aria-label="Front nine, back nine and total wagers">
<div class="dots18">
<i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i>
<i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i>
</div>
<div class="brackets">
<div class="brk"><span class="mono">FRONT $5</span></div>
<div class="brk"><span class="mono">BACK $5</span></div>
</div>
<div class="brk-total"><span class="mono">TOTAL 18 · $10</span></div>
</div>
<div class="mstake"><span class="press">Auto-press · 2 down · max 2</span><span class="amt mono"><small>at stake</small>$20</span></div>
</article>
<!-- Singles card 2 -->
<article class="mcard" style="left:552px; width:246px" aria-label="Singles Nassau, Blake versus Casey">
<span class="tee">Tee 8:12a</span>
<div class="fmt">Singles</div>
<div class="matchup">
<div class="pl" style="--pc:#c9a227"><span class="dot"></span>Blake <span class="h mono">9</span></div>
<span class="mvs">VS</span>
<div class="pl right" style="--pc:#d9836b"><span class="h mono">15</span> Casey<span class="dot"></span></div>
</div>
<div class="ribbon" aria-label="Front nine, back nine and total wagers">
<div class="dots18">
<i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i><i class="f"></i>
<i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i>
</div>
<div class="brackets">
<div class="brk"><span class="mono">FRONT $3</span></div>
<div class="brk"><span class="mono">BACK $3</span></div>
</div>
<div class="brk-total"><span class="mono">TOTAL 18 · $6</span></div>
</div>
<div class="mstake"><span class="press">No press</span><span class="amt mono"><small>at stake</small>$12</span></div>
</article>
<div class="strip">
<span class="lab">Group game</span>
<span class="what">Skins · <b class="mono">$2</b> · carryover — plays alongside every match</span>
<span class="dots" aria-hidden="true">
<span class="dot" style="--pc:#9fd3ae"></span><span class="dot" style="--pc:#c9a227"></span><span class="dot" style="--pc:#7fb2c9"></span><span class="dot" style="--pc:#d9836b"></span>
</span>
</div>
<div class="legend" aria-label="Legend">
<span class="li"><span class="dot" style="--pc:#9fd3ae"></span>Alex</span>
<span class="li"><span class="dot" style="--pc:#c9a227"></span>Blake</span>
<span class="li"><span class="dot" style="--pc:#7fb2c9"></span>Drew</span>
<span class="li"><span class="dot" style="--pc:#d9836b"></span>Casey</span>
<span class="li">— a wire runs to every match that player is staked in</span>
</div>
</div>
<!-- settlement rail -->
<aside class="rail" aria-label="Settlement preview">
<h3>Settlement</h3>
<div class="set-row">
<span class="tot mono">$20</span>
<div class="who"><span class="dot" style="--pc:#9fd3ae"></span>Alex<span class="dot" style="--pc:#d9836b"></span>Casey <span class="x">vs</span> <span class="dot" style="--pc:#c9a227"></span>Blake<span class="dot" style="--pc:#7fb2c9"></span>Drew</div>
<div class="seg mono"><span>F <b>$5</b></span><span>B <b>$5</b></span><span>T <b>$10</b></span></div>
</div>
<div class="set-row">
<span class="tot mono">$20</span>
<div class="who"><span class="dot" style="--pc:#9fd3ae"></span>Alex <span class="x">vs</span> <span class="dot" style="--pc:#7fb2c9"></span>Drew</div>
<div class="seg mono"><span>F <b>$5</b></span><span>B <b>$5</b></span><span>T <b>$10</b></span></div>
</div>
<div class="set-row">
<span class="tot mono">$12</span>
<div class="who"><span class="dot" style="--pc:#c9a227"></span>Blake <span class="x">vs</span> <span class="dot" style="--pc:#d9836b"></span>Casey</div>
<div class="seg mono"><span>F <b>$3</b></span><span>B <b>$3</b></span><span>T <b>$6</b></span></div>
</div>
<div class="set-row">
<span class="tot mono">$36</span>
<div class="who">Skins · all four</div>
<div class="seg mono"><span>18 × <b>$2</b> · carryover</span></div>
</div>
<div class="board-total"><b>Board total</b><span class="amt mono">$88</span></div>
<p class="rail-note">Every match settles off the same 18-hole card. With 3 or 5 players, wires show exactly who is staked where — a sit-out or a 2-v-3 split reads at a glance.</p>
</aside>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment