# Shark Dad Jokes Section — How to Play Page

Added Jul 2026 to `/var/www/shark-game/how-to-play.html` as Section 7, between the Map View section and the bottom navigation.

## Content

Section titled **🦈 Shark Jokes (Dad-Approved)** with 6 jokes:

1. 🍭 Why don't sharks eat clowns? — *Because they taste funny!*
2. 🎩 What do you call a shark that's a magician? — *A jaw-dropper!*
3. 🌊 Why did the shark cross the ocean? — *To get to the other tide!*
4. 🎯 What's a shark's favorite game? — *Swallow the leader!*
5. 👋 How do sharks say goodbye? — *See you in a bit — I've got to jaws!*
6. 🍽️ What did the shark say when it ate the clownfish? — *This tastes a little funny!*

## Design

- Uses the same `section-card` class as the rest of the page
- `<ul style="list-style:none;padding-left:0;">` — removes bullet markers, each joke has an emoji prefix instead
- `margin-bottom: 10px` on first 5 items, `margin-bottom: 0` on last to avoid excess space before `.note`
- `<h3>` uses `<span class="highlight">(Dad-Approved)</span>` to match the amber accent throughout the page
- `.note` callout at the bottom: **🤖 New jokes every visit** — powered by AI

## Placement anchor

Inserted between the Map View section (Section 6, ends `</div>`) and the bottom nav (`<!-- ===== NAVIGATION ===== -->`):

```
  </div>   ← closes Map View section-card

  <!-- Section 7: Shark Jokes -->
  <div class="section-card">...</div>

  <!-- ===== NAVIGATION ===== -->
  <div class="bottom-nav">
```

No changes to any other sections — this was a pure insertion.

## Content strategy

These are placeholders meant to be regenerated fresh each time by AI. Keep the tone: classic dad-joke format (question → pun), ocean/shark themed, family-friendly. The "(Dad-Approved)" label and the "powered by AI" note are intentional brand elements — keep both.

## How to add new jokes

1. Copy the `<li>` pattern: `<li style="padding-left:0;margin-bottom:10px;">EMOJI Q? <em>Punchline!</em></li>`
2. Give each joke an appropriate emoji prefix related to the topic
3. Set `margin-bottom: 0` on the last item
4. Keep jokes within 6-8 items total — don't let the section outgrow the cards above it