feat: welcome modal explaining the playground

Blurred-backdrop dialog shown on first visit: what runs in the browser
(MuJoCo WASM + ONNX policies), controls, gamepad and multiplayer ghosts.
Dismiss via button, Escape or backdrop click; stored in localStorage,
reopenable by clicking the top-left brand.

Co-authored-by: Cursor <cursoragent@cursor.com>

index.html

@@ -244,6 +244,125 @@
         #hud .keys { display: none; }
         #brand .sub { display: none; }
       }
+      /* ── Welcome modal ─────────────────────────────────────────────── */
+      /* display:flex would override the hidden attribute's UA display:none,
+         so hidden must win explicitly. */
+      #welcome[hidden] { display: none; }
+      #welcome {
+        position: fixed;
+        inset: 0;
+        z-index: 30;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1.5rem;
+        background: rgba(8, 8, 12, 0.45);
+        backdrop-filter: blur(16px) saturate(1.3);
+        -webkit-backdrop-filter: blur(16px) saturate(1.3);
+        opacity: 1;
+        transition: opacity 0.35s ease;
+      }
+      #welcome.closing { opacity: 0; pointer-events: none; }
+      #welcome .card {
+        position: relative;
+        max-width: 430px;
+        width: 100%;
+        padding: 2.2rem 2.2rem 2rem;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: 20px;
+        background:
+          radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 63, 0.07), transparent 55%),
+          rgba(14, 14, 20, 0.92);
+        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
+        text-align: center;
+        animation: card-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
+      }
+      @keyframes card-in {
+        from { transform: translateY(18px) scale(0.94); opacity: 0; }
+        to { transform: none; opacity: 1; }
+      }
+      #welcome .badge {
+        width: 4rem;
+        height: 4rem;
+        margin: 0 auto 1.1rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+        border-radius: 50%;
+        background: rgba(255, 210, 63, 0.12);
+        border: 1px solid rgba(255, 210, 63, 0.35);
+        animation: badge-bob 3s ease-in-out infinite;
+      }
+      @keyframes badge-bob {
+        0%, 100% { transform: translateY(0) rotate(-3deg); }
+        50% { transform: translateY(-6px) rotate(3deg); }
+      }
+      #welcome h1 {
+        font-size: 1.05rem;
+        font-weight: 700;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: #fff;
+      }
+      #welcome h1 b { color: var(--yellow); font-weight: 700; }
+      #welcome .tagline {
+        margin-top: 0.5rem;
+        font-size: 0.8rem;
+        line-height: 1.65;
+        color: rgba(255, 255, 255, 0.6);
+      }
+      #welcome ul {
+        list-style: none;
+        margin: 1.4rem 0 1.6rem;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        gap: 0.55rem;
+      }
+      #welcome li {
+        display: flex;
+        align-items: baseline;
+        gap: 0.7rem;
+        font-size: 0.78rem;
+        line-height: 1.5;
+        color: rgba(255, 255, 255, 0.72);
+      }
+      #welcome li b {
+        flex: 0 0 4.6rem;
+        font-size: 0.62rem;
+        font-weight: 700;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: rgba(255, 210, 63, 0.85);
+      }
+      #welcome-go {
+        appearance: none;
+        border: none;
+        background: var(--yellow);
+        color: var(--ink);
+        font: inherit;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        padding: 0.75rem 2.2rem;
+        border-radius: 999px;
+        cursor: pointer;
+        transition: transform 0.15s ease, box-shadow 0.15s ease;
+      }
+      #welcome-go:hover {
+        transform: translateY(-1px) scale(1.03);
+        box-shadow: 0 6px 24px rgba(255, 210, 63, 0.35);
+      }
+      #welcome .fineprint {
+        margin-top: 0.9rem;
+        font-size: 0.6rem;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.3);
+      }
+      #brand { cursor: pointer; }
     </style>
   </head>
   <body>
@@ -290,6 +409,53 @@
     </div>
     <div id="loading">Compiling physics&hellip;</div>
 
+    <div id="welcome" hidden>
+      <div class="card" role="dialog" aria-modal="true" aria-labelledby="welcome-title">
+        <div class="badge">🐤</div>
+        <h1 id="welcome-title"><b>Microduck</b> playground</h1>
+        <p class="tagline">
+          A real robot brain in your browser: MuJoCo physics compiled to
+          WebAssembly, driven by the duck's actual trained neural policies
+          at 50&nbsp;Hz. No server, no pre-baked animation.
+        </p>
+        <ul>
+          <li><b>Move</b><span>Arrow keys to run and turn, A / E to strafe, drag to orbit.</span></li>
+          <li><b>Roll</b><span>Space triggers a barrel roll, then it gets back up.</span></li>
+          <li><b>Gamepad</b><span>Plug one in - same mapping as the real robot.</span></li>
+          <li><b>Ghosts</b><span>Other visitors right now appear as translucent ducks, live.</span></li>
+        </ul>
+        <button id="welcome-go">Waddle in</button>
+        <div class="fineprint">click the title anytime to see this again</div>
+      </div>
+    </div>
+
+    <script>
+      // Welcome modal: shown on first visit, dismissible by button, Escape
+      // or clicking the blurred backdrop. The top-left brand reopens it.
+      (() => {
+        const SEEN_KEY = "md-welcome-seen";
+        const modal = document.getElementById("welcome");
+        const open = () => {
+          modal.hidden = false;
+          modal.classList.remove("closing");
+        };
+        const close = () => {
+          try { localStorage.setItem(SEEN_KEY, "1"); } catch {}
+          modal.classList.add("closing");
+          setTimeout(() => { modal.hidden = true; }, 380);
+        };
+        let seen = false;
+        try { seen = localStorage.getItem(SEEN_KEY) === "1"; } catch {}
+        if (!seen) open();
+        document.getElementById("welcome-go").addEventListener("click", close);
+        modal.addEventListener("click", (e) => { if (e.target === modal) close(); });
+        window.addEventListener("keydown", (e) => {
+          if (e.code === "Escape" && !modal.hidden) close();
+        });
+        document.getElementById("brand").addEventListener("click", open);
+      })();
+    </script>
+
     <script type="importmap">
       {
         "imports": {