Add full SkinsPins application

- FastAPI + SQLite + Alpine.js + HTMX PWA for Bingo Bango Bongo golf scoring
- Passwordless magic link auth with email (aiosmtplib) and admin invite system
- Real-time score entry via WebSocket with drag-and-drop player ordering
- Course management with per-hole par and stroke index
- Scorecard with golf score markers (birdie, eagle, bogey, etc.)
- Two-step new game form with tee selection per player
- Dashboard with stats, live games social stream, and recent game history
- Game summary view (read-only scorecard with leaderboard)
- User profile pages with win stats
- PWA install support with generated PNG icons
- Admin panel for users, courses, games, and invitations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/templates/onboarding/setup.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+{% block title %}Welcome – Skins & Pins{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.css">
+<script src="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.js"></script>
+<script src="/static/avatar-crop.js"></script>
+{% endblock %}
+
+{% block content %}
+<div class="page">
+  <div class="page-header">
+    <h1>Welcome! 🏌️</h1>
+    <p>Set up your profile before you start playing.</p>
+  </div>
+
+  <div x-data="avatarUpload('/onboarding', '/')" x-init="tab = 'emoji'">
+  <form action="/onboarding" method="post" enctype="multipart/form-data"
+        @submit="submitForm($event)">
+    <div class="card">
+      <div class="form-group">
+        <label for="name">Your name</label>
+        {% if errors and errors.name %}<div class="alert alert-error">{{ errors.name }}</div>{% endif %}
+        <input type="text" id="name" name="name" placeholder="e.g. Tiger"
+               value="{{ values.name if values else '' }}" autocomplete="given-name" required>
+      </div>
+
+      <div class="form-group">
+        <label for="handicap">Handicap (0–54)</label>
+        {% if errors and errors.handicap %}<div class="alert alert-error">{{ errors.handicap }}</div>{% endif %}
+        <input type="number" id="handicap" name="handicap" min="0" max="54" step="0.1"
+               placeholder="e.g. 18" value="{{ values.handicap if values else '' }}" required>
+      </div>
+
+      <div class="form-group">
+        <label>Avatar</label>
+        {% if errors and errors.avatar %}<div class="alert alert-error">{{ errors.avatar }}</div>{% endif %}
+
+        <div class="avatar-tabs">
+          <button type="button" class="avatar-tab" :class="{ active: tab === 'emoji' }" @click="tab = 'emoji'">Emoji</button>
+          <button type="button" class="avatar-tab" :class="{ active: tab === 'upload' }" @click="tab = 'upload'">Photo</button>
+        </div>
+
+        <div x-show="tab === 'emoji'">
+          <div class="avatar-grid" style="margin-top: 0.75rem;">
+            {% for a in avatars %}
+            <div class="avatar-option">
+              <input type="radio" name="avatar_emoji" id="avatar_{{ loop.index }}" value="{{ a }}"
+                     {% if loop.first %}checked{% endif %}>
+              <label for="avatar_{{ loop.index }}">{{ a }}</label>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+
+        <div x-show="tab === 'upload'" style="margin-top: 0.75rem;">
+          <div x-show="previewUrl" style="margin-bottom: 0.75rem; display:flex; align-items:center; gap:1rem;">
+            <img :src="previewUrl" class="avatar-preview">
+            <span style="color:var(--text-muted); font-size:0.85rem;">Tap to change</span>
+          </div>
+          <label class="file-input-label">
+            <span x-text="previewUrl ? 'Choose different photo' : 'Choose photo'"></span>
+            <input type="file" name="avatar_file" accept="image/jpeg,image/png,image/webp,image/gif"
+                   style="display:none" @change="openFile($event)">
+          </label>
+          <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.4rem;">JPEG, PNG, WebP or GIF · max 2 MB</p>
+        </div>
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary">Save &amp; continue</button>
+  </form>
+
+  {% include "partials/crop_modal.html" %}
+  </div>
+{% endblock %}