Polish: legible crew roster, End-Scene enforcement, decluttered Hand

- Crew roster bubbles: explicit text color + opaque distinct surface so
  they're legible and stand out from the page in both themes (the bug was
  the <button> defaulting to black-on-dark in dark mode).
- End-Scene enforcement: unless Dev Mode is on, a scene can't end until
  every living Pi-Rat has faced a Deep Challenge or the Obstacle List is
  empty. end_scene_and_transition now returns (ok, msg) and the route
  surfaces a 400; the Deep sees a ✓/○ challenge-progress badge on each
  Pi-Rat bubble. 3 new tests cover the gate.
- Hand panel: dropped the how-to-play blurb and the title in favor of a
  low-profile "Your Hand" label.
- Bump VERSION to 8 with changelog entry; check off TODO.md Polish items.

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

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

@@ -65,6 +65,7 @@
 }
 
 .crew-bubble {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -72,22 +73,24 @@
     width: 100%;
     text-align: left;
     padding: 0.55rem 0.7rem;
-    background: var(--well);
+    background: var(--surface-raised);
+    color: var(--text);
     border: 1px solid var(--edge);
     border-left: 4px solid var(--pirat);
     border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
     cursor: pointer;
     transition: var(--transition-smooth);
 }
 
 .crew-bubble:hover {
-    background: color-mix(in srgb, var(--text) 8%, transparent);
+    background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
     transform: translateX(2px);
 }
 
 .crew-bubble.is-deep {
     border-left-color: var(--deep);
-    background: color-mix(in srgb, var(--deep) 6%, transparent);
+    background: color-mix(in srgb, var(--deep) 12%, var(--surface-raised));
 }
 
 .crew-bubble.is-you {
@@ -98,6 +101,33 @@
 .crew-bubble.is-ghost { opacity: 0.7; filter: grayscale(0.6); }
 .crew-bubble.is-dead { opacity: 0.6; filter: grayscale(0.8); }
 
+/* Challenge-progress badge the Deep sees floating just outside the bubble */
+.challenge-check {
+    position: absolute;
+    left: -0.6rem;
+    top: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.15rem;
+    height: 1.15rem;
+    border-radius: 50%;
+    font-size: 0.7rem;
+    font-weight: 700;
+    line-height: 1;
+    background: var(--surface-raised);
+    border: 1px solid var(--edge);
+    color: var(--text-muted);
+    box-shadow: var(--shadow-card);
+    cursor: help;
+}
+
+.challenge-check.done {
+    background: var(--success);
+    border-color: var(--success);
+    color: var(--surface);
+}
+
 .crew-bubble .bubble-icon {
     font-size: 1.1rem;
 }
@@ -435,6 +465,16 @@
 }
 
 /* --- Hand --- */
+.hand-label {
+    display: block;
+    margin-bottom: 0.6rem;
+    font-family: var(--font-heading);
+    font-size: 0.7rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
 .hand-flex {
     display: flex;
     flex-wrap: wrap;

frontend/src/components/ScenePhase.svelte

@@ -27,8 +27,7 @@
     <div class="table-column">
         {#if !isDeep}
             <div class="card glass-panel hand-card">
-                <h3>🃏 Your Hand</h3>
-                <p class="section-desc">Keep your cards secret! When the Deep challenges you (or you assist a crewmate), drag a card onto an applied obstacle to play it. Jokers can hit any obstacle, any time.</p>
+                <span class="hand-label">🃏 Your Hand</span>
 
                 <div class="hand-flex">
                     {#each hand as card}

frontend/src/components/scene/CrewColumn.svelte

@@ -2,6 +2,7 @@
     import { slide } from 'svelte/transition';
     import { apiRequest } from '../../lib/api';
     import { crewLabel } from '../../lib/cards';
+    import { tooltip } from '../../lib/tooltip';
     import CharacterSheet from './CharacterSheet.svelte';
 
     export let state;
@@ -12,6 +13,17 @@
 
     $: isDeep = state.player.role === 'deep';
 
+    // Track which Pi-Rats have faced a Deep Challenge this scene so the Deep can
+    // see who still needs one before ending the scene.
+    $: challengedIds = new Set(
+        (state.challenges || [])
+            .filter(c => c.challenge_type === 'deep')
+            .map(c => c.target_player_id)
+    );
+    function hasBeenChallenged(p) {
+        return p.role === 'pirat' && challengedIds.has(p.id);
+    }
+
     // The Deep ticks Crew Objectives off here (moved from the old Deep panel).
     async function toggleCrew(type) {
         objError = '';
@@ -51,6 +63,15 @@
                 title="View {p.name}'s character sheet"
                 on:click={() => openTargetId = p.id}
             >
+                {#if isDeep && p.role === 'pirat'}
+                    <span
+                        class="challenge-check"
+                        class:done={hasBeenChallenged(p)}
+                        use:tooltip={hasBeenChallenged(p)
+                            ? `${p.name} has faced a Challenge this scene.`
+                            : `${p.name} hasn't faced a Challenge yet — the scene can't end until they do (or the Obstacle List is cleared).`}
+                    >{hasBeenChallenged(p) ? '✓' : '○'}</span>
+                {/if}
                 <span class="bubble-icon">{roleIcon(p)}</span>
                 <span class="bubble-name">{crewLabel(p, captainId)}</span>
                 <span class="bubble-meta">

frontend/src/lib/changelog.js

@@ -6,10 +6,19 @@
 //   - 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 = 7;
+export const VERSION = 8;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    {
+        version: 8,
+        date: '2026-06-15',
+        changes: [
+            'Crew roster bubbles are now legible and stand out from the background in both light and dark mode.',
+            'A scene can no longer be ended until every Pi-Rat has faced a Challenge (or the Obstacle List is empty). The Deep sees a ✓/○ marker on each Pi-Rat showing who still needs one.',
+            'Decluttered your Hand panel — dropped the how-to-play blurb for a low-profile label.',
+        ],
+    },
     {
         version: 7,
         date: '2026-06-15',