Add share buttons to play.html (share page)

- Copy Link and Share to X buttons on the shared player page
- Consistent Game Boy styling with main page

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

play.html

@@ -268,6 +268,27 @@
         width: 0%;
       }
 
+      /* Share buttons */
+      .share-buttons {
+        margin-top: calc(var(--spacing-unit) * 2);
+        display: flex;
+        gap: calc(var(--spacing-unit) * 1.5);
+        flex-wrap: wrap;
+      }
+
+      .share-buttons button {
+        flex: 1;
+        min-width: 120px;
+        background: var(--gb-darkest);
+        color: var(--gb-light);
+        border-color: var(--gb-medium);
+      }
+
+      .share-buttons button:hover:not(:disabled) {
+        background: var(--gb-medium);
+        color: var(--gb-lightest);
+      }
+
       /* CTA link (inside card) */
       .cta-link-inline {
         margin-top: calc(var(--spacing-unit) * 2);
@@ -372,6 +393,12 @@
           </div>
         </div>
 
+        <!-- Share buttons -->
+        <div id="shareButtons" class="share-buttons">
+          <button id="copyLinkBtn" type="button">Copy link</button>
+          <button id="shareToXBtn" type="button">Share to X</button>
+        </div>
+
         <!-- iOS Audio Unlock -->
         <div id="iosAudioBanner" class="ios-audio-banner">
           <p>Check: not on silent, volume up, Focus mode off. Then tap:</p>

src/play.ts

@@ -142,6 +142,8 @@ async function main(): Promise<void> {
   const timeRow = qs('playTimeRow') as HTMLElement;
   const iosAudioBanner = qs('iosAudioBanner') as HTMLElement;
   const enableAudioBtn = qs('enableAudioBtn') as HTMLButtonElement;
+  const copyLinkBtn = qs('copyLinkBtn') as HTMLButtonElement;
+  const shareToXBtn = qs('shareToXBtn') as HTMLButtonElement;
 
   // Detect iOS/Safari for audio unlock banner
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
@@ -168,6 +170,41 @@ async function main(): Promise<void> {
     }
   });
 
+  // Copy link handler
+  copyLinkBtn.addEventListener('click', async () => {
+    const shareUrl = window.location.href;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(shareUrl);
+      } else {
+        const ta = document.createElement('textarea');
+        ta.value = shareUrl;
+        ta.style.position = 'fixed';
+        ta.style.left = '-9999px';
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      }
+      const orig = copyLinkBtn.textContent;
+      copyLinkBtn.textContent = 'Copied!';
+      setTimeout(() => { copyLinkBtn.textContent = orig; }, 1500);
+    } catch {
+      // ignore
+    }
+  });
+
+  // Share to X handler
+  shareToXBtn.addEventListener('click', () => {
+    const shareUrl = window.location.href;
+    const { title: rawTitle } = buildMidiUrlFromParams();
+    const niceTitle = pickShareTitle(rawTitle).title;
+    const tweetText = `I made a Game Boy version of ${niceTitle}\n\nUsing @b1rdmania's Wario Synthesis Midi Engine\n\nCheck it out here`;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(shareUrl)}`;
+    window.open(twitterUrl, '_blank');
+  });
+
   const { midiUrl: u, title } = buildMidiUrlFromParams();
 
   const picked = pickShareTitle(title);