diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css
index 0d76e1e..2c39f7a 100644
--- a/frontend/src/assets/css/scene-play.css
+++ b/frontend/src/assets/css/scene-play.css
@@ -19,23 +19,6 @@
gap: 0.75rem;
}
-.crew-objectives-btn {
- width: 100%;
- padding: 0.6rem 0.5rem;
- background: color-mix(in srgb, var(--accent) 14%, transparent);
- border: 1px solid var(--accent);
- border-radius: var(--radius-md);
- color: var(--text);
- font-family: var(--font-heading);
- font-size: 0.9rem;
- cursor: pointer;
- transition: var(--transition-smooth);
-}
-
-.crew-objectives-btn:hover {
- background: color-mix(in srgb, var(--accent) 24%, transparent);
-}
-
.crew-bubbles {
display: flex;
flex-direction: column;
@@ -92,16 +75,63 @@
color: var(--text-muted);
}
+/* Crew Objectives toggle at the end of the roster */
+.crew-objectives-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+ width: 100%;
+ text-align: left;
+ padding: 0.55rem 0.7rem;
+ background: color-mix(in srgb, var(--accent) 12%, transparent);
+ border: 1px solid var(--accent);
+ border-radius: var(--radius-md);
+ color: var(--text);
+ font-family: var(--font-heading);
+ font-size: 0.85rem;
+ cursor: pointer;
+ transition: var(--transition-smooth);
+}
+
+.crew-objectives-toggle:hover {
+ background: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.crew-objectives-toggle .co-count {
+ font-weight: 700;
+ color: var(--accent);
+}
+
+.crew-objectives-detail {
+ padding: 0.6rem 0.7rem;
+ background: var(--well);
+ border: 1px solid var(--edge);
+ border-radius: var(--radius-md);
+ display: flex;
+ flex-direction: column;
+ gap: 0.35rem;
+ font-size: 0.85rem;
+}
+
/* On narrow screens the crew column becomes a horizontal strip above the board */
@media (max-width: 1100px) {
.crew-bubbles {
flex-direction: row;
flex-wrap: wrap;
+ align-items: flex-start;
}
.crew-bubble {
width: auto;
flex: 1 1 140px;
}
+ .crew-objectives-toggle {
+ width: auto;
+ flex: 1 1 100%;
+ }
+ .crew-objectives-detail {
+ flex: 1 1 100%;
+ }
}
.card-header {
diff --git a/frontend/src/components/scene/CharacterSheet.svelte b/frontend/src/components/scene/CharacterSheet.svelte
index b295834..951176a 100644
--- a/frontend/src/components/scene/CharacterSheet.svelte
+++ b/frontend/src/components/scene/CharacterSheet.svelte
@@ -1,7 +1,7 @@
-
The whole crew works toward these. The Deep marks them off as you accomplish them.
-