diff --git a/TODO.md b/TODO.md
index 8d1d64f..6ec605f 100644
--- a/TODO.md
+++ b/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
diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css
index 15ee3f6..12d3c6b 100644
--- a/frontend/src/assets/css/scene-play.css
+++ b/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;
}
diff --git a/frontend/src/components/scene/ObstacleItem.svelte b/frontend/src/components/scene/ObstacleItem.svelte
index fae2514..b488598 100644
--- a/frontend/src/components/scene/ObstacleItem.svelte
+++ b/frontend/src/components/scene/ObstacleItem.svelte
@@ -67,9 +67,19 @@
{#if error}
{error}
{/if}
-
-
- Original card
+
+
+
+
+
+ {#each column_cards as pc, i (i)}
+
+
+
+ {/each}
{obs.title} {#if in_challenge && !embedded}⚔️ In Challenge{/if}