/* The front page as the game's own menu screens, scrolled: a 16-bit chess and card game. Baize green and deep burgundy
   fields with a felt dither, brass frames, card red, ivory only where there is a card or a piece. Pixel type, hard
   edges, stepped corners, flat colour steps. */
:root {
  --felt: #1f6b45; --felt-d: #185a3a; --felt-dk: #123f29; --felt-bk: #0b2a1b; --felt-hi: #2c8a5b;
  --burg: #5a1524; --burg-d: #4a0f1c; --burg-dk: #33090f; --burg-hi: #7a2233;
  --ivory: #f1e6c8; --ivory-d: #cfc19b; --red: #d2342b; --red-d: #8f1f1a; --brass: #d8a53a; --brass-d: #9a6f1c; --brass-hi: #f4d06a;
  --ink: #0a140e; --text: #dff0dc; --text-b: #f3d9d4; --dim: #9cc4a6; --dim-b: #d9a9a6;
  --head: 'Press Start 2P', 'Tiny5', monospace; --body: 'Jersey 15', 'Tiny5', monospace; --pix: 'Tiny5', monospace;
  /* the DOM board and table (shared with the floor) */
  --ivory2: #f1e6c8; --baize2: #185a3a; --num: #d8a53a; --teal: #4dd5cc; --up: #8be0a4; --muted2: #9cc4a6; --mono: 'Jersey 15', monospace; --sans: 'Jersey 15', monospace;
  --t-felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%231f6b45'/%3E%3Crect width='1' height='1' fill='%23185a3a'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23185a3a'/%3E%3C/svg%3E");
  --t-feltdk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23123f29'/%3E%3Crect width='1' height='1' fill='%230e3421'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%230e3421'/%3E%3C/svg%3E");
  --t-burg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%235a1524'/%3E%3Crect width='1' height='1' fill='%234a0f1c'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%234a0f1c'/%3E%3C/svg%3E");
  --t-burgdk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%2333090f'/%3E%3Crect width='1' height='1' fill='%232a060b'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%232a060b'/%3E%3C/svg%3E");
  --t-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23123f29'/%3E%3Crect width='1' height='1' fill='%232c8a5b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232c8a5b'/%3E%3C/svg%3E");
  --t-checkb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%2333090f'/%3E%3Crect width='1' height='1' fill='%237a2233'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%237a2233'/%3E%3C/svg%3E");
  --t-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23d2342b'/%3E%3Crect width='1' height='1' fill='%238f1f1a'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%238f1f1a'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e8685f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23e8685f'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--felt) var(--t-felt) 0 0 / 8px 8px; color: var(--text); font: 400 22px/1.28 var(--body); overflow-x: hidden; }
a { color: inherit; }
img, canvas { image-rendering: pixelated; }
[hidden] { display: none !important; }
code, pre { font-family: var(--body); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; margin: 0; }

/* ---------- the pixel frame: a 4px border, a dark outline with the corner pixels cut away, a flat drop below ---------- */
.win, .slate, .pool, .ledgerpage, .sample, .slip, .member, .results, .rcard, .move, .form {
  border: 4px solid var(--brass); box-shadow: 0 -4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 12px 0 0 var(--ink), -4px 8px 0 0 var(--ink), 4px 8px 0 0 var(--ink); }
.suit { display: inline-block; width: 14px; height: 14px; background: center / contain no-repeat; vertical-align: -1px; }
.suit.s { background-image: var(--s-spade); } .suit.h { background-image: var(--s-heart); } .suit.d { background-image: var(--s-diamond); } .suit.c { background-image: var(--s-club); }

/* buttons: chunky, with a pressed state */
.plate, .inkbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 400 14px/1.2 var(--head); text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 15px 18px 13px; border: 0; position: relative; top: 0;
  color: var(--ink); background: var(--brass); box-shadow: inset 0 4px 0 0 var(--brass-hi), inset 0 -4px 0 0 var(--brass-d), 0 -4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 10px 0 0 var(--ink), -4px 6px 0 0 var(--ink), 4px 6px 0 0 var(--ink); }
