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>

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 card={obs.original_card} size="medium" />
-        <span class="card-caption">Original card</span>
+    <!-- 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" />
+        </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',