Sprint 16 — Visual Punch List (P0 + P1 + P2 template)

frontend/src/App.css

@@ -67,7 +67,7 @@ body {
   content: '';
   position: absolute;
   inset: 0;
-  background: url('/assets/bg_desktop.jpg') center/cover no-repeat;
+  background: url('/assets/runtime/generated/ui/os_shell_wallpaper_v001.png') center/cover no-repeat;
   opacity: 0.15;
   filter: brightness(0.5);
 }

frontend/src/App.tsx

@@ -43,6 +43,7 @@ import Onboarding from './components/onboarding/Onboarding';
 import SettingsPage from './components/settings/SettingsPage';
 import AuthScreen from './components/auth/AuthScreen';
 import AgeGate, { hasAgeAffirmation } from './components/compliance/AgeGate';
+import SplashScreen from './components/layout/SplashScreen';
 
 // Lazy-loaded mini-games and heavy screens
 const SlideGame         = React.lazy(() => import('./components/slide/SlideGame'));
@@ -215,9 +216,9 @@ const App: React.FC = () => {
     return <AgeGate onConfirm={() => setAgeAffirmed(true)} />;
   }
 
-  // Show loading while checking auth
+  // Show loading while checking auth — cinematic splash (Sprint 16, P0)
   if (!authChecked) {
-    return <LazyFallback />;
+    return <SplashScreen label="LOADING" />;
   }
 
   // Show auth screen if not logged in (skipped in demo mode)

frontend/src/assets/assetManifest.ts

@@ -252,9 +252,11 @@ export const environmentAssets: Record<string, EnvironmentAsset> = {
     streetBackdropDay:   `${ENVS}/street/block_stripplaza_day_street_v001.png`,
     streetBackdropNight: `${ENVS}/street/block_stripplaza_night_street_v001.png`,
   },