.plate:hover { background: var(--brass-hi); }
.plate:active, .inkbtn:active { top: 6px; box-shadow: inset 0 4px 0 0 var(--brass-d), inset 0 -4px 0 0 var(--brass-d), 0 -4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink); }
.plate.big { font-size: 16px; padding: 19px 24px 17px; }
.inkbtn { color: var(--ivory); background: var(--burg); box-shadow: inset 0 4px 0 0 var(--burg-hi), inset 0 -4px 0 0 var(--burg-dk), 0 -4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), 0 10px 0 0 var(--ink), -4px 6px 0 0 var(--ink), 4px 6px 0 0 var(--ink); }
.inkbtn:hover { background: var(--burg-hi); }
.inkbtn:active { box-shadow: inset 0 4px 0 0 var(--burg-dk), inset 0 -4px 0 0 var(--burg-dk), 0 -4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink); }
.textlink { color: var(--brass-hi); }

/* section headers: a banner with a checker tail */
.brassplate, .chalkhead, .slip h2 { display: flex; align-items: center; gap: 14px; font: 400 clamp(17px, 2.5vw, 26px)/1.25 var(--head); text-transform: uppercase; color: var(--brass-hi); text-shadow: 4px 4px 0 var(--ink); margin: 0; }
.brassplate::before, .chalkhead::before { content: ''; flex: none; width: 32px; height: 32px; background: var(--t-check) 0 0 / 16px 16px; border: 4px solid var(--ink); }
.brassplate::after, .chalkhead::after { content: ''; flex: 1; min-width: 24px; height: 8px; background: var(--t-check) 0 0 / 8px 8px; }
.purse .brassplate::before, .purse .brassplate::after { background-image: var(--t-checkb); }
.band { height: 32px; background: var(--t-check) 0 0 / 32px 32px; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.band.b { background-image: var(--t-checkb); }

/* ---------- hero: the live club, with the game's title window on it ---------- */
.hero { position: relative; height: 100svh; min-height: 660px; overflow: hidden; background: var(--felt-bk); }
.hero-world { position: absolute; inset: 0; }
.hero-world canvas { position: absolute; inset: 0; pointer-events: none; }
.win { background: var(--felt-dk) var(--t-feltdk) 0 0 / 8px 8px; }
.win-bar { display: flex; align-items: center; gap: 10px; background: var(--burg); color: var(--brass-hi); font: 400 11px/1 var(--head); text-transform: uppercase; padding: 10px 12px 9px; border-bottom: 4px solid var(--brass); }
.win-bar .sp { flex: 1; }
.fixture { position: absolute; left: clamp(18px, 4vw, 60px); bottom: 62px; width: min(640px, calc(100% - 36px)); }
.fixture .win-body { padding: 20px 22px 16px; }
.title { display: flex; align-items: center; gap: 18px; }
.brand-mark { flex: none; width: 132px; height: 132px; display: block; }
.logotype { font: 400 clamp(26px, 3.3vw, 40px)/1.15 var(--head); color: var(--brass-hi); text-transform: uppercase; text-shadow: 4px 4px 0 var(--burg), 8px 8px 0 var(--ink); letter-spacing: 0; }
.title .tag { margin: 14px 0 0; font: 400 10px/1.5 var(--head); color: var(--dim); text-transform: uppercase; }
.lede { margin: 16px 0 0; font-size: 26px; line-height: 1.15; color: var(--ivory); }
.what { margin: 8px 0 0; font-size: 21px; line-height: 1.2; color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin: 20px 4px 24px; }
.stubs { display: flex; flex-wrap: wrap; gap: 10px 14px; border-top: 4px solid var(--felt-d); padding-top: 12px; }
.stub { display: inline-flex; align-items: center; gap: 9px; background: var(--felt-bk); border: 4px solid var(--felt-d); padding: 5px 10px 4px; font: 400 20px/1 var(--body); color: var(--text); text-decoration: none; cursor: pointer; }
.stub:hover { border-color: var(--brass); }
.stub svg { width: 16px; height: 16px; }
.stub b { font: 400 10px/1 var(--head); color: #ff8a80; }
.stub i { font: 400 9px/1 var(--head); font-style: normal; text-transform: uppercase; color: var(--brass); }
.stub.done i { color: var(--up); }
.token { margin: 12px 0 0; font: 400 9px/1.6 var(--head); text-transform: uppercase; color: var(--dim); }
.tally { position: absolute; right: clamp(18px, 4vw, 60px); bottom: 62px; width: 300px; background: var(--burg-dk) var(--t-burgdk) 0 0 / 8px 8px; padding: 0 0 8px; }
.tally h2 { background: var(--burg); color: var(--brass-hi); font: 400 11px/1 var(--head); text-transform: uppercase; padding: 10px 12px 9px; border-bottom: 4px solid var(--brass); }
.tally dl { margin: 6px 12px 0; }
.tally dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0 2px; border-bottom: 2px solid var(--burg); }
.tally dt { font-size: 20px; color: var(--dim-b); }
.tally dd { margin: 0; font: 400 11px/1.6 var(--head); color: var(--ivory); min-height: 18px; text-transform: uppercase; }
.tally dd.gold { color: var(--brass-hi); }
.tally .last { margin: 7px 12px 0; font-size: 19px; line-height: 1.15; color: var(--dim-b); min-height: 22px; }
.tally .last a { color: var(--ivory); text-decoration: none; } .tally .last u { text-decoration: none; color: var(--brass-hi); }
.down { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--ink); color: var(--brass-hi); font: 400 10px/1 var(--head); text-transform: uppercase; text-decoration: none; padding: 11px 16px 9px; border: 4px solid var(--brass); border-bottom: 0; white-space: nowrap; }

