The locked, framework-free package. Everything below is plain HTML using the .ab-* class contract, styled entirely by alphabridge.css and (for the Play sidebar) wired by alphabridge.js — no React, no build step. Link the files and this exact system reappears: perfect recoverability.
How the lock works. All design values live in the :root tokens at the top of alphabridge.css. Components read only those tokens and own their own chrome — markup supplies content, never style. Retheme by editing a token; you cannot drift the design from app markup.
1
Core — buttons, pills, toggle, segmented, status
Buttons
Pills
defaultneutralalertillegalyour turn14
Toggle
Segmented
Status note
Enter your 13 cards, then ask for a recommendation.
Status — error
Hand must contain exactly 13 cards.
1b
App bar — the standard top navigation (identical on every page)
Brand (logo + wordmark) on the left; the same ordered nav pills on the right, so a link never moves between pages. The current page's pill is filled (.is-active). Page-specific actions never live in this bar — they belong in the page body (a command bar or panel head).
Call sequence — the bid-display standard (level in ink, suit-colored strain)
Pass·1♥·X·1NT
4♠
HCP & board tiles
14HCP+620pts
2b
Card hover — the held-hand wave
Hover across either hand: the card under the cursor pops fully, its immediate and next-out neighbours ease up progressively less, so the motion follows the mouse as a smooth swell. Same behavior on face-up cards (.ab-card-hand) and the face-down fan (CardBack).
Your hand — 13 cards (hover)
A♠K♠Q♠J♥10♥9♥8♦7♦6♦5♣4♣3♣2♣
Opponent hand — face down (hover)
3
Composites — auction, bidding box, trick area
Auction
N
E
S
W
1♠
P
2♥
X
P
P
·
·
Trick area
NA♠
EK♥
S3♠
W
Trick area — minimal (.ab-trickarea--mini, board review)
N7♥
E9♥
S
W3♥
Bidding box
4
Reasoning & confidence
Recommended call82%confidence
Limit raise — 4-card spade support, 11 points after the fit. Invites game without forcing past 2♠.
Policy — top candidates
2♠
82%
3♠
10%
2NT
6%
Confidence bars
Make 4♠
Slam tries
Defensive risk
5
Dashboard data — stats, meters, table, trends
Win rate vs GIB
58.3%↑ +2.4%
last 5,000 boards
Generation
1,204↑ +18
self-play epochs
Avg margin
1.7IMP/bd↓ -0.3
vs 2/1 reference
Benchmark
Engine
IMP/bd
Win %
AlphaBridge
+1.7
58.3
GIB
0.0
50.0
2/1 ref
-0.4
47.1
Evolution & rates
Evolution run64%
Smoke checks42/42
Declarer accuracy91%
Trends — win rate & margin
6
Play UI — layout & the Drawer standard
The felt is the anchor; every sidebar — Seat Views, Settings, the Assistant — is the same drawer. Open from a toolbar button or a felt edge-handle; close with ×, Esc, or scrim-tap. Dock drawers reflow the felt at ≥900px; overlay drawers (Settings) and any drawer below 900px slide over a scrim. Styled by alphabridge.css, wired by alphabridge.js — drag the window narrow to watch the docks become drawers.