Hugging Face's logo

Spaces:
ZoroaStrella
/
belleville-nocturne
Running

App Files Community
ZoroaStrella commited on
Commit
ad4f1a7
·
verified ·
1 Parent(s): cb7a216

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1128 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Belleville Nocturne
3
- emoji: ⚡
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: belleville-nocturne
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1128 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Belleville Nocturne | V5 Scenario</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=EB+Garamond:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'EB Garamond', serif;
14
+ background-color: #0a0a0a;
15
+ color: #e5e5e5;
16
+ background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=1000');
17
+ background-size: cover;
18
+ background-attachment: fixed;
19
+ background-position: center;
20
+ }
21
+
22
+ .vampire-text {
23
+ font-family: 'Cinzel Decorative', cursive;
24
+ }
25
+
26
+ .blood-drop {
27
+ position: relative;
28
+ }
29
+
30
+ .blood-drop::after {
31
+ content: '';
32
+ position: absolute;
33
+ bottom: -5px;
34
+ left: 0;
35
+ width: 100%;
36
+ height: 2px;
37
+ background: linear-gradient(90deg, #8a0303, transparent);
38
+ }
39
+
40
+ .section-card {
41
+ background: rgba(10, 10, 10, 0.85);
42
+ border-left: 3px solid #8a0303;
43
+ transition: all 0.3s ease;
44
+ }
45
+
46
+ .section-card:hover {
47
+ transform: translateY(-3px);
48
+ box-shadow: 0 10px 20px rgba(138, 3, 3, 0.3);
49
+ }
50
+
51
+ .nav-link {
52
+ position: relative;
53
+ }
54
+
55
+ .nav-link::after {
56
+ content: '';
57
+ position: absolute;
58
+ bottom: -2px;
59
+ left: 0;
60
+ width: 0;
61
+ height: 1px;
62
+ background: #8a0303;
63
+ transition: width 0.3s ease;
64
+ }
65
+
66
+ .nav-link:hover::after {
67
+ width: 100%;
68
+ }
69
+
70
+ .content-wrapper::before {
71
+ content: '';
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ background: rgba(0, 0, 0, 0.7);
78
+ z-index: -1;
79
+ }
80
+
81
+ .clan-badge {
82
+ border: 1px solid;
83
+ padding: 2px 8px;
84
+ border-radius: 9999px;
85
+ font-size: 0.75rem;
86
+ font-weight: 600;
87
+ }
88
+
89
+ .scene-marker {
90
+ width: 40px;
91
+ height: 40px;
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ border-radius: 50%;
96
+ background: #8a0303;
97
+ color: white;
98
+ font-weight: bold;
99
+ margin-right: 1rem;
100
+ }
101
+ </style>
102
+ </head>
103
+ <body class="min-h-screen">
104
+ <div class="container mx-auto px-4 py-8 relative">
105
+ <!-- Header -->
106
+ <header class="mb-12 text-center">
107
+ <h1 class="vampire-text text-5xl md:text-6xl font-bold mb-2 text-red-700">Belleville Nocturne</h1>
108
+ <p class="text-xl italic">A Vampire: The Masquerade V5 One-Shot Scenario</p>
109
+ <div class="mt-4 flex justify-center space-x-4">
110
+ <span class="px-4 py-1 bg-red-900 text-sm rounded-full">Paris, Belleville District</span>
111
+ <span class="px-4 py-1 bg-gray-800 text-sm rounded-full">4-6 hour session</span>
112
+ <span class="px-4 py-1 bg-gray-800 text-sm rounded-full">Beginner Friendly</span>
113
+ </div>
114
+ </header>
115
+
116
+ <!-- Navigation -->
117
+ <nav class="mb-12 bg-black bg-opacity-70 p-4 rounded-lg sticky top-4 z-10 backdrop-blur-sm">
118
+ <ul class="flex flex-wrap justify-center gap-6">
119
+ <li><a href="#overview" class="nav-link">Overview</a></li>
120
+ <li><a href="#themes" class="nav-link">Themes</a></li>
121
+ <li><a href="#characters" class="nav-link">Characters</a></li>
122
+ <li><a href="#scenes" class="nav-link">Scenes</a></li>
123
+ <li><a href="#npcs" class="nav-link">NPCs</a></li>
124
+ <li><a href="#mechanics" class="nav-link">Mechanics</a></li>
125
+ <li><a href="#resources" class="nav-link">Resources</a></li>
126
+ </ul>
127
+ </nav>
128
+
129
+ <!-- Main Content -->
130
+ <div class="content-wrapper relative z-0">
131
+ <!-- Overview Section -->
132
+ <section id="overview" class="mb-16">
133
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Scenario Overview</h2>
134
+ <div class="grid md:grid-cols-2 gap-8">
135
+ <div class="section-card p-6 rounded-lg">
136
+ <h3 class="text-xl font-semibold mb-3 text-red-400"><i class="fas fa-moon mr-2"></i>Pitch</h3>
137
+ <p class="mb-4">A group of Belleville locals working at a small Chinese restaurant get drawn into the Kindred power struggles of Paris when a simple late-night delivery goes horribly wrong. After witnessing an Anarch attack on a Camarilla gathering, they're Embraced to ensure their silence and must navigate their first terrifying night as vampires.</p>
138
+ <div class="bg-gray-900 p-4 rounded border-l-4 border-red-700">
139
+ <h4 class="font-semibold mb-2"><i class="fas fa-exclamation-triangle mr-2 text-red-500"></i>Content Warnings</h4>
140
+ <ul class="list-disc pl-5 space-y-1">
141
+ <li>Violence and blood</li>
142
+ <li>Body horror</li>
143
+ <li>Themes of exploitation</li>
144
+ <li>Social tension and discrimination</li>
145
+ <li>Forced transformation</li>
146
+ </ul>
147
+ </div>
148
+ </div>
149
+ <div class="section-card p-6 rounded-lg">
150
+ <h3 class="text-xl font-semibold mb-3 text-red-400"><i class="fas fa-route mr-2"></i>Scenario Flow</h3>
151
+ <ol class="space-y-4">
152
+ <li class="flex items-start">
153
+ <div class="bg-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div>
154
+ <div><strong>Mortal Beginnings:</strong> The characters as humans working their last shift at "Le Meilleur Tofu" before the fateful delivery.</div>
155
+ </li>
156
+ <li class="flex items-start">
157
+ <div class="bg-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div>
158
+ <div><strong>Inciting Incident:</strong> The delivery to La Bellevilloise and witnessing the Anarch attack.</div>
159
+ </li>
160
+ <li class="flex items-start">
161
+ <div class="bg-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div>
162
+ <div><strong>The Embrace:</strong> Near-death and transformation into vampires.</div>
163
+ </li>
164
+ <li class="flex items-start">
165
+ <div class="bg-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">4</div>
166
+ <div><strong>Desperate Survival:</strong> First hunt, dealing with Hunger, finding shelter from the sun.</div>
167
+ </li>
168
+ <li class="flex items-start">
169
+ <div class="bg-gray-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">5</div>
170
+ <div><strong>Investigation & Confrontation:</strong> Seeking answers about their Sires and their new existence.</div>
171
+ </li>
172
+ </ol>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Themes Section -->
178
+ <section id="themes" class="mb-16">
179
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Thematic Pillars</h2>
180
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
181
+ <div class="section-card p-6 rounded-lg">
182
+ <div class="flex items-center mb-3">
183
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
184
+ <i class="fas fa-users"></i>
185
+ </div>
186
+ <h3 class="text-xl font-semibold">Social Dynamics & Power Plays</h3>
187
+ </div>
188
+ <p>Explore the intricate web of relationships within mortal society (locals, gentrifiers, workers) and the mirroring hierarchies within the Cainite world (Camarilla vs. Anarch, Prince vs. subjects).</p>
189
+ </div>
190
+ <div class="section-card p-6 rounded-lg">
191
+ <div class="flex items-center mb-3">
192
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
193
+ <i class="fas fa-landmark"></i>
194
+ </div>
195
+ <h3 class="text-xl font-semibold">Hyperlocal History & Geography</h3>
196
+ </div>
197
+ <p>Root the narrative firmly in Belleville's unique identity - its working-class past, waves of immigration, artistic spirit, and ongoing gentrification. Use historical layers to inform current tensions.</p>
198
+ </div>
199
+ <div class="section-card p-6 rounded-lg">
200
+ <div class="flex items-center mb-3">
201
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
202
+ <i class="fas fa-university"></i>
203
+ </div>
204
+ <h3 class="text-xl font-semibold">Class Struggle & Intersectionality</h3>
205
+ </div>
206
+ <p>Examine tensions through urban geography (gentrified hotspots vs. social housing), socio-economics, and cultural clashes, framed within both mortal life and the Cainite condition.</p>
207
+ </div>
208
+ <div class="section-card p-6 rounded-lg">
209
+ <div class="flex items-center mb-3">
210
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
211
+ <i class="fas fa-theater-masks"></i>
212
+ </div>
213
+ <h3 class="text-xl font-semibold">Cultural Immersion</h3>
214
+ </div>
215
+ <p>Weave in Belleville's diverse eateries and bars, Parisian nightlife nuances, the coded language of the streets, and specific anxieties tied to migratory experiences.</p>
216
+ </div>
217
+ <div class="section-card p-6 rounded-lg">
218
+ <div class="flex items-center mb-3">
219
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
220
+ <i class="fas fa-mask"></i>
221
+ </div>
222
+ <h3 class="text-xl font-semibold">The Vampire Metaphor</h3>
223
+ </div>
224
+ <p>Leverage vampires as figures of marginalization, contagion, otherness, and hidden power structures. Connect these themes directly to the characters' pre-existing lives and how the Embrace transforms them.</p>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Characters Section -->
230
+ <section id="characters" class="mb-16">
231
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Character Integration</h2>
232
+
233
+ <div class="section-card p-6 rounded-lg mb-8">
234
+ <h3 class="text-2xl font-semibold mb-4 text-red-400">Pre-Generated Concepts</h3>
235
+ <div class="grid md:grid-cols-2 gap-6">
236
+ <!-- Character 1 -->
237
+ <div class="bg-gray-900 p-4 rounded-lg border border-gray-800">
238
+ <div class="flex justify-between items-start mb-3">
239
+ <h4 class="text-xl font-medium">The Struggling Art Student</h4>
240
+ <div class="flex space-x-2">
241
+ <span class="clan-badge border-blue-400 text-blue-400">Mortal</span>
242
+ </div>
243
+ </div>
244
+ <p class="text-sm text-gray-300 mb-3">Works deliveries for rent while trying to make it as an artist. Deeply connected to Belleville's street art scene.</p>
245
+ <div class="text-sm">
246
+ <p class="mb-1"><strong>Touchstone:</strong> Their aging art teacher at a local community center.</p>
247
+ <p class="mb-1"><strong>Hook:</strong> Owes Jiangshi money for art supplies bought on credit.</p>
248
+ <p class="mb-1"><strong>Skills:</strong> Art, Streetwise, Subterfuge</p>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Character 2 -->
253
+ <div class="bg-gray-900 p-4 rounded-lg border border-gray-800">
254
+ <div class="flex justify-between items-start mb-3">
255
+ <h4 class="text-xl font-medium">The Second-Generation Immigrant</h4>
256
+ <div class="flex space-x-2">
257
+ <span class="clan-badge border-blue-400 text-blue-400">Mortal</span>
258
+ </div>
259
+ </div>
260
+ <p class="text-sm text-gray-300 mb-3">Torn between family expectations and personal dreams. Knows everyone in the neighborhood.</p>
261
+ <div class="text-sm">
262
+ <p class="mb-1"><strong>Touchstone:</strong> Their younger sibling who looks up to them.</p>
263
+ <p class="mb-1"><strong>Hook:</strong> Suspects Jiangshi's restaurant is a front for something.</p>
264
+ <p class="mb-1"><strong>Skills:</strong> Socialize, Empathy, Languages</p>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Character 3 -->
269
+ <div class="bg-gray-900 p-4 rounded-lg border border-gray-800">
270
+ <div class="flex justify-between items-start mb-3">
271
+ <h4 class="text-xl font-medium">The Disillusioned Activist</h4>
272
+ <div class="flex space-x-2">
273
+ <span class="clan-badge border-blue-400 text-blue-400">Mortal</span>
274
+ </div>
275
+ </div>
276
+ <p class="text-sm text-gray-300 mb-3">Fights against gentrification but is losing hope. Works at the restaurant to stay under the radar.</p>
277
+ <div class="text-sm">
278
+ <p class="mb-1"><strong>Touchstone:</strong> An elderly neighbor being forced out of their apartment.</p>
279
+ <p class="mb-1"><strong>Hook:</strong> Noticed strange people coming and going from the restaurant at night.</p>
280
+ <p class="mb-1"><strong>Skills:</strong> Politics, Intimidation, Athletics</p>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Character 4 -->
285
+ <div class="bg-gray-900 p-4 rounded-lg border border-gray-800">
286
+ <div class="flex justify-between items-start mb-3">
287
+ <h4 class="text-xl font-medium">The Cynical Musician</h4>
288
+ <div class="flex space-x-2">
289
+ <span class="clan-badge border-blue-400 text-blue-400">Mortal</span>
290
+ </div>
291
+ </div>
292
+ <p class="text-sm text-gray-300 mb-3">Plays gigs in local bars but mostly busks. Works at the restaurant for steady cash.</p>
293
+ <div class="text-sm">
294
+ <p class="mb-1"><strong>Touchstone:</strong> Their former bandmate who got a "real job."</p>
295
+ <p class="mb-1"><strong>Hook:</strong> Overheard Lamia and Adze arguing about "the shipment."</p>
296
+ <p class="mb-1"><strong>Skills:</strong> Performance, Awareness, Streetwise</p>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="section-card p-6 rounded-lg">
303
+ <h3 class="text-2xl font-semibold mb-4 text-red-400">Player-Created Characters</h3>
304
+ <div class="grid md:grid-cols-2 gap-8">
305
+ <div>
306
+ <h4 class="text-lg font-medium mb-2">Guidelines</h4>
307
+ <ul class="list-disc pl-5 space-y-2">
308
+ <li>Characters must be employees or close associates of "Le Meilleur Tofu"</li>
309
+ <li>Rooted in Belleville with strong local connections</li>
310
+ <li>Define at least one mortal Touchstone in the neighborhood</li>
311
+ <li>Create Aspirations that will be challenged by the Embrace</li>
312
+ <li>Skills should reflect working-class backgrounds</li>
313
+ </ul>
314
+ </div>
315
+ <div>
316
+ <h4 class="text-lg font-medium mb-2">Group Connection</h4>
317
+ <p class="mb-3">Why is this group working together tonight?</p>
318
+ <div class="bg-gray-900 p-4 rounded">
319
+ <ul class="list-disc pl-5 space-y-2 text-sm">
320
+ <li>The regular late shift crew</li>
321
+ <li>Filling in for absent coworkers</li>
322
+ <li>Jiangshi specifically chose them for this delivery</li>
323
+ <li>They're the only ones who work the closing shifts</li>
324
+ <li>They've worked together before and have some rapport</li>
325
+ </ul>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Scenes Section -->
333
+ <section id="scenes" class="mb-16">
334
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Scene Breakdown</h2>
335
+
336
+ <!-- Part 1 -->
337
+ <div class="mb-12">
338
+ <h3 class="text-2xl font-semibold mb-4 text-red-400">Part 1: La Livraison Infernale (Mortal Life)</h3>
339
+
340
+ <!-- Scene 1 -->
341
+ <div class="section-card p-6 rounded-lg mb-6">
342
+ <div class="flex items-center mb-4">
343
+ <div class="scene-marker">1</div>
344
+ <h4 class="text-xl font-semibold">Le Meilleur Tofu - The Shift Ends</h4>
345
+ </div>
346
+ <div class="grid md:grid-cols-2 gap-6">
347
+ <div>
348
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-landmark mr-2"></i>Setting</h5>
349
+ <p class="mb-4 italic">"The cramped basement kitchen of 'Le Meilleur Tofu' reeks of soy sauce and bleach. The stainless steel counters are wiped down, the woks cleaned and stacked. Upstairs, the cheerful facade of the restaurant with its red lanterns and smiling Buddha contrasts sharply with this utilitarian space where the real work happens."</p>
350
+
351
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-users mr-2"></i>NPC Interaction</h5>
352
+ <div class="mb-3 p-3 bg-gray-900 rounded border-l-2 border-red-700">
353
+ <p class="font-medium">Mme. Jiangshi</p>
354
+ <p class="text-sm italic">"Ah, my hardworking little sparrows! One last task tonight, yes? A special delivery for very important guests. So lucky I have such reliable helpers!"</p>
355
+ </div>
356
+ <div class="mb-3 p-3 bg-gray-900 rounded border-l-2 border-blue-700">
357
+ <p class="font-medium">Lamia (whispering urgently)</p>
358
+ <p class="text-sm italic">"You don't have to do this. Make an excuse. Get out of here tonight."</p>
359
+ </div>
360
+ </div>
361
+ <div>
362
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-bullseye mr-2"></i>Objectives</h5>
363
+ <p class="mb-4">Accept the unusual late-night delivery mission to La Bellevilloise with its exceptional bonus.</p>
364
+
365
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-box-open mr-2"></i>The Package</h5>
366
+ <ul class="list-disc pl-5 space-y-1 mb-4">
367
+ <li>Three large crates marked "Specialty Tofu"</li>
368
+ <li>Unusually heavy for their size</li>
369
+ <li>Surface is strangely cold to the touch</li>
370
+ <li>Faint metallic smell that makes the back of your throat itch</li>
371
+ <li>Lamia and Adze handle them with excessive care</li>
372
+ </ul>
373
+
374
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-dice mr-2"></i>Potential Checks</h5>
375
+ <div class="flex flex-wrap gap-2">
376
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Insight (Jiangshi)</span>
377
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Awareness (Package)</span>
378
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Persuasion (Decline)</span>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Scene 2 -->
385
+ <div class="section-card p-6 rounded-lg mb-6">
386
+ <div class="flex items-center mb-4">
387
+ <div class="scene-marker">2</div>
388
+ <h4 class="text-xl font-semibold">L'Heure Bleue à Belleville (Foreshadowing & Atmosphere)</h4>
389
+ </div>
390
+ <div class="grid md:grid-cols-2 gap-6">
391
+ <div>
392
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-map-marked-alt mr-2"></i>Location Options</h5>
393
+ <div class="space-y-4">
394
+ <div class="p-3 bg-gray-900 rounded">
395
+ <p class="font-medium">Le Vieux Zinc</p>
396
+ <p class="text-sm">An old-school Parisian bar with yellowed posters and a zinc counter worn smooth by decades of elbows.</p>
397
+ <p class="text-xs italic mt-1">Potential Info: Overheard gossip about strange VIPs at La Bellevilloise.</p>
398
+ </div>
399
+ <div class="p-3 bg-gray-900 rounded">
400
+ <p class="font-medium">Chez Rachid</p>
401
+ <p class="text-sm">A bustling Maghrebi café with mint tea and honey-drenched pastries.</p>
402
+ <p class="text-xs italic mt-1">Potential Info: Rumors of unusual police presence near the venue.</p>
403
+ </div>
404
+ <div class="p-3 bg-gray-900 rounded">
405
+ <p class="font-medium">Cantine Zhao</p>
406
+ <p class="text-sm">A small, brightly-lit Chinese eatery with plastic stools and steaming noodle bowls.</p>
407
+ <p class="text-xs italic mt-1">Potential Info: Seeing Lamia arguing on the phone.</p>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ <div>
412
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-bullseye mr-2"></i>Objectives</h5>
413
+ <p class="mb-4">Gather information about the neighborhood's mood and potential clues about the upcoming delivery.</p>
414
+
415
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-dice mr-2"></i>Potential Checks</h5>
416
+ <div class="mb-4">
417
+ <div class="flex flex-wrap gap-2 mb-2">
418
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Socialize (Gossip)</span>
419
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Streetwise (Rumors)</span>
420
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Insight (NPCs)</span>
421
+ </div>
422
+ <p class="text-xs italic">Success grants minor advantages like shortcuts, contacts, or warnings.</p>
423
+ </div>
424
+
425
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-eye mr-2"></i>Foreshadowing</h5>
426
+ <ul class="list-disc pl-5 space-y-1 text-sm">
427
+ <li>Glimpses of key figures (future Sires, Anarch leader)</li>
428
+ <li>Unusual symbols or markings</li>
429
+ <li>Heightened police presence</li>
430
+ <li>Local unease about the VIP event</li>
431
+ </ul>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Scene 3 -->
437
+ <div class="section-card p-6 rounded-lg mb-6">
438
+ <div class="flex items-center mb-4">
439
+ <div class="scene-marker">3</div>
440
+ <h4 class="text-xl font-semibold">La Montée vers Ménilmontant (The Journey)</h4>
441
+ </div>
442
+ <div class="grid md:grid-cols-2 gap-6">
443
+ <div>
444
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-landmark mr-2"></i>Setting</h5>
445
+ <p class="mb-4 italic">"Belleville's streets pulse with nightlife - bars spilling laughter onto sidewalks, the sizzle of late-night kebabs, a busker's mournful accordion. But as you climb toward Ménilmontant, the atmosphere grows tense. Police barriers block the usual routes, officers wave flashlights at idling cars. The air feels charged, like before a summer storm."</p>
446
+
447
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-exclamation-triangle mr-2"></i>Obstacles</h5>
448
+ <ul class="list-disc pl-5 space-y-1 mb-4">
449
+ <li>Police checkpoints demanding papers</li>
450
+ <li>Road closures forcing detours</li>
451
+ <li>Impatient drivers creating traffic snarls</li>
452
+ <li>Potential altercations with security</li>
453
+ </ul>
454
+ </div>
455
+ <div>
456
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-bullseye mr-2"></i>Objectives</h5>
457
+ <p class="mb-4">Navigate the blocked streets and reach La Bellevilloise with the delivery.</p>
458
+
459
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-dice mr-2"></i>Potential Checks</h5>
460
+ <div class="flex flex-wrap gap-2 mb-4">
461
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Drive (Navigation)</span>
462
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Streetwise (Shortcuts)</span>
463
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Persuasion (Police)</span>
464
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Athletics (Alleyways)</span>
465
+ </div>
466
+
467
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-lightbulb mr-2"></i>Success/Failure</h5>
468
+ <p class="text-sm">Success means arriving on time with no issues. Failure could mean delays, damaged goods, or unwanted attention.</p>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <!-- Scene 4 -->
474
+ <div class="section-card p-6 rounded-lg">
475
+ <div class="flex items-center mb-4">
476
+ <div class="scene-marker">4</div>
477
+ <h4 class="text-xl font-semibold">Aux Portes de La Bellevilloise (Delivery & Observation)</h4>
478
+ </div>
479
+ <div class="grid md:grid-cols-2 gap-6">
480
+ <div>
481
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-landmark mr-2"></i>Setting</h5>
482
+ <p class="mb-4 italic">"The service entrance of La Bellevilloise is a world apart from its elegant facade. Harried staff in black uniforms rush about, radios crackling. Through half-open doors, you catch glimpses of crystal chandeliers, champagne flutes, and impeccably dressed guests who never glance toward the help. The air smells of expensive perfume and something faintly metallic."</p>
483
+
484
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-users mr-2"></i>Observations</h5>
485
+ <ul class="list-disc pl-5 space-y-1 mb-4">
486
+ <li>Security is professional but unusually tense</li>
487
+ <li>Overheard mentions of "The Prince"</li>
488
+ <li>Glimpses of a private meeting on a mezzanine</li>
489
+ <li>Disguised Anarchs behaving suspiciously</li>
490
+ <li>Lamia or Adze might be seen lurking nearby</li>
491
+ </ul>
492
+ </div>
493
+ <div>
494
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-bullseye mr-2"></i>Objectives</h5>
495
+ <p class="mb-4">Complete the delivery, obtain the return package (receipt + small heavy envelope), and observe the suspicious activities.</p>
496
+
497
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-dice mr-2"></i>Potential Checks</h5>
498
+ <div class="flex flex-wrap gap-2 mb-4">
499
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Awareness (Details)</span>
500
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Stealth (Observe)</span>
501
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Persuasion (Staff)</span>
502
+ </div>
503
+
504
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-box-open mr-2"></i>The Return Package</h5>
505
+ <p class="text-sm mb-2">A small, heavy envelope or box that Jiangshi insisted must be retrieved "at all costs." Could contain:</p>
506
+ <ul class="list-disc pl-5 space-y-1 text-sm">
507
+ <li>Payment in unusual currency</li>
508
+ <li>Sensitive information</li>
509
+ <li>Something supernatural</li>
510
+ <li>Evidence of Jiangshi's dealings</li>
511
+ </ul>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Part 2 -->
518
+ <div>
519
+ <h3 class="text-2xl font-semibold mb-4 text-red-400">Part 2: La Nuit de Sang (Vampire Existence)</h3>
520
+
521
+ <!-- Scene 5 -->
522
+ <div class="section-card p-6 rounded-lg mb-6">
523
+ <div class="flex items-center mb-4">
524
+ <div class="scene-marker">5</div>
525
+ <h4 class="text-xl font-semibold">L'Éclat et l'Étreinte (The Blast and the Embrace)</h4>
526
+ </div>
527
+ <div class="grid md:grid-cols-2 gap-6">
528
+ <div>
529
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-bomb mr-2"></i>The Attack</h5>
530
+ <p class="mb-4 italic">"The world explodes in fire and noise. A pressure wave slams you off your feet as glass shatters outward in a deadly rain. Screams pierce the ringing in your ears. Through the smoke, you see figures moving with impossible speed - some fleeing, others attacking. Pain radiates from your side where a shard of metal juts from your ribs. Your vision tunnels as blood pools beneath you."</p>
531
+
532
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-skull mr-2"></i>Near Death</h5>
533
+ <p class="mb-4">Each character experiences their mortal life flashing before their eyes, focusing on their Touchstones and unfulfilled Aspirations.</p>
534
+ </div>
535
+ <div>
536
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-heartbeat mr-2"></i>The Embrace</h5>
537
+ <p class="mb-4 italic">"Cold hands turn you onto your back. A face swims into view - pale, beautiful, terrible. 'You saw too much,' a voice whispers. Or perhaps, 'I can use you.' Or maybe just a fanged smile before the pain of the bite obliterates thought. The feeding is agony, then ecstasy, then something worse. When they force their blood between your lips, your heart stutters... and stops."</p>
538
+
539
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-question mr-2"></i>Sire Motivations</h5>
540
+ <ul class="list-disc pl-5 space-y-1 text-sm">
541
+ <li>Witness elimination/control</li>
542
+ <li>Sees potential in the mortal</li>
543
+ <li>Act of twisted mercy</li>
544
+ <li>Desperate need for allies</li>
545
+ <li>Information preservation</li>
546
+ </ul>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- Scene 6 -->
552
+ <div class="section-card p-6 rounded-lg mb-6">
553
+ <div class="flex items-center mb-4">
554
+ <div class="scene-marker">6</div>
555
+ <h4 class="text-xl font-semibold">Réveil Brutal (Rude Awakening - First Night)</h4>
556
+ </div>
557
+ <div class="grid md:grid-cols-2 gap-6">
558
+ <div>
559
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-landmark mr-2"></i>Setting</h5>
560
+ <p class="mb-4 italic">"You wake in darkness, curled in a fetal position in some filthy alley or abandoned room. Your body is cold, yet every sense is painfully acute. The stench of garbage makes you gag. Distant sirens pierce your skull like needles. And beneath it all - a gnawing, all-consuming hunger that makes your gums ache and your fingers tremble."</p>
561
+
562
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-heart mr-2"></i>The Hunger</h5>
563
+ <p class="mb-4">Characters start with Hunger 3 or 4. Describe its physical and psychological effects.</p>
564
+ </div>
565
+ <div>
566
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-paw mr-2"></i>The Beast</h5>
567
+ <p class="mb-4">Introduce the Beast stirring within. Potential first Frenzy check triggered by:</p>
568
+ <ul class="list-disc pl-5 space-y-1 mb-4">
569
+ <li>Smell of blood from the attack</li>
570
+ <li>Fear of their new state</li>
571
+ <li>Pain from injuries</li>
572
+ </ul>
573
+
574
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-bullseye mr-2"></i>Objectives</h5>
575
+ <p class="text-sm">Understand their new state (partially), survive immediate threats, begin to grapple with Hunger and the Beast.</p>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Scene 7 -->
581
+ <div class="section-card p-6 rounded-lg mb-6">
582
+ <div class="flex items-center mb-4">
583
+ <div class="scene-marker">7</div>
584
+ <h4 class="text-xl font-semibold">Chasse et Refuge (Hunt and Shelter - Survival & Investigation)</h4>
585
+ </div>
586
+ <div class="grid md:grid-cols-2 gap-6">
587
+ <div>
588
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-tint mr-2"></i>The First Hunt</h5>
589
+ <p class="mb-4">Guide the ST on presenting hunting opportunities with moral dilemmas:</p>
590
+ <ul class="list-disc pl-5 space-y-1 mb-4">
591
+ <li>Injured mortals in the chaos</li>
592
+ <li>Rats in the alleys (less filling)</li>
593
+ <li>Isolated passerby (high risk)</li>
594
+ <li>Potential for Humanity Stains</li>
595
+ </ul>
596
+
597
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-home mr-2"></i>Finding Sanctuary</h5>
598
+ <p class="text-sm">Characters must find shelter before dawn using skills like Stealth, Streetwise, or Larceny.</p>
599
+ </div>
600
+ <div>
601
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-search mr-2"></i>Piecing Things Together</h5>
602
+ <p class="mb-4">Characters begin investigating their new existence and seeking their Sires:</p>
603
+ <ul class="list-disc pl-5 space-y-1 mb-4">
604
+ <li>What happened to them?</li>
605
+ <li>Who Embraced them and why?</li>
606
+ <li>What was in the return package?</li>
607
+ <li>Clues based on Embrace circumstances</li>
608
+ </ul>
609
+
610
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-dice mr-2"></i>Potential Checks</h5>
611
+ <div class="flex flex-wrap gap-2">
612
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Investigation</span>
613
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Streetwise</span>
614
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Occult</span>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+
620
+ <!-- Scene 8 -->
621
+ <div class="section-card p-6 rounded-lg">
622
+ <div class="flex items-center mb-4">
623
+ <div class="scene-marker">8</div>
624
+ <h4 class="text-xl font-semibold">Confrontation(s) (Climax Options)</h4>
625
+ </div>
626
+ <div class="grid md:grid-cols-2 gap-6">
627
+ <div>
628
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-user mr-2"></i>The Sire</h5>
629
+ <p class="mb-4">Locating and confronting their Sire could involve:</p>
630
+ <ul class="list-disc pl-5 space-y-1 mb-4">
631
+ <li>Tense negotiation</li>
632
+ <li>Information exchange</li>
633
+ <li>A test of worthiness</li>
634
+ <li>Violent rejection</li>
635
+ <li>Offer of tutelage</li>
636
+ </ul>
637
+
638
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-users mr-2"></i>Lamia or Adze</h5>
639
+ <p class="text-sm">Seeking answers from Jiangshi's children could reveal more about the local power dynamics.</p>
640
+ </div>
641
+ <div>
642
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-fire mr-2"></i>The Anarch Leader</h5>
643
+ <p class="mb-4">Finding the architect of the attack is extremely dangerous and could lead to:</p>
644
+ <ul class="list-disc pl-5 space-y-1 mb-4">
645
+ <li>A deadly fight</li>
646
+ <li>A desperate chase</li>
647
+ <li>Forced recruitment</li>
648
+ <li>Elimination attempt</li>
649
+ </ul>
650
+
651
+ <h5 class="font-medium mb-2 text-red-300"><i class="fas fa-crown mr-2"></i>Jiangshi</h5>
652
+ <p class="text-sm">Confronting the Princess herself is likely suicidal for neonates but could result in punishment, a test, or being bound into her service.</p>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </section>
658
+
659
+ <!-- NPCs Section -->
660
+ <section id="npcs" class="mb-16">
661
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Non-Player Characters</h2>
662
+
663
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
664
+ <!-- Jiangshi -->
665
+ <div class="section-card p-6 rounded-lg">
666
+ <div class="flex justify-between items-start mb-3">
667
+ <h3 class="text-xl font-semibold">Mme. Jiangshi</h3>
668
+ <div class="flex space-x-2">
669
+ <span class="clan-badge border-purple-500 text-purple-500">Toreador</span>
670
+ <span class="clan-badge border-yellow-500 text-yellow-500">Prince</span>
671
+ </div>
672
+ </div>
673
+ <p class="text-sm italic mb-4">"The Princess of Belleville appears as a middle-aged Chinese woman with an ever-present smile that never reaches her eyes. Her restaurant, 'Le Meilleur Tofu,' is both her domain and her hunting ground."</p>
674
+
675
+ <div class="mb-3">
676
+ <h4 class="font-medium text-red-300 mb-1">Background</h4>
677
+ <p class="text-sm">Formerly a courtesan in 19th century Shanghai, Embraced by a visiting Toreador. Came to Paris in the 1970s and carved out Belleville as her domain.</p>
678
+ </div>
679
+
680
+ <div class="mb-3">
681
+ <h4 class="font-medium text-red-300 mb-1">Motivations</h4>
682
+ <ul class="list-disc pl-5 text-sm space-y-1">
683
+ <li>Maintain control of her territory</li>
684
+ <li>Balance Camarilla expectations with local realities</li>
685
+ <li>Exploit the neighborhood's changing demographics</li>
686
+ </ul>
687
+ </div>
688
+
689
+ <div>
690
+ <h4 class="font-medium text-red-300 mb-1">Secrets</h4>
691
+ <ul class="list-disc pl-5 text-sm space-y-1">
692
+ <li>Her restaurant is a front for blood trade</li>
693
+ <li>She knows about the planned Anarch attack but did nothing to stop it</li>
694
+ <li>Her children (Lamia and Adze) are plotting against her</li>
695
+ </ul>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- Lamia -->
700
+ <div class="section-card p-6 rounded-lg">
701
+ <div class="flex justify-between items-start mb-3">
702
+ <h3 class="text-xl font-semibold">Lamia</h3>
703
+ <div class="flex space-x-2">
704
+ <span class="clan-badge border-purple-500 text-purple-500">Toreador</span>
705
+ <span class="clan-badge border-gray-500 text-gray-500">Ghoul</span>
706
+ </div>
707
+ </div>
708
+ <p class="text-sm italic mb-4">"Jiangshi's 'daughter' moves with unnatural grace, her porcelain beauty marred only by the permanent scowl she wears. She dresses in expensive but understated fashion, always watching, always judging."</p>
709
+
710
+ <div class="mb-3">
711
+ <h4 class="font-medium text-red-300 mb-1">Background</h4>
712
+ <p class="text-sm">A French-Vietnamese woman ghouled in the 1990s. Serves as Jiangshi's enforcer and right hand, but resents her position.</p>
713
+ </div>
714
+
715
+ <div class="mb-3">
716
+ <h4 class="font-medium text-red-300 mb-1">Motivations</h4>
717
+ <ul class="list-disc pl-5 text-sm space-y-1">
718
+ <li>Protect her own interests</li>
719
+ <li>Undermine Jiangshi without getting caught</li>
720
+ <li>Potentially help the PCs if it serves her</li>
721
+ </ul>
722
+ </div>
723
+
724
+ <div>
725
+ <h4 class="font-medium text-red-300 mb-1">Secrets</h4>
726
+ <ul class="list-disc pl-5 text-sm space-y-1">
727
+ <li>She's been leaking information to the Anarchs</li>
728
+ <li>Has a mortal lover she protects fiercely</li>
729
+ <li>Knows about the blood trade operation</li>
730
+ </ul>
731
+ </div>
732
+ </div>
733
+
734
+ <!-- Adze -->
735
+ <div class="section-card p-6 rounded-lg">
736
+ <div class="flex justify-between items-start mb-3">
737
+ <h3 class="text-xl font-semibold">Adze</h3>
738
+ <div class="flex space-x-2">
739
+ <span class="clan-badge border-green-600 text-green-600">Gangrel</span>
740
+ <span class="clan-badge border-gray-500 text-gray-500">Ghoul</span>
741
+ </div>
742
+ </div>
743
+ <p class="text-sm italic mb-4">"Jiangshi's 'son' is a hulking West African man with tribal scars and eyes that reflect light like a cat's. He speaks rarely but watches everything."</p>
744
+
745
+ <div class="mb-3">
746
+ <h4 class="font-medium text-red-300 mb-1">Background</h4>
747
+ <p class="text-sm">A former child soldier from Liberia, ghouled by Jiangshi in the early 2000s. Serves as her muscle and intimidation factor.</p>
748
+ </div>
749
+
750
+ <div class="mb-3">
751
+ <h4 class="font-medium text-red-300 mb-1">Motivations</h4>
752
+ <ul class="list-disc pl-5 text-sm space-y-1">
753
+ <li>Protect Jiangshi out of twisted loyalty</li>
754
+ <li>Maintain order in the territory</li>
755
+ <li>Suppress his growing Beast</li>
756
+ </ul>
757
+ </div>
758
+
759
+ <div>
760
+ <h4 class="font-medium text-red-300 mb-1">Secrets</h4>
761
+ <ul class="list-disc pl-5 text-sm space-y-1">
762
+ <li>He's been losing control to Frenzy more often</li>
763
+ <li>Hates Lamia but follows Jiangshi's orders</li>
764
+ <li>Knows more about the Embrace than he lets on</li>
765
+ </ul>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Anarch Leader -->
770
+ <div class="section-card p-6 rounded-lg">
771
+ <div class="flex justify-between items-start mb-3">
772
+ <h3 class="text-xl font-semibold">Le Fantôme</h3>
773
+ <div class="flex space-x-2">
774
+ <span class="clan-badge border-red-600 text-red-600">Brujah</span>
775
+ <span class="clan-badge border-blue-500 text-blue-500">Anarch</span>
776
+ </div>
777
+ </div>
778
+ <p class="text-sm italic mb-4">"The leader of the Belleville Anarch cell is a pale wraith of a man with hollow cheeks and burning eyes. His voice is soft but carries an undercurrent of violence."</p>
779
+
780
+ <div class="mb-3">
781
+ <h4 class="font-medium text-red-300 mb-1">Background</h4>
782
+ <p class="text-sm">A former Communard Embraced during the Paris Commune. Has been fighting the Camarilla for over a century.</p>
783
+ </div>
784
+
785
+ <div class="mb-3">
786
+ <h4 class="font-medium text-red-300 mb-1">Motivations</h4>
787
+ <ul class="list-disc pl-5 text-sm space-y-1">
788
+ <li>Overthrow Jiangshi's rule</li>
789
+ <li>Establish Anarch control of Belleville</li>
790
+ <li>Use the neighborhood's discontent as a weapon</li>
791
+ </ul>
792
+ </div>
793
+
794
+ <div>
795
+ <h4 class="font-medium text-red-300 mb-1">Secrets</h4>
796
+ <ul class="list-disc pl-5 text-sm space-y-1">
797
+ <li>Has a mole in Jiangshi's operation (Lamia)</li>
798
+ <li>Doesn't care about collateral damage</li>
799
+ <li>Sees the PCs as potential pawns or threats</li>
800
+ </ul>
801
+ </div>
802
+ </div>
803
+
804
+ <!-- Potential Sire 1 -->
805
+ <div class="section-card p-6 rounded-lg">
806
+ <div class="flex justify-between items-start mb-3">
807
+ <h3 class="text-xl font-semibold">The Archivist</h3>
808
+ <div class="flex space-x-2">
809
+ <span class="clan-badge border-gray-600 text-gray-600">Nosferatu</span>
810
+ <span class="clan-badge border-yellow-500 text-yellow-500">Camarilla</span>
811
+ </div>
812
+ </div>
813
+ <p class="text-sm italic mb-4">"A hunched figure swathed in scarves and oversized coats, their true form hidden beneath layers. Their voice is a dry whisper, like pages turning."</p>
814
+
815
+ <div class="mb-3">
816
+ <h4 class="font-medium text-red-300 mb-1">Embrace Reason</h4>
817
+ <p class="text-sm">The PCs saw something they shouldn't have. The Archivist Embraced to control the information.</p>
818
+ </div>
819
+
820
+ <div class="mb-3">
821
+ <h4 class="font-medium text-red-300 mb-1">Personality</h4>
822
+ <ul class="list-disc pl-5 text-sm space-y-1">
823
+ <li>Obsessive about knowledge</li>
824
+ <li>Paranoid about security</li>
825
+ <li>Will test the PCs before teaching them</li>
826
+ </ul>
827
+ </div>
828
+
829
+ <div>
830
+ <h4 class="font-medium text-red-300 mb-1">Clan Traits</h4>
831
+ <ul class="list-disc pl-5 text-sm space-y-1">
832
+ <li>Obfuscate to hide their nature</li>
833
+ <li>Potence for unexpected strength</li>
834
+ <li>Animalism to command rats and birds</li>
835
+ </ul>
836
+ </div>
837
+ </div>
838
+
839
+ <!-- Potential Sire 2 -->
840
+ <div class="section-card p-6 rounded-lg">
841
+ <div class="flex justify-between items-start mb-3">
842
+ <h3 class="text-xl font-semibold">The Bodyguard</h3>
843
+ <div class="flex space-x-2">
844
+ <span class="clan-badge border-red-600 text-red-600">Brujah</span>
845
+ <span class="clan-badge border-yellow-500 text-yellow-500">Camarilla</span>
846
+ </div>
847
+ </div>
848
+ <p class="text-sm italic mb-4">"A tall, muscular woman with close-cropped hair and a permanent scowl. She moves with the precision of a predator, her eyes constantly scanning for threats."</p>
849
+
850
+ <div class="mb-3">
851
+ <h4 class="font-medium text-red-300 mb-1">Embrace Reason</h4>
852
+ <p class="text-sm">Saw potential in one of the PCs during the attack. Embraced to create a useful ally.</p>
853
+ </div>
854
+
855
+ <div class="mb-3">
856
+ <h4 class="font-medium text-red-300 mb-1">Personality</h4>
857
+ <ul class="list-disc pl-5 text-sm space-y-1">
858
+ <li>Disillusioned with the Camarilla</li>
859
+ <li>Strict but fair</li>
860
+ <li>Values strength and loyalty</li>
861
+ </ul>
862
+ </div>
863
+
864
+ <div>
865
+ <h4 class="font-medium text-red-300 mb-1">Clan Traits</h4>
866
+ <ul class="list-disc pl-5 text-sm space-y-1">
867
+ <li>Potence for superhuman strength</li>
868
+ <li>Celerity for lightning speed</li>
869
+ <li>Presence to command attention</li>
870
+ </ul>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </section>
875
+
876
+ <!-- Mechanics Section -->
877
+ <section id="mechanics" class="mb-16">
878
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Mechanics Integration</h2>
879
+
880
+ <div class="grid md:grid-cols-2 gap-8">
881
+ <div class="section-card p-6 rounded-lg">
882
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-heartbeat mr-2"></i>Hunger & Frenzy</h3>
883
+ <div class="space-y-4">
884
+ <div>
885
+ <h4 class="font-medium mb-2">Initial Hunger</h4>
886
+ <p class="text-sm">Characters start with Hunger 3 or 4 after the Embrace. Describe its effects:</p>
887
+ <ul class="list-disc pl-5 text-sm mt-1 space-y-1">
888
+ <li>Physical tremors and aches</li>
889
+ <li>Heightened senses making everything overwhelming</li>
890
+ <li>Difficulty focusing on anything but blood</li>
891
+ </ul>
892
+ </div>
893
+
894
+ <div>
895
+ <h4 class="font-medium mb-2">First Frenzy Triggers</h4>
896
+ <p class="text-sm">Potential triggers for the characters' first Frenzy checks:</p>
897
+ <ul class="list-disc pl-5 text-sm mt-1 space-y-1">
898
+ <li>Smell of blood from the attack aftermath</li>
899
+ <li>Fear of their new condition</li>
900
+ <li>Pain from injuries</li>
901
+ <li>Confrontation with a mortal</li>
902
+ </ul>
903
+ </div>
904
+
905
+ <div>
906
+ <h4 class="font-medium mb-2">Compulsions</h4>
907
+ <p class="text-sm">Suggest Clan-specific Compulsions based on potential Sires:</p>
908
+ <div class="grid grid-cols-2 gap-2 mt-2">
909
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Nosferatu: Hide your face</span>
910
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Brujah: Destroy something</span>
911
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Toreador: Seek beauty</span>
912
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Ventrue: Demand obedience</span>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </div>
917
+
918
+ <div class="section-card p-6 rounded-lg">
919
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-dice-d20 mr-2"></i>Checks & Difficulties</h3>
920
+ <div class="space-y-4">
921
+ <div>
922
+ <h4 class="font-medium mb-2">Common Checks</h4>
923
+ <div class="grid grid-cols-2 gap-2">
924
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Investigation (3 dice)</span>
925
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Stealth (4 dice)</span>
926
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Persuasion (2 dice)</span>
927
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Streetwise (3 dice)</span>
928
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Awareness (4 dice)</span>
929
+ <span class="px-2 py-1 bg-gray-800 rounded text-xs">Intimidation (2 dice)</span>
930
+ </div>
931
+ </div>
932
+
933
+ <div>
934
+ <h4 class="font-medium mb-2">Hunting Mechanics</h4>
935
+ <p class="text-sm mb-2">Options for the first hunt with associated risks:</p>
936
+ <ul class="list-disc pl-5 text-sm space-y-1">
937
+ <li>Injured survivors (Risk: Humanity Stain)</li>
938
+ <li>Rats (Risk: Not satisfying)</li>
939
+ <li>Homeless person (Risk: Witnesses)</li>
940
+ <li>Blood bags (Risk: Hard to find)</li>
941
+ </ul>
942
+ </div>
943
+
944
+ <div>
945
+ <h4 class="font-medium mb-2">Combat Advice</h4>
946
+ <p class="text-sm">Keep combat narrative and fast-paced. Focus on:</p>
947
+ <ul class="list-disc pl-5 text-sm space-y-1">
948
+ <li>Stakes rather than mechanics</li>
949
+ <li>Environmental factors</li>
950
+ <li>Emotional impact</li>
951
+ <li>Escape options</li>
952
+ </ul>
953
+ </div>
954
+ </div>
955
+ </div>
956
+
957
+ <div class="section-card p-6 rounded-lg">
958
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-book mr-2"></i>Chronicle Tenets</h3>
959
+ <p class="mb-4">Suggested Tenets reflecting Belleville's social fabric:</p>
960
+ <ul class="list-disc pl-5 space-y-2">
961
+ <li><strong>Community Above All:</strong> Harming those who contribute to the neighborhood's vitality is a sin.</li>
962
+ <li><strong>Respect the Struggle:</strong> Exploiting those already marginalized is a sin.</li>
963
+ <li><strong>Adapt or Die:</strong> Clinging blindly to tradition in the face of change is a sin.</li>
964
+ </ul>
965
+ </div>
966
+
967
+ <div class="section-card p-6 rounded-lg">
968
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-user-graduate mr-2"></i>Beginner Support</h3>
969
+ <div class="space-y-4">
970
+ <div>
971
+ <h4 class="font-medium mb-2">Introducing Rules Gradually</h4>
972
+ <ul class="list-disc pl-5 text-sm space-y-1">
973
+ <li>Start with basic Attribute + Skill rolls</li>
974
+ <li>Introduce Hunger after the Embrace</li>
975
+ <li>Add Disciplines after first hunt</li>
976
+ <li>Save advanced systems for later</li>
977
+ </ul>
978
+ </div>
979
+
980
+ <div>
981
+ <h4 class="font-medium mb-2">Player Guidance</h4>
982
+ <p class="text-sm">Help new players by:</p>
983
+ <ul class="list-disc pl-5 text-sm space-y-1">
984
+ <li>Clearly describing options</li>
985
+ <li>Suggesting potential actions</li>
986
+ <li>Explaining consequences before rolls</li>
987
+ <li>Focusing on narrative over rules</li>
988
+ </ul>
989
+ </div>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ </section>
994
+
995
+ <!-- Resources Section -->
996
+ <section id="resources" class="mb-16">
997
+ <h2 class="vampire-text text-3xl font-bold mb-6 blood-drop">Storyteller Resources</h2>
998
+
999
+ <div class="grid md:grid-cols-2 gap-8">
1000
+ <div class="section-card p-6 rounded-lg">
1001
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-map-marked-alt mr-2"></i>Belleville Map</h3>
1002
+ <div class="bg-gray-900 p-4 rounded mb-4">
1003
+ <p class="text-sm italic mb-2">Key locations to mark on your map:</p>
1004
+ <ul class="grid grid-cols-2 gap-2 text-sm">
1005
+ <li>Le Meilleur Tofu</li>
1006
+ <li>La Bellevilloise</li>
1007
+ <li>Le Vieux Zinc</li>
1008
+ <li>Chez Rachid</li>
1009
+ <li>Cantine Zhao</li>
1010
+ <li>Le Néon Rose</li>
1011
+ <li>Police Station</li>
1012
+ <li>Social Housing</li>
1013
+ <li>Parc de Belleville</li>
1014
+ <li>Métro Stations</li>
1015
+ </ul>
1016
+ </div>
1017
+ <p class="text-sm">Include territory boundaries (Camarilla vs. Anarch), safe routes, and dangerous areas post-attack.</p>
1018
+ </div>
1019
+
1020
+ <div class="section-card p-6 rounded-lg">
1021
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-newspaper mr-2"></i>Player Handouts</h3>
1022
+ <div class="space-y-4">
1023
+ <div class="bg-gray-900 p-4 rounded border border-gray-800">
1024
+ <h4 class="font-medium mb-1">Delivery Order Slip</h4>
1025
+ <p class="text-xs italic">Crinkled paper with Jiangshi's elegant handwriting</p>
1026
+ <p class="text-sm mt-2 font-mono">"La Bellevilloise - VIP Event - 3 crates specialty tofu - MUST deliver before midnight - return with receipt AND package"</p>
1027
+ </div>
1028
+
1029
+ <div class="bg-gray-900 p-4 rounded border border-gray-800">
1030
+ <h4 class="font-medium mb-1">Mysterious Note</h4>
1031
+ <p class="text-xs italic">Found in the return package or on a dead Anarch</p>
1032
+ <p class="text-sm mt-2 font-mono">"The sparrows will sing at midnight. Burn the nest. -F"</p>
1033
+ </div>
1034
+
1035
+ <div class="bg-gray-900 p-4 rounded border border-gray-800">
1036
+ <h4 class="font-medium mb-1">News Report</h4>
1037
+ <p class="text-xs italic">Headline about the explosion</p>
1038
+ <p class="text-sm mt-2 font-mono">"GAS EXPLOSION AT LA BELLEVILLOISE - 12 DEAD - TERRORISM NOT RULED OUT"</p>
1039
+ </div>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="section-card p-6 rounded-lg">
1044
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-headphones mr-2"></i>Atmosphere & Music</h3>
1045
+ <div class="space-y-4">
1046
+ <div>
1047
+ <h4 class="font-medium mb-2">Music Suggestions</h4>
1048
+ <ul class="list-disc pl-5 text-sm space-y-1">
1049
+ <li>Parisian café music for early scenes</li>
1050
+ <li>Tension-building ambient for delivery</li>
1051
+ <li>Chaotic industrial for the attack</li>
1052
+ <li>Gothic ambient for vampire scenes</li>
1053
+ </ul>
1054
+ </div>
1055
+
1056
+ <div>
1057
+ <h4 class="font-medium mb-2">Descriptive Prompts</h4>
1058
+ <p class="text-sm">Evoke Belleville's unique atmosphere:</p>
1059
+ <ul class="list-disc pl-5 text-sm space-y-1">
1060
+ <li>The mingling smells of diverse cuisines</li>
1061
+ <li>Graffiti-covered shutters and trendy boutiques</li>
1062
+ <li>The hum of different languages in the streets</li>
1063
+ <li>Contrast between old working-class and new money</li>
1064
+ </ul>
1065
+ </div>
1066
+ </div>
1067
+ </div>
1068
+
1069
+ <div class="section-card p-6 rounded-lg">
1070
+ <h3 class="text-xl font-semibold mb-4 text-red-400"><i class="fas fa-route mr-2"></i>Follow-Up Hooks</h3>
1071
+ <p class="mb-4">Ideas for continuing the story into a chronicle:</p>
1072
+ <ul class="list-disc pl-5 space-y-2">
1073
+ <li><strong>Blood Debts:</strong> Jiangshi demands service for the "gift" of the Embrace.</li>
1074
+ <li><strong>Anarch Recruitment:</strong> The cell offers protection from the Camarilla.</li>
1075
+ <li><strong>Sire's Agenda:</strong> The mysterious Sire has tasks for their childer.</li>
1076
+ <li><strong>Mortal Lives:</strong> Dealing with former Touchstones and identities.</li>
1077
+ <li><strong>The Package:</strong> What was really in that return package?</li>
1078
+ </ul>
1079
+ </div>
1080
+ </div>
1081
+ </section>
1082
+ </div>
1083
+
1084
+ <!-- Footer -->
1085
+ <footer class="mt-16 text-center text-sm text-gray-500">
1086
+ <p>Belleville Nocturne - A Vampire: The Masquerade V5 Scenario</p>
1087
+ <p class="mt-2">© 2023 Storyteller's Vault</p>
1088
+ </footer>
1089
+ </div>
1090
+
1091
+ <script>
1092
+ // Smooth scrolling for navigation links
1093
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1094
+ anchor.addEventListener('click', function (e) {
1095
+ e.preventDefault();
1096
+
1097
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1098
+ behavior: 'smooth'
1099
+ });
1100
+ });
1101
+ });
1102
+
1103
+ // Add active class to current section in navigation
1104
+ const sections = document.querySelectorAll('section');
1105
+ const navLinks = document.querySelectorAll('nav a');
1106
+
1107
+ window.addEventListener('scroll', () => {
1108
+ let current = '';
1109
+
1110
+ sections.forEach(section => {
1111
+ const sectionTop = section.offsetTop;
1112
+ const sectionHeight = section.clientHeight;
1113
+
1114
+ if (pageYOffset >= (sectionTop - 300)) {
1115
+ current = section.getAttribute('id');
1116
+ }
1117
+ });
1118
+
1119
+ navLinks.forEach(link => {
1120
+ link.classList.remove('text-red-400');
1121
+ if (link.getAttribute('href').includes(current)) {
1122
+ link.classList.add('text-red-400');
1123
+ }
1124
+ });
1125
+ });
1126
+ </script>
1127
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ZoroaStrella/belleville-nocturne" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1128
+ </html>