diff --git a/TODO.md b/TODO.md
index 6ec605f..28194c5 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,7 +2,7 @@
- [x] On the home page, rejoin a crew should be above muster a crew, and there should be a gap between the two boxes
- [x] **Version number and change log** Start keeping track of version number. It's fine to just start with v1 and increment on every commit. In the hamburger menu, add an "About" item that pops up a modal with the current version number and a change log. The change log should only cover user-facing changes. Add a note to AGENTS.md about maintaining the change log.
-- [ ] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing.
+- [x] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing.
- [x] **Condense Obstacle card display**: Change how the cards in an Obstacle are laid out. Instead of being one big card and a bunch of little ones under it in a row, they should be a single column, with the cards overlapping so that you can just see the numbers and suits of the previous cards peeking out behind the latest card. This is more compact, puts the focus on the most relevant information, and is in line with the rulebook describing the card layout as a column. This is probably also how the cards in the example play section should be laid out.
## Words Words Words
diff --git a/frontend/src/lib/changelog.js b/frontend/src/lib/changelog.js
index d41c023..889df7c 100644
--- a/frontend/src/lib/changelog.js
+++ b/frontend/src/lib/changelog.js
@@ -6,10 +6,17 @@
// - Add a CHANGELOG entry only when a commit changes something players can
// see. Skip refactors, tests, and tooling. Keep wording player-facing.
-export const VERSION = 2;
+export const VERSION = 3;
// Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
export const CHANGELOG = [
+ {
+ version: 3,
+ date: '2026-06-15',
+ changes: [
+ 'The rulebook’s Example of Play now has card diagrams at each step, showing how each Obstacle’s column grows as the scene unfolds.',
+ ],
+ },
{
version: 2,
date: '2026-06-15',
diff --git a/src/pirats/rules.html b/src/pirats/rules.html
index bacf99c..7018f48 100644
--- a/src/pirats/rules.html
+++ b/src/pirats/rules.html
@@ -232,6 +232,103 @@ a { color: var(--neon-cyan); }
font-family: var(--font-heading);
cursor: pointer;
}
+
+/* ============================================================
+ Example-of-Play card diagrams. Mirror the SPA's Obstacle column:
+ the original card sits at the back (gold ring), each play stacks in
+ front with a heavy negative margin so only its rank + suit peeks out,
+ and the newest card — which sets the difficulty — is fully visible at
+ the bottom. Green ring = a play that beat the difficulty; red = one
+ that didn't. Card faces stay light parchment in both themes, like the app.
+ ============================================================ */
+:root {
+ --ex-card-face: #faf4e0;
+ --ex-card-shade: #ead9b8;
+ --ex-card-red: #c2303a;
+ --ex-card-black: #2c3245;
+ --ex-success: #3f9d5b;
+ --ex-fail: #c0392b;
+ --ex-card-h: 74px;
+ --ex-peek: 30px;
+}
+
+.ex-board {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.25rem 2.25rem;
+ margin: 0.75rem 0 1.25rem;
+ padding: 1rem 1.25rem;
+ background: var(--well-bg);
+ border: 1px solid var(--row-border);
+ border-radius: 10px;
+}
+
+.ex-board-label {
+ flex-basis: 100%;
+ font-family: var(--font-heading);
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--text-muted);
+}
+
+.ex-obstacle { display: flex; align-items: flex-start; gap: 0.85rem; }
+
+.ex-stack {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex-shrink: 0;
+ padding: 2px;
+}
+
+.ex-stack-card { position: relative; border-radius: 6px; line-height: 0; }
+.ex-stack-card + .ex-stack-card { margin-top: calc(var(--ex-peek) - var(--ex-card-h)); }
+.ex-stack-card.is-original { box-shadow: 0 0 0 2px var(--gold); }
+.ex-stack-card.is-success { box-shadow: 0 0 0 2px var(--ex-success); }
+.ex-stack-card.is-fail { box-shadow: 0 0 0 2px var(--ex-fail); }
+
+.ex-card {
+ width: 52px;
+ height: var(--ex-card-h);
+ border-radius: 6px;
+ background: linear-gradient(150deg, var(--ex-card-face), var(--ex-card-shade));
+ border: 1px solid rgba(44, 50, 69, 0.35);
+ color: var(--ex-card-black);
+ padding: 4px 5px;
+ position: relative;
+ box-shadow: 0 2px 5px rgba(36, 62, 87, 0.25);
+}
+
+.ex-card.red { color: var(--ex-card-red); }
+
+.ex-card .ex-corner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: max-content;
+ line-height: 1;
+ font-weight: 800;
+}
+
+.ex-card .ex-corner .r { font-size: 0.82rem; }
+.ex-card .ex-corner .s { font-size: 0.72rem; }
+
+.ex-card .ex-pip {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.3rem;
+}
+
+.ex-meta { font-size: 0.85rem; line-height: 1.35; }
+.ex-meta .ex-title { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
+.ex-meta .ex-val { color: var(--gold); font-weight: 800; }
+
+.ex-legend .ex-ok { color: var(--ex-success); font-weight: 700; }
+.ex-legend .ex-no { color: var(--ex-fail); font-weight: 700; }
@@ -1021,6 +1118,28 @@ a { color: var(--neon-cyan); }
are a total of two Obstacles on the list. Sally draws from the top of the deck: 10 of ♥
Hearts: Cheese Thief. The Obstacle List now has: 7 of ♥ Hearts: Bad Breakups (value: 7) and
10 of ♥ Hearts: Cheese Thief (value: 10).
+
+ In the diagrams below, each Obstacle is a column of cards. The
+ original card (gold outline) stays at the back and fixes the color; each play
+ stacks in front of it, and the newest card — which sets the current difficulty — sits in full
+ view. Green marks a play that beat the difficulty, red
+ one that didn't.
+
+
Obstacle List after the draw
+
+
+
Bad BreakupsDifficulty 7
0 successes
+
+
+
+
Cheese ThiefDifficulty 10
0 successes
+
+
Step 3: Frame the Scene!
Sally: "Alright, so you rowdy rats are in the galley below deck, drinking grog, and
shootin' the breeze. The crew's been tense ever since that breakup between Salty Socks Pete
@@ -1065,6 +1184,24 @@ a { color: var(--neon-cyan); }
Draw Cards: Jake played a 3 of ♥ Hearts against a 10 of ♥ Hearts. Since
both were red, Jake draws 1 card and adds it to their hand.
+
+
After the First Challenge
+
+
+
Bad BreakupsDifficulty 8
1 success
+
+
+
+
Cheese ThiefDifficulty 3
0 successes
+
+
Second Challenge
Gabe: "While everyone's yelling at Carlos, I sneak toward the cheese wheel on the table,
looking for clues, and maybe to steal it." Sally: "Oh no you don't! Challenge time! Can you
@@ -1089,6 +1226,25 @@ a { color: var(--neon-cyan); }
Draw Cards: Gabe played a King of ♠ Spades (black) against a red
Obstacle, so he doesn't draw any cards.
+
+
After the Second Challenge
+
+
+
Bad BreakupsDifficulty 8
1 success
+
+
+
+
Cheese ThiefDifficulty Rank
1 success
(King = Secret Pirate Technique)
+
+
Third Challenge
Gabe: "Whiskey Shrinkage is up on deck now, eating cheese openly. He's taunting the crew
with it, hoping to draw out the Cheese Thief. 'Will the owner of this delicious havarti come
@@ -1123,6 +1279,27 @@ a { color: var(--neon-cyan); }
draws 1 card. Jake played Queen of ♥ Hearts (red) against a red Obstacle, so they WOULD draw
1 card, but they were assisting, so they didn't get to draw.
+
+
After the Third Challenge
+
+
+
Bad BreakupsDifficulty Rank
2 successes
(Queen = Secret Pirate Technique)
+
+
+
+
Cheese ThiefDifficulty 9
2 successes
+
+
Ending the Scene
Sally: "Alright, let's check the requirements for ending the Scene. Both Pi-Rat Players
have been challenged at least once. Has anyone made progress on their Objectives?"