Condense obstacle cards into an overlapping column (v2)

Replace the big-original-card + row-of-minis layout with a single vertical
column: the original sits at the back (accent ring), each play stacks in front
with a heavy negative margin so only its rank+suit peeks out, and the latest
card is fully visible at the bottom. Played cards keep a green/red success ring;
the ChallengePanel's per-play list still credits each player.

Top-aligns the Current Difficulty / Successes boxes so they no longer stretch to
the now-taller card column. Matches the rulebook's column card layout and is far
more compact. Verified in the ChallengePanel, the obstacle list, and on mobile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

TODO.md

@@ -3,7 +3,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. 
-- [ ] **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.
+- [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
 

frontend/src/assets/css/scene-play.css

@@ -205,19 +205,40 @@
 .suit-c, .suit-s { border-left: 4px solid var(--suit-black); }
 .suit-h, .suit-d { border-left: 4px solid var(--suit-red); }
 
-.obstacle-card-wrapper {
+/* Overlapping card column for an Obstacle. Cards stack with a heavy negative
+   margin so each earlier card shows only its top strip (rank + suit); the most
+   recent play sits fully visible at the bottom. Rings: accent = the original
+   card, green/red = a play that did / didn't beat the difficulty. */
+.obstacle-stack {
+    --peek: 34px;          /* visible strip of each earlier card */
+    --card-h: 112px;       /* medium card height (card.css) */
+    align-self: start;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    gap: 0.3rem;
+    padding: 2px;          /* room for the rings, which overflow:hidden would clip */
 }
 
-.card-caption {
-    font-size: 0.6rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--text-muted);
+.stack-card {
+    position: relative;
+    border-radius: var(--radius-sm);
+    line-height: 0;
+}
+
+.stack-card + .stack-card {
+    margin-top: calc(var(--peek) - var(--card-h));
+}
+
+.stack-card.is-original {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.stack-card.is-success {
+    box-shadow: 0 0 0 2px var(--success);
+}
+
+.stack-card.is-failure {
+    box-shadow: 0 0 0 2px var(--danger);
 }
 
 /* Obstacle color (red/black) — fixed by the original card; matching it draws back */
@@ -288,6 +309,7 @@
 }
 
 .obstacle-value-display {
+    align-self: start;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -299,6 +321,7 @@
 }
 
 .obstacle-successes-display {
+    align-self: start;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -327,26 +350,6 @@
     color: var(--accent);
 }
 
-.played-column {
-    grid-column: 1 / -1;
-    border-top: 1px solid var(--edge-soft);
-    padding-top: 0.75rem;
-    margin-top: 0.5rem;
-}
-
-.played-column h5 {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    margin-bottom: 0.5rem;
-}
-
-.column-cards-flex {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.75rem;
-}
-
 .clear-obstacle-row {
     grid-column: 1 / -1;
 }

frontend/src/components/scene/ObstacleItem.svelte

@@ -67,9 +67,19 @@
     {#if error}
         <div class="alert alert-danger" style="grid-column: 1 / -1;">{error}</div>
     {/if}
-    <div class="obstacle-card-wrapper">
+    <!-- Card column: original at the back, each play stacked in front of it, the
+         latest fully visible and earlier cards peeking their rank + suit. -->
+    <div class="obstacle-stack">
+        <div class="stack-card is-original" use:tooltip={'Original card — fixes the Obstacle’s color and never changes.'}>
             <Card card={obs.original_card} size="medium" />
-        <span class="card-caption">Original card</span>
+        </div>
+        {#each column_cards as pc, i (i)}
+            <div class="stack-card {pc.success ? 'is-success' : 'is-failure'}"
+                 class:is-latest={i === column_cards.length - 1}
+                 use:tooltip={`${pc.player_name} played this — ${pc.success ? 'success' : 'no success'}.`}>
+                <Card card={pc.card} size="medium" />
+            </div>
+        {/each}
     </div>
     <div class="obstacle-details">
         <h4>{obs.title} {#if in_challenge && !embedded}<span class="in-challenge-tag">⚔️ In Challenge</span>{/if}</h4>
@@ -97,17 +107,6 @@
         <span class="val-number">{success_count} / {state.players.length}</span>
     </div>
 
-    <!-- Played Cards Column -->
-    <div class="played-column">
-        <h5>Card History (Column)</h5>
-        <div class="column-cards-flex">
-            <Card card={obs.original_card} size="mini" />
-            {#each column_cards as pc}
-                <Card card={pc.card} size="mini" rotated success={pc.success} owner={pc.player_name.slice(0, 4)} />
-            {/each}
-        </div>
-    </div>
-
     {#if is_completed && state.player.role === 'deep'}
         <div class="clear-obstacle-row text-center">
             <button class="btn btn-success btn-full" on:click={clearObstacle}>Clear Obstacle</button>

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 = 1;
+export const VERSION = 2;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    {
+        version: 2,
+        date: '2026-06-15',
+        changes: [
+            'Obstacle cards now stack as a single overlapping column — the latest play sits in full view with earlier cards peeking out behind it, matching the rulebook’s card layout.',
+        ],
+    },
     {
         version: 1,
         date: '2026-06-15',