-  block_lasolas_miami_001: {
-    id: 'block_lasolas_miami_001',
-    displayName: 'Las Olas Boulevard',
+  // Sprint 16 (P0): Las Olas hero block. Street plates reuse stripplaza
+  // night/day until dedicated Las Olas street photography lands.
+  block_lasolas_1208_001: {
+    id: 'block_lasolas_1208_001',
+    displayName: '1208 Las Olas',
     topdownBg:           `/assets/runtime/generated/environments/topdown/block_lasolas_topdown_v001.png`,
     streetBackdropDay:   `/assets/runtime/generated/environments/street/block_lasolas_driveby_street_v001.png`,
     streetBackdropNight: `/assets/runtime/generated/environments/street/block_lasolas_driveby_street_v001.png`,

frontend/src/components/alchemy/AlchemyLab.css

@@ -19,7 +19,7 @@
   content: '';
   position: fixed;
   inset: 0;
-  background: url('/assets/bg_desktop.jpg') center/cover no-repeat;
+  background: url('/assets/runtime/generated/ui/os_shell_wallpaper_v001.png') center/cover no-repeat;
   opacity: 0.08;
   filter: brightness(0.4) hue-rotate(80deg);
   pointer-events: none;

frontend/src/components/casino/Casino.css

@@ -15,7 +15,7 @@
   content: '';
   position: fixed;
   inset: 0;
-  background: url('/assets/bg_desktop.jpg') center/cover no-repeat;
+  background: url('/assets/runtime/generated/ui/os_shell_wallpaper_v001.png') center/cover no-repeat;
   opacity: 0.06;
   filter: brightness(0.4) hue-rotate(30deg);
   pointer-events: none;

frontend/src/components/compliance/AgeGate.tsx

@@ -59,8 +59,14 @@ export default function AgeGate({ onConfirm }: AgeGateProps) {
         display: 'grid',
         placeItems: 'center',
         padding: 16,
-        background:
-          'radial-gradient(circle at 50% 18%, rgba(103, 55, 42, 0.34), transparent 38%), #070910',
+        backgroundColor: '#070910',
+        backgroundImage:
+          'radial-gradient(circle at 50% 18%, rgba(103, 55, 42, 0.34), transparent 38%), ' +
+          'linear-gradient(rgba(5, 6, 12, 0.62), rgba(5, 6, 12, 0.86)), ' +
+          'url(/assets/runtime/generated/ui/loading_screen_v001.png)',
+        backgroundSize: 'auto, auto, cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
       }}
     >
       <section style={panelStyle} aria-labelledby="age-gate-title">

frontend/src/components/contacts/Contacts.css

@@ -17,7 +17,7 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: url('/assets/bg_desktop.jpg') center/cover no-repeat;
+  background: url('/assets/runtime/generated/ui/os_shell_wallpaper_v001.png') center/cover no-repeat;
   opacity: 0.08;
   filter: brightness(0.4);
   pointer-events: none;

frontend/src/components/contacts/Contacts.tsx

@@ -21,6 +21,8 @@ import { getMoraleDescription, getMoraleConsequences, rollMoraleConsequences, ca
 import { getMemberHeatContribution } from '../../utils/memberProgression';
 import type { GangMember, Contact, MemberStatus, GetBackRequest } from '../../types/game.types';
 import BailHospitalPanel from './BailHospitalPanel';
+import RoleContactCard, { getRoleCardStats } from './RoleContactCard';
+import MemberCreation, { segmentsToStat, type MemberCreationResult } from '../gang/MemberCreation';
 import { needsRecovery } from '../../utils/bailHospitalSystem';
 import { soundManager } from '../../utils/SoundManager';
 import './Contacts.css';
@@ -30,7 +32,7 @@ type TabType = 'active' | 'jailed' | 'recovery' | 'dead' | 'requests';
 // ============ MAIN COMPONENT ============
 
 const Contacts: React.FC = () => {
-  const { goBack } = useNavigationStore();
+  const { goBack, navigateTo } = useNavigationStore();
   const { members, contacts, addMember, backdoorMember, killMember, updateMember, releaseMember } = useGangStore();
   const { getBackRequests, resolveGetBackRequest } = useMoraleStore();
   const { uploads, addUpload } = useSelfieStore();
@@ -43,6 +45,52 @@ const Contacts: React.FC = () => {
   const [showAddMember, setShowAddMember] = useState(false);
   const [showSelfieUpload, setShowSelfieUpload] = useState(false);
   const [showPhotoCreator, setShowPhotoCreator] = useState(false);
+  const [showMemberCreation, setShowMemberCreation] = useState(false);
+
+  // Sprint 16 (P1): mockup member-creation flow → GangMember record.
+  // Starter segments (1–4) map onto the 0–100 stat scale; role picks
+  // which stats the segments feed hardest.
+  const handleMemberCreation = ({ name, role, attributes }: MemberCreationResult) => {
+    const a = attributes;
+    const newMember: any = {
+      id: `member-${Date.now()}`,
+      name,
+      nickname: '',
+      role,
+      status: 'active',
+      level: 1,
+      xp: segmentsToStat(a.potential) - 35, // potential seeds a small XP head start
+      shooting: role === 'shooter' ? segmentsToStat(a.nerve) : segmentsToStat(a.nerve) - 10,
+      driving: segmentsToStat(a.speed),
+      dealing: role === 'dealer' ? segmentsToStat(a.potential) : segmentsToStat(a.potential) - 15,
+      loyalty: segmentsToStat(a.loyalty),
+      morale: segmentsToStat(a.heart),
+      heatResistance: segmentsToStat(a.nerve),
+      stealth: role === 'recruit' || role === 'k9' ? segmentsToStat(a.speed) : segmentsToStat(a.speed) - 10,
+      health: 100,
+      maxHealth: 100,
+      armor: 0,
+      weaponMods: [],
+      gear: [],
+      inventory: [],
+      appearance: {
+        gender: 'male', skinTone: '#8B4513', hairStyle: 'short', hairColor: 'black',
+        jewelry: [], tattoos: [], top: 'hoodie', bottom: 'jeans', shoes: 'jordans',
+        gangColorAccent: true,
+      },
+      backstory: generateBackstory(),
+      connections: generateConnections(),
+      hiredAt: new Date().toISOString(),
+    };
+    addMember(newMember);
+    setShowMemberCreation(false);
+    addNotification({
+      id: `notif-${Date.now()}`,
+      type: 'success',
+      message: `${name} joined the crew as ${role.toUpperCase()}`,
+      timestamp: new Date().toISOString(),
+    } as any);
+  };
   const [uploadedImage, setUploadedImage] = useState<string | null>(null);
   const [showDeployWarning, setShowDeployWarning] = useState<string | null>(null);
   const [deployConsequences, setDeployConsequences] = useState<any[]>([]);
@@ -278,13 +326,28 @@ const Contacts: React.FC = () => {
           const member = members.find(m => m.id === contact.memberId);
           const morale = (member as any)?.morale ?? 50;
           const moraleInfo = getMoraleDescription(morale);
+          // Sprint 16 (P1): mockup card, themed per role — one template
+          // covers dealer / shooter / enforcer / lookout / k9 / recruit.
           return (
-            <ContactCard
+            <RoleContactCard
               key={contact.id}
-              contact={contact}
-              moraleBadge={moraleInfo}
-              memberLevel={(member as any)?.level}
-              onClick={() => setSelectedContact(contact)}
+              name={contact.nickname || contact.name}
+              role={contact.role}
+              level={(member as any)?.level ?? 1}
+              avatarUrl={contact.customAvatarUrl}
+              stats={getRoleCardStats(member as any, contact.role)}
+              statusNote={moraleInfo.warning ? `${moraleInfo.label} — ${moraleInfo.warning}` : moraleInfo.label}
+              onOpen={() => setSelectedContact(contact)}
+              onSendToBlock={() => {
+                addNotification({
+                  id: `notif-${Date.now()}`,
+                  type: 'info',
+                  message: `Pick a corner for ${contact.nickname || contact.name}`,
+                  timestamp: new Date().toISOString(),
+                } as any);
+                navigateTo('map');
+              }}
+              onCallBack={() => setSelectedContact(contact)}
               onBackdoor={() => handleBackdoor(contact.memberId ?? contact.id)}
             />
           );
@@ -334,13 +397,28 @@ const Contacts: React.FC = () => {
         )}
       </div>
 
+      {/* Member Creation — full-screen mockup flow (Sprint 16, P1) */}
+      <AnimatePresence>
+        {showMemberCreation && (
+          <MemberCreation
+            onCreate={handleMemberCreation}
+            onClose={() => setShowMemberCreation(false)}
+          />
+        )}
+      </AnimatePresence>
+
       {/* Add Member Modal */}
       <AnimatePresence>
         {showAddMember && (
           <motion.div className="modal-overlay" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setShowAddMember(false)}>
             <motion.div className="modal-content" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.9, opacity: 0 }} onClick={(e) => e.stopPropagation()}>
               <h2>Add New Member</h2>
               <div className="add-options">
+                <motion.button className="add-option" onClick={() => { setShowAddMember(false); setShowMemberCreation(true); }} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+                  <span className="option-icon">🧬</span>
+                  <span className="option-title">Member Creation</span>
+                  <span className="option-desc">Pick a role, roll starter attributes, name your soldier</span>
+                </motion.button>
                 <motion.button className="add-option" onClick={() => { setShowAddMember(false); setShowPhotoCreator(true); }} whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                   <span className="option-icon">📸</span>
                   <span className="option-title">Create from Photo</span>