-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
453 lines (433 loc) · 24.5 KB
/
Copy pathindex.html
File metadata and controls
453 lines (433 loc) · 24.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>idleVaction — from soggy shed to private island</title>
<!-- Generated holiday icon (tools/genart.mjs style bible; tight-crop master is icon-512.webp) -->
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/icon-16.png" />
<link rel="apple-touch-icon" href="assets/img/icon-180.png" />
<!-- Fully self-contained (Phase F / audit 5.8): the unpinned Spectre CDN link and the two
Google Fonts are gone. vendor.css carries the tiny button subset the game used;
typography rides the system stack (game.css font-family fallbacks). Zero third-party
origins at play time — the site works offline after first load. -->
<link rel="stylesheet" href="css/vendor.css" />
<link rel="stylesheet" href="css/game.css" />
</head>
<body>
<!-- Icon sprite (Phase 6C): hand-authored <symbol> defs, inlined so <use href="#ic-..."> resolves
with zero fetch/build step. Same markup as assets/img/icons/sprite.svg (kept there as the
hand-edited source/reference copy — no build step to inline it automatically; keep both in
sync when editing an icon). Hidden — this element renders nothing on its own. -->
<svg style="display:none" aria-hidden="true">
<symbol id="ic-home" viewBox="0 0 24 24"><!-- beach hut -->
<path d="M2 11 L12 4 L22 11" fill="none" stroke="#FFC800" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="5" y="11" width="14" height="9" rx="1.5" fill="#E8B979"/>
<rect x="10.5" y="15" width="3" height="5" rx="0.5" fill="#2B1E16"/>
</symbol>
<symbol id="ic-income" viewBox="0 0 24 24"><!-- rising bars -->
<rect x="3" y="14" width="4" height="7" rx="1" fill="#7ED957"/>
<rect x="10" y="9" width="4" height="12" rx="1" fill="#FFC800"/>
<rect x="17" y="4" width="4" height="17" rx="1" fill="#FF2E88"/>
</symbol>
<symbol id="ic-growth" viewBox="0 0 24 24"><!-- sprout -->
<path d="M12 21 V11" stroke="#2E7D24" stroke-width="2" stroke-linecap="round"/>
<path d="M12 12 C12 12 6 12 5 6 C11 6 12 12 12 12 Z" fill="#7ED957"/>
<path d="M12 13 C12 13 18 12 19 7 C13 7 12 13 12 13 Z" fill="#7ED957"/>
</symbol>
<symbol id="ic-legacy" viewBox="0 0 24 24"><!-- medal + ribbon -->
<circle cx="12" cy="9" r="6" fill="#FFC800"/>
<circle cx="12" cy="9" r="3" fill="#FFF6E9"/>
<path d="M8 14 L6 21 L12 18 L18 21 L16 14 Z" fill="#FF2E88"/>
</symbol>
<symbol id="ic-money" viewBox="0 0 24 24"><!-- banknote -->
<rect x="2" y="6" width="20" height="12" rx="2" fill="#7ED957"/>
<circle cx="12" cy="12" r="3.4" fill="#FFF6E9"/>
<circle cx="12" cy="12" r="1.6" fill="#FFC800"/>
</symbol>
<symbol id="ic-wallet" viewBox="0 0 24 24"><!-- bank-account wallet -->
<rect x="2" y="6" width="20" height="14" rx="3" fill="#E8B979"/>
<rect x="14" y="11" width="8" height="6" rx="1.5" fill="#FF2E88"/>
<circle cx="18" cy="14" r="1" fill="#FFF6E9"/>
</symbol>
<symbol id="ic-next" viewBox="0 0 24 24"><!-- chevron -->
<path d="M8 4 L17 12 L8 20" fill="none" stroke="#FF2E88" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="ic-comfort" viewBox="0 0 24 24"><!-- lounger + parasol -->
<path d="M12 2 V9" stroke="#E8B979" stroke-width="1.6" stroke-linecap="round"/>
<path d="M4 8 C4 4 20 4 20 8 Z" fill="#FF2E88"/>
<path d="M3 20 L9 13 L21 13 L15 20 Z" fill="#45C4FF"/>
</symbol>
<symbol id="ic-clout" viewBox="0 0 24 24"><!-- starburst -->
<path d="M12 2 L14.2 9.8 L22 12 L14.2 14.2 L12 22 L9.8 14.2 L2 12 L9.8 9.8 Z" fill="#FF2E88"/>
<circle cx="18.5" cy="5.5" r="1.6" fill="#FFC800"/>
</symbol>
<symbol id="ic-story" viewBox="0 0 24 24"><!-- open storybook -->
<path d="M12 5 C9 3.5 5 3.5 2 5 V19 C5 17.5 9 17.5 12 19 Z" fill="#45C4FF"/>
<path d="M12 5 C15 3.5 19 3.5 22 5 V19 C19 17.5 15 17.5 12 19 Z" fill="#FFC800"/>
<path d="M12 5 V19" stroke="#2B1E16" stroke-width="1.2"/>
</symbol>
<symbol id="ic-am-backpack" viewBox="0 0 24 24">
<rect x="5" y="8" width="14" height="13" rx="4" fill="#E8B979"/>
<rect x="8" y="3" width="8" height="6" rx="3" fill="#7ED957"/>
<rect x="9" y="12" width="6" height="4" rx="1" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-beach" viewBox="0 0 24 24">
<circle cx="7" cy="7" r="4" fill="#FFC800"/>
<path d="M2 16 C6 13 10 19 14 16 C18 13 22 19 22 19" fill="none" stroke="#45C4FF" stroke-width="2" stroke-linecap="round"/>
</symbol>
<symbol id="ic-am-breakfast" viewBox="0 0 24 24">
<path d="M4 9 H16 V15 A6 6 0 0 1 4 15 Z" fill="#E8B979"/>
<path d="M16 10 C20 10 20 15 16 15" fill="none" stroke="#2B1E16" stroke-width="1.8"/>
<path d="M8 6 C7 4.5 9 3.5 8 2" fill="none" stroke="#FF2E88" stroke-width="1.6" stroke-linecap="round"/>
</symbol>
<symbol id="ic-am-butler" viewBox="0 0 24 24"><!-- bow tie -->
<path d="M3 8 L11 12 L3 16 Z" fill="#2B1E16"/>
<path d="M21 8 L13 12 L21 16 Z" fill="#2B1E16"/>
<circle cx="12" cy="12" r="2.4" fill="#FF2E88"/>
</symbol>
<symbol id="ic-am-cryptogear" viewBox="0 0 24 24"><!-- coin, up arrow -->
<circle cx="12" cy="12" r="9" fill="#FFC800"/>
<path d="M8 13 L12 7 L16 13 M12 8 V17" fill="none" stroke="#2B1E16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="ic-am-destination" viewBox="0 0 24 24"><!-- map pin -->
<path d="M12 2 C7 2 4 5.5 4 10 C4 15.5 12 22 12 22 C12 22 20 15.5 20 10 C20 5.5 17 2 12 2 Z" fill="#FF2E88"/>
<circle cx="12" cy="10" r="3.4" fill="#FFF6E9"/>
</symbol>
<symbol id="ic-am-gear" viewBox="0 0 24 24"><!-- camera -->
<rect x="2" y="7" width="20" height="13" rx="2.5" fill="#2B1E16"/>
<rect x="8" y="4" width="6" height="4" rx="1" fill="#2B1E16"/>
<circle cx="12" cy="13.5" r="4.4" fill="#45C4FF"/>
<circle cx="18" cy="10" r="1" fill="#FFC800"/>
</symbol>
<symbol id="ic-am-grounds" viewBox="0 0 24 24"><!-- tree -->
<rect x="10.5" y="14" width="3" height="7" rx="1" fill="#E8B979"/>
<circle cx="12" cy="9" r="7" fill="#7ED957"/>
</symbol>
<symbol id="ic-am-gym" viewBox="0 0 24 24"><!-- dumbbell -->
<rect x="6" y="10.5" width="12" height="3" rx="1" fill="#2B1E16"/>
<rect x="2" y="7" width="5" height="10" rx="1.5" fill="#FF2E88"/>
<rect x="17" y="7" width="5" height="10" rx="1.5" fill="#FF2E88"/>
</symbol>
<symbol id="ic-am-hostel" viewBox="0 0 24 24"><!-- bunk bed -->
<rect x="3" y="4" width="18" height="5" rx="1.2" fill="#45C4FF"/>
<rect x="3" y="14" width="18" height="5" rx="1.2" fill="#FFC800"/>
<rect x="3" y="4" width="3" height="15" rx="1" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-island" viewBox="0 0 24 24">
<ellipse cx="12" cy="19" rx="9" ry="2.6" fill="#FFC800"/>
<path d="M12 18 C12 18 12 6 7 4" fill="none" stroke="#E8B979" stroke-width="1.8" stroke-linecap="round"/>
<path d="M7 4 C4 3 3 6 5 8 C7 6 9 4 7 4 Z" fill="#7ED957"/>
</symbol>
<symbol id="ic-am-jet" viewBox="0 0 24 24">
<path d="M2 13 L18 9 L22 11 L18 13 L14 21 L11 20 L13 13.5 L6 15 L4 17 L2 16.5 L4 13.5 Z" fill="#45C4FF"/>
</symbol>
<symbol id="ic-am-luxury" viewBox="0 0 24 24"><!-- gem -->
<path d="M4 9 L12 3 L20 9 L12 21 Z" fill="#45C4FF"/>
<path d="M4 9 L20 9 L12 21 Z" fill="#FFF6E9" opacity="0.35"/>
</symbol>
<symbol id="ic-am-motel" viewBox="0 0 24 24"><!-- single bed -->
<rect x="2" y="13" width="20" height="7" rx="1.5" fill="#E8B979"/>
<rect x="4" y="9" width="7" height="5" rx="2" fill="#FFF6E9"/>
<rect x="2" y="13" width="2.5" height="8" rx="1" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-pool" viewBox="0 0 24 24">
<rect x="2" y="6" width="20" height="10" rx="3" fill="#45C4FF"/>
<path d="M2 19 C5 17.5 7 20.5 10 19 C13 17.5 15 20.5 18 19 C19.5 18.3 20.5 18.5 22 19" fill="none" stroke="#0E7FC0" stroke-width="1.8" stroke-linecap="round"/>
</symbol>
<symbol id="ic-am-property" viewBox="0 0 24 24"><!-- house, distinct from ic-home -->
<path d="M3 12 L12 4 L21 12 V20 H3 Z" fill="#E8B979"/>
<path d="M3 12 L12 4 L21 12" fill="none" stroke="#2E7D24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="10" y="14" width="4" height="6" rx="0.5" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-quarters" viewBox="0 0 24 24"><!-- door -->
<rect x="6" y="3" width="12" height="18" rx="1.5" fill="#E8B979"/>
<circle cx="15" cy="12" r="1.3" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-service" viewBox="0 0 24 24"><!-- bell -->
<path d="M4 17 C4 10 8 7 12 7 C16 7 20 10 20 17 Z" fill="#FFC800"/>
<rect x="3" y="17" width="18" height="2.4" rx="1.2" fill="#2B1E16"/>
<circle cx="12" cy="4.5" r="1.6" fill="#FF2E88"/>
</symbol>
<symbol id="ic-am-signature" viewBox="0 0 24 24"><!-- pen flourish -->
<path d="M2 17 C6 17 6 9 10 9 C13 9 10 19 14 19 C18 19 15 8 22 8" fill="none" stroke="#FF2E88" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="22" cy="6.5" r="1.4" fill="#FFC800"/>
</symbol>
<symbol id="ic-am-spa" viewBox="0 0 24 24"><!-- droplet -->
<path d="M12 2 C16 8 18 11 18 14.5 A6 6 0 0 1 6 14.5 C6 11 8 8 12 2 Z" fill="#45C4FF"/>
<path d="M9 14 C9 11 11 10 13 10" fill="none" stroke="#FFF6E9" stroke-width="1.4" stroke-linecap="round"/>
</symbol>
<symbol id="ic-am-suite" viewBox="0 0 24 24"><!-- armchair -->
<rect x="4" y="9" width="16" height="8" rx="2.5" fill="#FF2E88"/>
<rect x="4" y="4" width="16" height="6" rx="2.5" fill="#FFE7F1"/>
<rect x="2" y="12" width="3" height="8" rx="1.2" fill="#2B1E16"/>
<rect x="19" y="12" width="3" height="8" rx="1.2" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-tan" viewBox="0 0 24 24"><!-- sun -->
<circle cx="12" cy="12" r="5" fill="#FFC800"/>
<path d="M12 2 V5 M12 19 V22 M2 12 H5 M19 12 H22 M4.9 4.9 L7 7 M17 17 L19.1 19.1 M19.1 4.9 L17 7 M7 17 L4.9 19.1" stroke="#FFC800" stroke-width="2" stroke-linecap="round"/>
</symbol>
<symbol id="ic-am-wellness" viewBox="0 0 24 24"><!-- heart -->
<path d="M12 20 C4 14.5 2 10.5 4.5 7.2 C6.6 4.4 10.6 5 12 8 C13.4 5 17.4 4.4 19.5 7.2 C22 10.5 20 14.5 12 20 Z" fill="#FF2E88"/>
</symbol>
<symbol id="ic-am-yacht" viewBox="0 0 24 24">
<path d="M3 15 H21 L18 21 H6 Z" fill="#45C4FF"/>
<path d="M12 14 V3 L18 14 Z" fill="#FFF6E9"/>
<rect x="11.3" y="3" width="1.4" height="11" fill="#2B1E16"/>
</symbol>
<!-- Phase 6A path-exclusive amenity tags (js/data/amenities.js) -->
<symbol id="ic-am-vlogkit" viewBox="0 0 24 24"><!-- ring light + phone -->
<circle cx="12" cy="12" r="9" fill="none" stroke="#FF2E88" stroke-width="2.4"/>
<rect x="9" y="7" width="6" height="10" rx="1.5" fill="#2B1E16"/>
<circle cx="12" cy="15" r="1" fill="#45C4FF"/>
</symbol>
<symbol id="ic-am-cryptodesk" viewBox="0 0 24 24"><!-- framed candle chart -->
<rect x="3" y="4" width="18" height="14" rx="2" fill="#FFF6E9" stroke="#FFC800" stroke-width="2"/>
<path d="M6 14 L9 9 L12 12 L15 6 L18 10" fill="none" stroke="#2B1E16" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="9" y="18" width="6" height="3" rx="1" fill="#E8B979"/>
</symbol>
<symbol id="ic-am-wanderkit" viewBox="0 0 24 24"><!-- compass -->
<circle cx="12" cy="12" r="9" fill="#7ED957"/>
<path d="M15 8 L11 13 L9 16 L13 11 Z" fill="#FFF6E9"/>
<circle cx="12" cy="12" r="1.4" fill="#2B1E16"/>
</symbol>
<symbol id="ic-am-atelier" viewBox="0 0 24 24"><!-- framed canvas + easel -->
<rect x="3" y="3" width="18" height="14" rx="1.5" fill="#E8B979"/>
<rect x="5.5" y="5.5" width="13" height="9" fill="#45C4FF"/>
<path d="M9 21 L12 17 L15 21 Z" fill="#2B1E16"/>
</symbol>
</svg>
<header id="topbar">
<div class="iv-topbar-row">
<div>
<h1>🏝️ idleVaction <small>prototype</small></h1>
<div id="hdr" class="iv-header"></div>
</div>
<!-- The wallet (redesign): cash + wallet-fill at a glance, top right. Clicking opens the
financial modal — the old Bank Account card moved in there wholesale. -->
<button id="walletBtn" class="iv-wallet-chip" data-action="open-wallet"
aria-label="Wallet — open financial overview" title="Your wallet — tap for the full financial picture"></button>
</div>
</header>
<div id="onboarding" class="iv-onboarding" hidden></div>
<div id="notifs" class="iv-notifs"></div>
<!-- Story row (redesign v3): stacked, not side-by-side. The story collapses to a slim bar
("The story so far…") that opens the Travel Diary; accommodation (current digs + ladder)
sits below it, full width. -->
<div class="iv-story-strip iv-story-row">
<div id="story"></div>
<section class="iv-card" id="accCard"><h3 id="accTitle">🏨 Accommodation</h3><div id="accommodation"></div></section>
</div>
<!-- Splurge Moments (Living-World W2): sits outside the tab system, like the story strip, so a
time-boxed choice card is never missed just because another tab is open. Hidden whenever
nothing is pending — see ui.renderSplurge (it IS the reveal, no separate gate). -->
<div id="splurgeCard" class="iv-card iv-splurge-card" hidden>
<div id="splurgeAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="splurge"></div>
</div>
<!-- Legacy Honeymoon (Living-World W3, docs/08 point 8): a decaying post-ascension income
surge through the shared effects registry — hidden unless it's live. Sits outside the tab
system, like the splurge card above, so it's never missed regardless of active tab. -->
<div id="honeymoonBanner" class="iv-event-banner" hidden></div>
<!-- Tab bar (rendered by ui.renderTabs — only tabs with unlocked content appear: the future stays hidden). -->
<nav id="tabbar" class="iv-tabbar" role="tablist" aria-label="Sections"></nav>
<main id="tabpanels">
<div class="iv-tabpanel iv-grid" data-tab="home" role="tabpanel">
<!-- Your Road (docs/10 §2.1, Phase 4 UI): the committed path's staged goals, top of
Home. Always present (no [hidden] — ui.renderYourRoad swaps in a spoiler-free
teaser before commitment, the live goal bars after). tabindex="-1" lets the
Accommodation panel's path-gate hint (ui.js 'scroll-to-road') focus it programmatically
without adding it to the tab order. -->
<section class="iv-card iv-wide" id="yourRoadCard" tabindex="-1">
<h3>🧭 Your Road</h3>
<div id="yourRoad"></div>
</section>
<!-- Overview (docs/10 §2.2): income ladder + amenities merged under one shared header,
directly beneath Your Road — the two everyday panels reading as one home screen. -->
<section class="iv-card iv-wide" id="overviewCard">
<h3>📋 Overview</h3>
<div class="iv-tag"><svg class="ic" aria-hidden="true" focusable="false"><use href="#ic-income"></use></svg> income tiers</div>
<div id="generators"></div>
<div class="iv-tag">🛎️ amenities <small>(small wins)</small></div>
<div id="amenities"></div>
</section>
<!-- Trip Events banner (Living-World W1): hidden while CONFIG.EVENTS.enabled is false
(this wave's shipped default) or before story beat 3 — see ui.eventsRevealed. -->
<section class="iv-card iv-wide" id="eventsCard" hidden>
<h3>🍹 Trip Events</h3>
<div id="eventsAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="events"></div>
</section>
<!-- Sunscreen Boosts (Living-World W2): hidden until story.beat >= BOOSTS.minBeat — see
ui.boostsRevealed. Player-fired timed multipliers on the shared effects registry. -->
<section class="iv-card iv-wide" id="boostsCard" hidden>
<h3>🧴 Sunscreen Boosts</h3>
<div id="boostsAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="boosts"></div>
</section>
<!-- Petra, the Pace Ghost (Living-World W4, docs/08 point 10): display-only pace-compare
strip, hidden until story.beat >= 4 — see ui.renderPetra / E.petraRevealed. -->
<section class="iv-card" id="petraCard" hidden>
<h3>🧳 Petra</h3>
<div id="petra"></div>
</section>
<section class="iv-card iv-wide" id="poolCard" hidden>
<h3>🏊 Poolside</h3>
<div id="poolAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="poolside"></div>
</section>
<section class="iv-card iv-wide" id="beachCard" hidden>
<h3>🏖️ Beachfront</h3>
<div id="beachAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="beachfront"></div>
</section>
<section class="iv-card iv-wide" id="wellnessCard" hidden>
<h3>💪🧖 Wellness Wing</h3>
<div id="wellnessAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="wellness"></div>
</section>
<section class="iv-card iv-wide" id="conciergeCard" hidden>
<h3>🛎️ Concierge Desk</h3>
<div id="conciergeAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="concierge"></div>
</section>
<section class="iv-card iv-wide" id="propertyCard" hidden>
<h3>🏡 Property</h3>
<div id="propertyAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="property"></div>
</section>
<section class="iv-card iv-wide" id="islandListingCard" hidden>
<h3>🏝️ The Island Listing</h3>
<div id="islandListingAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="islandListing"></div>
</section>
<!-- Souvenir Stand (Living-World W3, docs/08 point 6): the first souvenir IS the reveal —
hidden until state.souvenirs.count > 0. See ui.renderSouvenirs. -->
<section class="iv-card iv-wide" id="souvenirCard" hidden>
<h3>🎁 Souvenir Stand</h3>
<div id="souvenirAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="souvenir"></div>
</section>
</div>
<div class="iv-tabpanel iv-grid" data-tab="income" role="tabpanel" hidden>
<!-- The income ladder itself moved into the Home tab's Overview section (docs/10 §2.2);
this tab now holds the advanced per-system income panels only. -->
<section class="iv-card iv-wide" id="creatorCard" hidden>
<h3>📸 Creator Dashboard</h3>
<div id="creatorAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="creator"></div>
</section>
<section class="iv-card iv-wide" id="cryptoCard" hidden>
<h3>📈 Crypto Poolside Lounge</h3>
<div id="cryptoAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="crypto"></div>
</section>
<section class="iv-card iv-wide" id="collectionCard" hidden>
<h3>🖼️ The Gallery & Cellar</h3>
<div id="collectionAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="collection"></div>
</section>
<section class="iv-card iv-wide" id="staffCard" hidden>
<h3>🔔 Staff</h3>
<div id="staffAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="staff"></div>
</section>
</div>
<div class="iv-tabpanel iv-grid" data-tab="travel" role="tabpanel" hidden>
<section class="iv-card iv-wide" id="destCard" hidden><h3>🌍 Destinations</h3><div id="destinations"></div></section>
<section class="iv-card" id="transportCard" hidden><h3>🚌 Getting Around</h3><div id="transport"></div></section>
<section class="iv-card iv-wide" id="garageCard" hidden>
<h3>🔑 The Garage</h3>
<div id="garageAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="garage"></div>
</section>
<section class="iv-card iv-wide" id="marinaCard" hidden>
<h3>⛵ The Marina</h3>
<div id="marinaAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="marina"></div>
</section>
<section class="iv-card iv-wide" id="hangarCard" hidden>
<h3>✈️ The Hangar</h3>
<div id="hangarAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="hangar"></div>
</section>
</div>
<div class="iv-tabpanel iv-grid" data-tab="growth" role="tabpanel" hidden>
<section class="iv-card" id="skillsCard">
<h3>💪 Personal Growth</h3>
<div id="skillAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="skills"></div>
</section>
<section class="iv-card" id="pathsCard"><h3>🧭 Build Paths</h3><div id="paths"></div></section>
</div>
<div class="iv-tabpanel iv-grid" data-tab="legacy" role="tabpanel" hidden>
<section class="iv-card" id="ascensionCard"><h3>✨ Ascension</h3><div id="ascension"></div></section>
<section class="iv-card iv-wide" id="treeCard"><h3>🌳 Permanent Skill Tree</h3><div id="tree"></div></section>
<section class="iv-card iv-wide" id="legendCard" hidden>
<h3>👑 Legend & New Game+</h3>
<div id="legendAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="legend"></div>
</section>
<section class="iv-card iv-wide" id="achievementsCard">
<h3>🏆 Trophies & Statistics</h3>
<div id="achievementsAnnounce" class="iv-sr-only" aria-live="polite"></div>
<div id="achievements"></div>
</section>
</div>
</main>
<footer id="controls" class="iv-controls"></footer>
<!-- The financial modal (redesign): replaces the Home bank card — opened from the wallet
chip in the header. Simple money UX: income, wallet fill, the upgrade, the ledger. -->
<div id="walletModal" class="iv-modal-overlay" hidden>
<div class="iv-modal" role="dialog" aria-modal="true" aria-label="Your finances">
<h3 id="bankTitle">🏦 Wallet</h3>
<div id="bank"></div>
<button class="btn btn-sm iv-btn" data-action="close-wallet">Done</button>
</div>
</div>
<div id="offlineModal" class="iv-modal-overlay" hidden>
<div class="iv-modal">
<h3>🌴 While You Were Away</h3>
<div id="offlineModalBody"></div>
<button class="btn btn-sm iv-btn" data-action="dismiss-offline">Got it</button>
</div>
</div>
<!-- Era modals (UX-plan §4, T1): the ten big moments get a postcard takeover — retirement,
the island offer/SOLD, Legend, New Game+, naming the tourist… — replacing every browser
confirm()/prompt(). Content is set once by ui.showEra; the render loop never touches it. -->
<div id="eraModal" class="iv-modal-overlay" hidden>
<div class="iv-modal iv-era" role="dialog" aria-modal="true" aria-label="A big moment">
<div id="eraBody"></div>
</div>
</div>
<!-- The Travel Diary (UX-plan §3/§6): every story beat you've lived, as journal pages.
Only SEEN beats render — the future stays a secret (Reveal Doctrine R1). -->
<div id="diaryModal" class="iv-modal-overlay" hidden>
<div class="iv-modal iv-diary" role="dialog" aria-label="Travel diary">
<h3>📔 Travel Diary</h3>
<div id="diaryBody"></div>
<button class="btn btn-sm iv-btn btn-primary" data-action="close-diary">Close the diary</button>
</div>
</div>
<!-- Passport spread (Task 1, U4 "the headline feature"): inside.webp as the page background
with earned stamps overlaid at deterministic slots; opened from the Travel tab. -->
<div id="passportModal" class="iv-modal-overlay" hidden>
<div class="iv-modal iv-passport-modal" role="dialog" aria-modal="true" aria-label="Your passport">
<div class="iv-passport-header">
<h3>📔 Passport</h3>
<button class="btn btn-sm iv-btn" data-action="close-passport" aria-label="Close passport">✕</button>
</div>
<div id="passportBody"></div>
</div>
</div>
<!-- The Golden Goat (Living-World W1): a floating button, hidden unless engine.goatVisible
says a `goat`-kind Trip Event actually spawned one — see ui.renderGoat. -->
<button id="goatBtn" class="iv-goat-btn" type="button" hidden
aria-label="A goat wandered by — greet it!" data-action="tap-goat">🐐</button>
<!-- ES modules; served over HTTPS by GitHub Pages. For LOCAL testing use a server
(npm run serve) — file:// blocks module loading. -->
<script type="module" src="js/main.js"></script>
<noscript>idleVaction needs JavaScript enabled.</noscript>
</body>
</html>