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;