/* ---------- the night, as a move list ---------- */
.night { padding: 56px 20px 84px; }
.sheet { max-width: 1180px; margin: 0 auto; }
.sheet-head h2 { font: 400 clamp(18px, 3vw, 30px)/1.3 var(--head); color: var(--brass-hi); text-transform: uppercase; text-shadow: 4px 4px 0 var(--ink); margin: 0 0 22px; }
.sheet-head h2 em { font-style: normal; color: var(--ivory); }
.form { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 26px; margin: 0 4px 48px; padding: 10px 16px 8px; background: var(--felt-bk); }
.form div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.form dt { font: 400 9px/1.4 var(--head); text-transform: uppercase; color: var(--brass); flex: none; }
.form dd { margin: 0; font-size: 21px; color: var(--ivory); min-width: 0; }
.move { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 0 22px; margin: 0 4px 48px; padding: 0 18px 18px; background: var(--felt-dk) var(--t-feltdk) 0 0 / 8px 8px; align-items: start; }
.move:nth-of-type(odd) { margin-right: 44px; }
.move:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); background: var(--burg-dk) var(--t-burgdk) 0 0 / 8px 8px; margin-left: 44px; }
.move .no { grid-column: 1 / -1; margin: 0 -18px 18px; padding: 11px 14px 9px; background: var(--burg); border-bottom: 4px solid var(--brass); font: 400 12px/1 var(--head); text-transform: uppercase; color: var(--brass-hi); display: flex; align-items: center; gap: 10px; }
.move:nth-of-type(even) .no { background: var(--felt); }
.move .no::before { content: ''; width: 14px; height: 14px; background: var(--s-spade) center / contain no-repeat; }
.move:nth-of-type(4n+2) .no::before { background-image: var(--s-heart); } .move:nth-of-type(4n+3) .no::before { background-image: var(--s-club); } .move:nth-of-type(4n) .no::before { background-image: var(--s-diamond); }
.move .no::after { content: ''; flex: 1; height: 8px; background: var(--t-checkb) 0 0 / 8px 8px; }
.move:nth-of-type(even) .no::after { background-image: var(--t-check); }
.move:nth-of-type(even) figure { order: 3; }
figure { margin: 0; }
.move figure canvas { display: block; width: calc(100% - 16px); margin: 8px; background: #16110d; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--brass-d); }
.move figcaption { margin: 14px 4px 0; font-size: 19px; line-height: 1.15; color: var(--dim); }
.move:nth-of-type(even) figcaption { color: var(--dim-b); }
.notes h3 { font: 400 clamp(13px, 1.45vw, 17px)/1.45 var(--head); text-transform: uppercase; color: var(--ivory); margin: 2px 0 14px; }
.notes p { position: relative; margin: 0; padding: 7px 0 7px 98px; border-top: 2px solid var(--felt-d); font-size: 21px; line-height: 1.2; }
.move:nth-of-type(even) .notes p { border-top-color: var(--burg); color: var(--text-b); }
.notes p i { position: absolute; left: 0; top: 9px; font: 400 8px/1.5 var(--head); font-style: normal; text-transform: uppercase; color: var(--ink); background: var(--brass); padding: 3px 5px 1px; max-width: 88px; }
.notes p.lim, .move:nth-of-type(even) .notes p.lim { background: var(--ink); margin: 6px 0 0; padding: 9px 10px 9px 98px; border-top: 0; border-left: 4px solid var(--red); font-size: 20px; color: var(--text); }
.notes p.lim i { left: 8px; top: 11px; background: var(--red); color: var(--ivory); }
[data-n] { color: var(--brass-hi); }
.notes code { color: var(--brass-hi); background: var(--ink); padding: 0 5px; }

/* ---------- the purse ---------- */
.purse, .enter { background: var(--burg) var(--t-burg) 0 0 / 8px 8px; color: var(--text-b); padding: 60px 0 84px; }
.purse-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 34px; align-items: start; margin-top: 36px; }
.prose p { margin: 0 0 14px; line-height: 1.2; }
.prose p.big { font-size: 26px; line-height: 1.18; color: var(--ivory); }
.prose b { font-weight: 400; color: var(--brass-hi); }
.backs { display: flex; gap: 14px; margin: 26px 8px 0; }
.backs i { width: 52px; height: 72px; background: var(--t-back) 0 0 / 8px 8px; border: 4px solid var(--ivory); box-shadow: 0 0 0 4px var(--ink); }
.backs i:nth-child(2) { margin-top: 10px; } .backs i:nth-child(4) { margin-top: 6px; } .backs i:nth-child(5) { margin-top: 16px; }
.pools { display: grid; gap: 40px; padding: 4px; }
.pool { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--felt-dk) var(--t-feltdk) 0 0 / 8px 8px; color: var(--text); }
.pool caption { caption-side: top; text-align: left; font: 400 11px/1.5 var(--head); text-transform: uppercase; color: var(--ivory); padding: 0 0 12px; }
.pool caption b { font-weight: 400; color: var(--brass-hi); }
.pool td { padding: 9px 12px 7px; border-bottom: 2px solid var(--felt-d); font-size: 20px; }
.pool tr:last-child td { border-bottom: 0; }
.pool td:first-child { font: 400 12px/1.5 var(--head); color: var(--brass-hi); text-transform: uppercase; width: 70px; }
.pool tr:nth-child(2) td:first-child { color: var(--ivory-d); } .pool tr:nth-child(3) td:first-child { color: #e0935f; }
.pool td:nth-child(2) { color: var(--dim); }
.pool td:last-child { text-align: right; font: 400 11px/1.5 var(--head); color: var(--ivory); white-space: nowrap; }
.ledgerpage { background: var(--burg-dk) var(--t-burgdk) 0 0 / 8px 8px; padding: 0 14px 10px; margin: 4px; }
.ledgerpage h3, .results h3, .member h3 { margin: 0 -14px 6px; padding: 10px 12px 9px; background: var(--felt); border-bottom: 4px solid var(--brass); font: 400 11px/1.3 var(--head); text-transform: uppercase; color: var(--brass-hi); }
.terms .line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0 5px; border-bottom: 2px solid var(--burg); font-size: 20px; line-height: 1.15; }
.terms .line:last-child { border-bottom: 0; }
.terms .line span { font: 400 8px/2 var(--head); text-transform: uppercase; color: var(--brass); flex: none; }
.terms .line b { font-weight: 400; text-align: right; color: var(--ivory); }

