Make the rulebook's obstacle reference section collapsible

The Obstacle List & Type Charts section is long reference material the
app already implements, so wrap it in a <details> element. A small
script expands it when the TOC link or a deep link targets #obstacles.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/pirats/rules.html

@@ -165,6 +165,9 @@ a { color: var(--neon-cyan); }
 
 .rules-body details[open] summary { margin-bottom: 0.75rem; }
 
+.rules-body details { scroll-margin-top: 1rem; }
+.rules-body summary h3 { display: inline; margin: 0; }
+
 .signature { color: var(--gold); font-style: italic; }
 
 .back-to-top { text-align: center; }
@@ -669,7 +672,8 @@ a { color: var(--neon-cyan); }
             pile! Players are encouraged to have a real life party as well! An absolute rager would be
             preferred, but a small celebration is acceptable.</p>
 
-            <h3 id="obstacles">The Obstacle List &amp; Type Charts</h3>
+            <details id="obstacles">
+            <summary><h3>The Obstacle List &amp; Type Charts</h3> <span class="aside">(click to expand — the app handles these automatically)</span></summary>
             <p>The Obstacle List tracks all potential threats and difficulties facing the Pi-Rats, and is
             made up of one or more cards from the deck that have been placed face up on a surface visible to
             all Players. After a Player plays a card during a Challenge, that card is placed in a column
@@ -764,6 +768,7 @@ a { color: var(--neon-cyan); }
                     <tr><th>K</th><td><strong>It's Alive</strong> — The ship is brought to life through magical means. It's not going to cooperate without an incentive, now that it has its own wants and needs.</td></tr>
                 </tbody>
             </table>
+            </details>
 
             <h3 id="challenges">Resolving Challenges</h3>
             <p>During the course of a Scene, Pi-Rats will eventually be challenged by the Deep using the
@@ -1300,5 +1305,15 @@ a { color: var(--neon-cyan); }
         <p class="back-to-top"><a class="top-link" href="#introduction">⬆ Back to top</a></p>
     </article>
 </div>
+<script>
+// Expand the collapsed obstacle reference when the TOC link (or a deep link) targets it
+function openObstaclesForHash() {
+    if (location.hash === '#obstacles') {
+        document.getElementById('obstacles').open = true;
+    }
+}
+window.addEventListener('hashchange', openObstaclesForHash);
+openObstaclesForHash();
+</script>
 </body>
 </html>