/* ---------- house rules: six pixel cards on the felt ---------- */
.rules, .boardsec { padding: 60px 0 84px; }
.dealt { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 18px; margin: 44px 4px 0; align-items: start; }
.rcard { position: relative; background: var(--ivory); color: #2a2419; border-color: var(--ivory-d); padding: 46px 12px 40px; min-height: 310px; }
.rcard:nth-child(2), .rcard:nth-child(5) { margin-top: 20px; } .rcard:nth-child(3) { margin-top: -8px; } .rcard:nth-child(6) { margin-top: 12px; }
.rcard .ix { position: absolute; left: 8px; top: 8px; display: grid; justify-items: center; gap: 4px; font: 400 14px/1 var(--head); color: #1b1a16; }
.rcard .ix.b { left: auto; top: auto; right: 8px; bottom: 8px; transform: rotate(180deg); }
.rcard .ix svg { display: none; }
.rcard .ix::after { content: ''; width: 14px; height: 14px; background: var(--s-spade-k) center / contain no-repeat; }
.rcard:nth-child(3) .ix::after { background-image: var(--s-club-k); }
.rcard.red .ix { color: var(--red); }
.rcard.red .ix::after { background-image: var(--s-heart); } .rcard.red:nth-child(4) .ix::after { background-image: var(--s-diamond); }
.rcard h3 { font: 400 12px/1.4 var(--head); text-transform: uppercase; margin: 0 0 8px; color: var(--burg); }
.rcard p { margin: 0; font-size: 19.5px; line-height: 1.12; }
.rcard code { display: block; margin-top: 10px; font-size: 17px; line-height: 1.05; color: var(--felt-d); overflow-wrap: anywhere; }
.samples { display: grid; grid-template-columns: 1fr 1.08fr; gap: 36px; margin: 66px 4px 0; align-items: start; }
.sample { background: var(--felt-dk) var(--t-feltdk) 0 0 / 8px 8px; padding: 0 14px 12px; }
.sample h3 { margin: 0 -14px 14px; padding: 10px 12px 9px; background: var(--burg); border-bottom: 4px solid var(--brass); font: 400 11px/1.6 var(--head); text-transform: uppercase; color: var(--brass-hi); }
.sample h3 > span { display: block; font: 400 19px/1.1 var(--body); text-transform: none; color: var(--text-b); }
.sample-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 16px; align-items: start; }
.sample .score { list-style: none; margin: 0; padding: 6px 10px; background: var(--ink); color: var(--text); display: grid; grid-template-columns: 50px 1fr 1fr; font-size: 21px; line-height: 1.3; align-content: start; }
.sample .score li { display: contents; }
.sample .score li > * { border-bottom: 2px solid var(--felt-dk); }
.sample .score i { font-style: normal; color: var(--dim); }
.sample .score .hd { font: 400 8px/2.4 var(--head); text-transform: uppercase; color: var(--brass); border-bottom-color: var(--brass-d); }
.sample .handlog { background: var(--ink); color: var(--text); padding: 6px 10px; font-size: 19.5px; line-height: 1.15; }
.sample .handlog .st { font: 400 8px/2.2 var(--head); text-transform: uppercase; color: var(--brass); border-bottom: 2px solid var(--felt-dk); margin-top: 3px; }
.sample .handlog b { font-weight: 400; color: var(--brass-hi); }
.sample-foot { margin: 12px 0 0; font-size: 19px; line-height: 1.15; color: var(--dim); }
.sample-foot a { color: var(--brass-hi); }

/* ---------- send your agent ---------- */
.enter-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 40px; align-items: start; }
.slip, .member { background: var(--burg-dk) var(--t-burgdk) 0 0 / 8px 8px; padding: 22px; margin: 4px; }
.member { margin-top: 64px; padding: 0 14px 20px; }
.slip h2 { font-size: clamp(16px, 2.4vw, 24px); margin-bottom: 10px; }
.sub { margin: 0 0 14px; color: var(--dim-b); line-height: 1.15; }
pre.prompt { white-space: pre-wrap; word-break: break-word; margin: 0 0 22px; font: 400 20px/1.2 var(--body); color: var(--up); background: var(--ink); border: 4px solid var(--felt); padding: 12px 14px; }
pre.prompt::before { content: '> '; color: var(--brass-hi); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 0 4px 10px; }
.slip h3 { margin: 26px 0 8px; font: 400 11px/1.4 var(--head); text-transform: uppercase; color: var(--brass-hi); }
.calls { margin: 0; padding: 0; list-style: none; counter-reset: c; border-top: 4px solid var(--burg); }
.calls li { counter-increment: c; display: grid; grid-template-columns: 30px minmax(0, 270px) minmax(0, 1fr); gap: 2px 12px; padding: 8px 0 6px; border-bottom: 2px solid var(--burg); font-size: 20px; line-height: 1.15; align-items: baseline; }
.calls li::before { content: counter(c); font: 400 10px/1 var(--head); color: var(--ink); background: var(--brass); padding: 5px 0 3px; text-align: center; }
.calls code { color: var(--ivory); overflow-wrap: anywhere; }
.calls span { color: var(--dim-b); } .calls span code { color: var(--brass-hi); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font: 400 8px/1.4 var(--head); text-transform: uppercase; color: var(--brass); }
.field input { font: 400 21px var(--body); color: var(--ivory); background: var(--ink); border: 4px solid var(--burg-hi); padding: 8px 10px 6px; min-width: 0; width: 100%; }
.field input::placeholder { color: #a98888; }
.field input:focus { outline: 0; border-color: var(--brass-hi); }
.err { color: #ff9a8f; }
.cap { margin: 20px 0 8px; font: 400 9px/1.5 var(--head); text-transform: uppercase; color: var(--up); }

/* ---------- the honours board: a high-score table ---------- */
.ladders { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 38px 4px 0; align-items: start; }
.slate.ladder { background: var(--ink); padding: 0 14px 12px; }
.ladder:nth-child(2) { margin-top: 30px; }
.ladder h3 { margin: 0 -14px 4px; padding: 11px 12px 9px; background: var(--burg); border-bottom: 4px solid var(--brass); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 400 13px/1.3 var(--head); text-transform: uppercase; color: var(--brass-hi); }
.ladder h3 span { font: 400 19px/1 var(--body); text-transform: none; color: var(--text-b); }
.ladder ol { list-style: none; margin: 0; padding: 0; }
.ladder ol::before { content: 'RANK  NAME'; white-space: pre; display: block; font: 400 8px/2.6 var(--head); color: var(--dim); border-bottom: 2px solid var(--felt-dk); }
.ladder li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 9px 0 5px; border-bottom: 2px solid var(--felt-dk); font: 400 12px/1.5 var(--head); text-transform: uppercase; color: var(--text); }
.ladder li:nth-child(1) { color: var(--brass-hi); } .ladder li:nth-child(2) { color: var(--ivory); } .ladder li:nth-child(3) { color: #f0958c; } .ladder li:nth-child(4) { color: #8be0a4; } .ladder li:nth-child(5) { color: #9ad0ea; }
.ladder li > i { font-style: normal; }
.ladder li a { color: inherit; text-decoration: none; overflow-wrap: anywhere; } .ladder li a:hover { text-decoration: underline; }
.ladder li small { display: block; font: 400 18px/1.1 var(--body); text-transform: none; color: var(--dim); margin-top: 2px; }
.ladder li > b { font-weight: 400; font-size: 14px; }
.ladder li.prize { background: var(--felt-dk); box-shadow: -8px 0 0 var(--felt-dk), 8px 0 0 var(--felt-dk); }
.hs { display: inline-block; margin-left: 8px; font: 400 7px/1 var(--head); color: var(--dim); border: 2px solid currentColor; padding: 3px 3px 1px; vertical-align: 2px; text-transform: uppercase; }
.ladder .none, .results .none { margin: 12px 0 2px; color: var(--dim); }
.results { margin: 56px 4px 0; background: var(--felt-dk) var(--t-feltdk) 0 0 / 8px 8px; padding: 0 14px 8px; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 20px; line-height: 1.15; }
table.ledger th { text-align: left; font: 400 8px/1.5 var(--head); text-transform: uppercase; color: var(--brass); padding: 10px 6px 7px; border-bottom: 4px solid var(--felt-d); }
table.ledger td { padding: 8px 6px 6px; border-bottom: 2px solid var(--felt-d); vertical-align: baseline; }
table.ledger td a { color: var(--brass-hi); text-decoration: none; }
table.ledger td.r, table.ledger th.r { text-align: right; }
table.ledger td.r { white-space: nowrap; color: var(--dim); }
table.ledger .dl.up { color: var(--up); } table.ledger .dl.dn { color: #ff9a8f; }
.last-cta { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: center; margin-top: 64px; }
.foot { background: var(--burg-dk); color: var(--dim-b); padding: 22px 24px 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; font-size: 20px; border-top: 4px solid var(--brass); }
.foot .fname { font: 400 9px/1.6 var(--head); text-transform: uppercase; color: var(--brass-hi); }
.foot a { color: var(--ivory); text-decoration: none; border-bottom: 2px solid var(--burg-hi); }
.foot .mono { color: var(--ivory); }
.foot .treasury { margin-left: auto; color: var(--dim-b); font-size: 18px; word-break: break-all; }

/* ---------- the DOM chess board and poker table (the same ones the floor uses), squared off ---------- */
.board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: calc(100% - 16px); margin: 8px; user-select: none; box-shadow: 0 0 0 4px var(--ink), 0 0 0 8px var(--brass-d); background: var(--ivory); }
.board .sq { position: relative; display: flex; align-items: center; justify-content: center; }
.board .sq.l { background: #f1e6c8; } .board .sq.d { background: #1f6b45; }
.board .sq.from { box-shadow: inset 0 0 0 999px rgba(216, 165, 58, 0.5); } .board .sq.to { box-shadow: inset 0 0 0 999px rgba(216, 165, 58, 0.7); } .board .sq.chk { box-shadow: inset 0 0 0 999px rgba(210, 52, 43, 0.65); }
.board .pc { display: block; width: 86%; height: 86%; }
.pc-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pc-svg.pw .body { fill: #f1e6c8; stroke: #0a140e; stroke-width: 4; stroke-linejoin: miter; } .pc-svg.pw .cut { fill: none; stroke: #0a140e; stroke-width: 4; }
.pc-svg.pb .body { fill: #33090f; stroke: #d8a53a; stroke-width: 3; stroke-linejoin: miter; } .pc-svg.pb .cut { fill: none; stroke: #d8a53a; stroke-width: 3; }
.board .sq .coord { position: absolute; font: 400 13px/1 var(--body); color: #185a3a; } .board .sq.d .coord { color: #f1e6c8; }
.board .sq .coord.f { right: 2px; bottom: 0; } .board .sq .coord.r { left: 2px; top: 0; }
.table { position: relative; width: calc(100% - 16px); margin: 8px; aspect-ratio: 16 / 12; container-type: inline-size; background: var(--felt) var(--t-felt) 0 0 / 8px 8px; border: 8px solid var(--burg); box-shadow: 0 -4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 4px 0 0 var(--ink), inset 0 0 0 4px var(--brass-d); color: var(--text); font-size: 17px; --cw: clamp(18px, 7.4cqw, 40px); }
.table .mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: 90%; }
.table .cards { display: flex; gap: 4px; justify-content: center; }
.table .pot { font: 400 clamp(15px, 5cqw, 19px)/1 var(--body); color: var(--brass-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.table .seat { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 120px; }
.table .seat.s0 { bottom: 3%; } .table .seat.s1 { top: 3%; } .table .seat.folded { opacity: 0.5; }
.table .seat .who { font: 400 clamp(15px, 5cqw, 19px)/1 var(--body); display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ivory); }
.table .seat .stack { font: 400 clamp(15px, 4.6cqw, 18px)/1 var(--body); color: var(--brass-hi); }
.table .seat .bet, .table .note { display: none; }
.table .seat .btn-d { font: 400 7px/1 var(--head); background: var(--ivory); color: var(--ink); width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.table .tag { font: 400 7px/1 var(--head); border: 2px solid currentColor; color: var(--dim); padding: 2px 2px 1px; margin-left: 2px; } .table .tag.win { color: var(--up); }
.table .card { position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; width: var(--cw, 36px); height: calc(var(--cw, 36px) * 1.4); background: var(--ivory); color: #1b1a16; border: 2px solid var(--ink); padding: 2px 3px; font: 400 calc(var(--cw, 36px) * 0.56)/1 var(--body); }
.table .card .suit { width: calc(var(--cw, 36px) * 0.42); height: calc(var(--cw, 36px) * 0.42); align-self: flex-end; fill: currentColor; background: none; }
.table .card.red { color: var(--red); }
.table .card.back { background: var(--t-back) 0 0 / 8px 8px; box-shadow: inset 0 0 0 2px var(--ivory); }
.table .card.empty { background: transparent; border: 2px dashed var(--felt-hi); }

/* ---------- narrower screens ---------- */
@media (max-width: 1080px) {
  .purse-grid { grid-template-columns: 1fr 1fr; } .prose { grid-column: 1 / -1; }
  .dealt { grid-template-columns: repeat(3, 1fr); }
  .samples { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 20px; }
  .wrap { padding: 0 14px; }
  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 40svh 14px 54px; }
  .fixture { position: relative; left: auto; bottom: auto; width: auto; }
  .fixture .win-body { padding: 14px 14px 12px; }
  .title { gap: 12px; }
  .brand-mark { width: 84px; height: 84px; }
  .logotype { font-size: clamp(17px, 5.4vw, 24px); text-shadow: 3px 3px 0 var(--burg), 6px 6px 0 var(--ink); }
  .title .tag { font-size: 8px; margin-top: 10px; }
  .lede { font-size: 23px; } .what { font-size: 20px; }
  .plate.big { font-size: 13px; padding: 17px 16px 15px; } .plate, .inkbtn { font-size: 12px; }
  .cta { gap: 22px 18px; }
  .tally { left: 14px; right: 14px; top: 14px; bottom: auto; width: auto; padding: 0 0 4px; }
  .tally h2, .tally .last, .tally dl div:nth-child(3), .tally dl div:nth-child(5) { display: none; }
  .tally dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; margin: 5px 10px 0; }
  .tally dl div { display: block; border: 0; padding: 0; }
  .tally dt { font-size: 17px; } .tally dd { font-size: 9px; }
  .down { font-size: 8px; }
  .night { padding: 40px 14px 50px; }
  .form { grid-template-columns: 1fr; margin-bottom: 40px; }
  .win-bar { font-size: 9px; } .win-bar span:not(.sp):not(#season-kicker) { display: none; }
  .move, .move:nth-of-type(even), .move:nth-of-type(odd) { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0 4px 40px; padding: 0 12px 14px; }
  .move .no { order: -3; margin: 0 -12px 14px; font-size: 10px; }
  .move .notes { display: contents; }
  .move .notes h3 { order: -2; font-size: 13px; margin: 0 0 12px; }
  .move figure, .move:nth-of-type(even) figure { order: -1; margin: 0 0 12px; }
  .notes p { padding: 6px 0; font-size: 20px; }
  .notes p i { position: static; display: table; margin: 0 0 4px; max-width: none; }
  .notes p.lim, .move:nth-of-type(even) .notes p.lim { padding: 8px 10px; }
  .purse, .enter, .rules, .boardsec { padding: 44px 0 60px; }
  .brassplate::after, .chalkhead::after { min-width: 12px; }
  .purse-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 28px; }
  .dealt { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 30px; }
  .rcard, .rcard:nth-child(n) { margin-top: 0; min-height: 0; padding: 42px 10px 38px; }
  .samples { margin-top: 44px; gap: 30px; }
  .sample-body { grid-template-columns: 1fr; }
  .enter-grid { grid-template-columns: 1fr; gap: 30px; }
  .slip, .member { padding: 16px 14px 18px; } .member { margin-top: 4px; padding-top: 0; }
  .calls li { grid-template-columns: 30px minmax(0, 1fr); } .calls li span { grid-column: 2; }
  .ladders { grid-template-columns: 1fr; gap: 30px; margin-top: 28px; } .ladder:nth-child(2) { margin-top: 0; }
  .ladder li { font-size: 10px; grid-template-columns: 34px minmax(0, 1fr) auto; } .ladder li > b { font-size: 11px; }
  .results { margin-top: 40px; overflow: hidden; }
  table.ledger { font-size: 18px; }
  table.ledger th:nth-child(5), table.ledger td:nth-child(5), table.ledger th:nth-child(1), table.ledger td:nth-child(1) { display: none; }
  .foot .treasury { margin-left: 0; }
}