diff --git a/simulator.html b/simulator.html
new file mode 100644
index 0000000..092ca88
--- /dev/null
+++ b/simulator.html
@@ -0,0 +1,1243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LifeSim — Simulate Your Story</title>
+  <style>
+    /* ── Reset & base ─────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:        #0d1117;
+      --surface:   #161b22;
+      --surface2:  #21262d;
+      --border:    #30363d;
+      --accent:    #58a6ff;
+      --accent2:   #bc8cff;
+      --green:     #3fb950;
+      --yellow:    #d29922;
+      --red:       #f85149;
+      --orange:    #e3700a;
+      --text:      #e6edf3;
+      --muted:     #8b949e;
+      --radius:    10px;
+      --header-h:  60px;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    /* ── Typography helpers ───────────────────────────────────── */
+    h1 { font-size: 1.5rem; font-weight: 700; }
+    h2 { font-size: 1rem;   font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
+    h3 { font-size: .9rem;  font-weight: 600; }
+    p  { font-size: .85rem; line-height: 1.5; color: var(--muted); }
+
+    /* ── Header ──────────────────────────────────────────────── */
+    header {
+      height: var(--header-h);
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1.5rem;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .logo { display: flex; align-items: center; gap: .6rem; }
+    .logo-icon {
+      width: 32px; height: 32px; border-radius: 8px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1rem;
+    }
+    .logo h1 { font-size: 1.15rem; }
+    .logo span { color: var(--accent); }
+
+    .header-meta {
+      display: flex; align-items: center; gap: 1rem;
+    }
+    .chip {
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: .2rem .75rem;
+      font-size: .75rem;
+      color: var(--muted);
+      display: flex; align-items: center; gap: .4rem;
+    }
+    .chip .dot {
+      width: 7px; height: 7px; border-radius: 50%;
+      background: var(--green);
+      box-shadow: 0 0 6px var(--green);
+    }
+
+    /* ── Layout ──────────────────────────────────────────────── */
+    .app {
+      display: grid;
+      grid-template-columns: 280px 1fr 260px;
+      grid-template-rows: auto 1fr;
+      min-height: calc(100vh - var(--header-h));
+    }
+
+    /* ── Panel shared styles ─────────────────────────────────── */
+    .panel {
+      padding: 1.25rem;
+      border-right: 1px solid var(--border);
+      overflow-y: auto;
+    }
+    .panel:last-child { border-right: none; border-left: 1px solid var(--border); }
+
+    /* ── Card ────────────────────────────────────────────────── */
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    /* ── Character card ──────────────────────────────────────── */
+    .char-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: .5rem;
+    }
+    .avatar-wrap { position: relative; }
+    .avatar {
+      width: 80px; height: 80px; border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      display: flex; align-items: center; justify-content: center;
+      font-size: 2.2rem;
+      border: 3px solid var(--border);
+    }
+    .age-badge {
+      position: absolute; bottom: 2px; right: -4px;
+      background: var(--accent);
+      color: #000; font-size: .65rem; font-weight: 700;
+      border-radius: 10px; padding: .1rem .4rem;
+    }
+    .char-name { font-size: 1.1rem; font-weight: 700; }
+    .char-stage {
+      font-size: .75rem; color: var(--accent2);
+      background: color-mix(in srgb, var(--accent2) 12%, transparent);
+      border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
+      border-radius: 20px; padding: .15rem .6rem;
+    }
+    .char-meta { font-size: .8rem; color: var(--muted); }
+
+    /* ── Stat bars ───────────────────────────────────────────── */
+    .stat-row {
+      display: flex; align-items: center; gap: .6rem;
+      margin-bottom: .6rem;
+    }
+    .stat-label {
+      width: 80px; font-size: .75rem; color: var(--muted);
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: .3rem;
+    }
+    .stat-bar-wrap {
+      flex: 1; height: 6px; background: var(--surface2);
+      border-radius: 3px; overflow: hidden;
+    }
+    .stat-bar {
+      height: 100%; border-radius: 3px;
+      transition: width .5s ease;
+    }
+    .stat-val { font-size: .7rem; color: var(--muted); width: 28px; text-align: right; flex-shrink: 0; }
+
+    .bar-health  { background: var(--green); }
+    .bar-happy   { background: var(--yellow); }
+    .bar-energy  { background: var(--accent); }
+    .bar-smart   { background: var(--accent2); }
+    .bar-wealth  { background: var(--orange); }
+
+    /* ── Net worth ticker ────────────────────────────────────── */
+    .wealth-card {
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .wealth-amount { font-size: 1.3rem; font-weight: 700; color: var(--orange); }
+    .wealth-delta  { font-size: .75rem; color: var(--green); }
+
+    /* ── Timeline / main ─────────────────────────────────────── */
+    .main-panel {
+      display: flex; flex-direction: column;
+      padding: 0;
+      background: var(--bg);
+      overflow-y: auto;
+    }
+
+    .year-bar {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: .75rem 1.5rem;
+      display: flex; align-items: center; gap: 1rem;
+    }
+    .year-label { font-size: .8rem; color: var(--muted); }
+    .year-value { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
+    .year-progress-wrap { flex: 1; height: 4px; background: var(--surface2); border-radius: 2px; }
+    .year-progress { height: 100%; border-radius: 2px; background: var(--accent); transition: width .4s; }
+
+    .actions-bar {
+      padding: 1rem 1.5rem;
+      display: flex; flex-wrap: wrap; gap: .6rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .btn {
+      display: flex; align-items: center; gap: .4rem;
+      padding: .45rem .9rem;
+      border-radius: 6px;
+      font-size: .8rem; font-weight: 600;
+      border: 1px solid var(--border);
+      background: var(--surface2);
+      color: var(--text);
+      cursor: pointer;
+      transition: background .15s, transform .1s, border-color .15s;
+      user-select: none;
+    }
+    .btn:hover  { background: var(--surface); border-color: var(--accent); }
+    .btn:active { transform: scale(.96); }
+    .btn.primary { background: var(--accent); border-color: var(--accent); color: #000; }
+    .btn.primary:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); }
+    .btn.danger  { border-color: var(--red); color: var(--red); }
+    .btn.danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
+    .btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
+
+    /* ── Event feed ──────────────────────────────────────────── */
+    .feed { padding: 1rem 1.5rem; flex: 1; }
+    .feed-title {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 1rem;
+    }
+
+    .event-item {
+      display: flex; gap: .8rem;
+      padding: .8rem 0;
+      border-bottom: 1px solid var(--border);
+      animation: slideIn .3s ease;
+    }
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(-8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .event-icon {
+      width: 34px; height: 34px; border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1rem; flex-shrink: 0;
+    }
+    .event-body { flex: 1; }
+    .event-title { font-size: .85rem; font-weight: 600; margin-bottom: .15rem; }
+    .event-desc  { font-size: .78rem; color: var(--muted); line-height: 1.4; }
+    .event-meta  { font-size: .7rem; color: var(--muted); margin-top: .2rem; }
+    .event-tag {
+      display: inline-block;
+      font-size: .65rem; font-weight: 600;
+      border-radius: 4px; padding: .1rem .35rem;
+      margin-left: .4rem; vertical-align: middle;
+    }
+    .tag-good { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
+    .tag-bad  { background: color-mix(in srgb, var(--red) 15%, transparent);   color: var(--red); }
+    .tag-info { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
+    .tag-warn { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); }
+
+    /* ── Right panel: relations & career ─────────────────────── */
+    .right-panel { border-left: 1px solid var(--border); padding: 1.25rem; overflow-y: auto; }
+
+    .section-head {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: .75rem;
+    }
+
+    /* ── Relationship cards ───────────────────────────────────── */
+    .rel-item {
+      display: flex; align-items: center; gap: .65rem;
+      padding: .55rem 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .rel-item:last-child { border-bottom: none; }
+    .rel-avatar {
+      width: 34px; height: 34px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1rem; flex-shrink: 0;
+    }
+    .rel-info { flex: 1; }
+    .rel-name { font-size: .82rem; font-weight: 600; }
+    .rel-type { font-size: .7rem; color: var(--muted); }
+    .rel-heart {
+      font-size: .7rem; color: var(--red);
+      display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
+    }
+    .mini-bar-wrap { width: 40px; height: 4px; background: var(--surface2); border-radius: 2px; }
+    .mini-bar { height: 100%; border-radius: 2px; background: var(--red); }
+
+    /* ── Career card ─────────────────────────────────────────── */
+    .career-row { display: flex; flex-direction: column; gap: .4rem; }
+    .career-name { font-size: .95rem; font-weight: 700; }
+    .career-company { font-size: .78rem; color: var(--muted); }
+    .career-meta { display: flex; gap: .8rem; margin-top: .2rem; }
+    .career-stat { font-size: .72rem; color: var(--muted); }
+    .career-stat span { color: var(--text); font-weight: 600; }
+
+    /* ── Skills ──────────────────────────────────────────────── */
+    .skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
+    .skill-pill {
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 6px; padding: .4rem .6rem;
+      font-size: .72rem;
+    }
+    .skill-pill-name { font-weight: 600; margin-bottom: .25rem; }
+    .skill-pill-bar-wrap { height: 3px; background: var(--bg); border-radius: 2px; }
+    .skill-pill-bar { height: 100%; border-radius: 2px; background: var(--accent2); }
+
+    /* ── Life stage strip ────────────────────────────────────── */
+    .stages-strip {
+      display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem;
+    }
+    .stage-dot {
+      width: 28px; height: 28px; border-radius: 50%;
+      border: 2px solid var(--border);
+      display: flex; align-items: center; justify-content: center;
+      font-size: .75rem; cursor: default;
+      transition: border-color .2s;
+    }
+    .stage-dot.done  { border-color: var(--green);  background: color-mix(in srgb, var(--green) 15%, transparent); }
+    .stage-dot.active{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
+
+    /* ── Milestones ──────────────────────────────────────────── */
+    .milestone {
+      display: flex; align-items: center; gap: .6rem;
+      padding: .5rem 0; border-bottom: 1px solid var(--border);
+      font-size: .8rem;
+    }
+    .milestone:last-child { border-bottom: none; }
+    .milestone .check { font-size: .9rem; }
+    .milestone.locked { color: var(--muted); }
+
+    /* ── Modal overlay ───────────────────────────────────────── */
+    .modal-overlay {
+      position: fixed; inset: 0; z-index: 200;
+      background: rgba(0,0,0,.7);
+      display: flex; align-items: center; justify-content: center;
+      padding: 1rem;
+      opacity: 0; pointer-events: none;
+      transition: opacity .2s;
+    }
+    .modal-overlay.open { opacity: 1; pointer-events: all; }
+    .modal {
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 14px; padding: 1.5rem; max-width: 420px; width: 100%;
+      transform: translateY(20px); transition: transform .2s;
+    }
+    .modal-overlay.open .modal { transform: translateY(0); }
+    .modal h2 { font-size: 1.1rem; color: var(--text); text-transform: none; letter-spacing: 0; margin-bottom: .5rem; }
+    .modal p  { margin-bottom: 1rem; }
+    .modal-actions { display: flex; gap: .6rem; justify-content: flex-end; }
+
+    /* ── Toast ───────────────────────────────────────────────── */
+    #toast-container {
+      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300;
+      display: flex; flex-direction: column; gap: .5rem;
+    }
+    .toast {
+      background: var(--surface2); border: 1px solid var(--border);
+      border-radius: 8px; padding: .65rem 1rem;
+      font-size: .82rem; max-width: 280px;
+      display: flex; align-items: center; gap: .5rem;
+      animation: toastIn .25s ease, toastOut .3s ease 2.5s forwards;
+    }
+    @keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
+    @keyframes toastOut { to   { opacity: 0; transform: translateX(20px); } }
+
+    /* ── Responsive ──────────────────────────────────────────── */
+    @media (max-width: 900px) {
+      .app { grid-template-columns: 240px 1fr; }
+      .right-panel { display: none; }
+    }
+    @media (max-width: 600px) {
+      .app { grid-template-columns: 1fr; }
+      .panel { display: none; }
+    }
+
+    /* ── Scrollbars ──────────────────────────────────────────── */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  </style>
+</head>
+<body>
+
+<!-- ══ HEADER ════════════════════════════════════════════════════ -->
+<header>
+  <div class="logo">
+    <div class="logo-icon">🌱</div>
+    <h1>Life<span>Sim</span></h1>
+  </div>
+  <div class="header-meta">
+    <div class="chip"><div class="dot"></div> Live</div>
+    <button class="btn" id="btn-new-game">New Life</button>
+  </div>
+</header>
+
+<!-- ══ APP GRID ══════════════════════════════════════════════════ -->
+<div class="app">
+
+  <!-- LEFT: Character & stats ─────────────────────────────────── -->
+  <aside class="panel" id="left-panel">
+
+    <div class="card char-card">
+      <div class="avatar-wrap">
+        <div class="avatar" id="char-avatar">😊</div>
+        <div class="age-badge" id="char-age">18</div>
+      </div>
+      <div class="char-name" id="char-name">Alex Rivera</div>
+      <div class="char-stage" id="char-stage">Young Adult</div>
+      <div class="char-meta" id="char-meta">💼 Student &nbsp;|&nbsp; 📍 Hometown</div>
+    </div>
+
+    <!-- Stats -->
+    <div class="card">
+      <h2>Vitals</h2>
+      <div class="stat-row">
+        <div class="stat-label">❤️ Health</div>
+        <div class="stat-bar-wrap"><div class="stat-bar bar-health" id="bar-health" style="width:80%"></div></div>
+        <div class="stat-val" id="val-health">80</div>
+      </div>
+      <div class="stat-row">
+        <div class="stat-label">😄 Happy</div>
+        <div class="stat-bar-wrap"><div class="stat-bar bar-happy" id="bar-happy" style="width:70%"></div></div>
+        <div class="stat-val" id="val-happy">70</div>
+      </div>
+      <div class="stat-row">
+        <div class="stat-label">⚡ Energy</div>
+        <div class="stat-bar-wrap"><div class="stat-bar bar-energy" id="bar-energy" style="width:90%"></div></div>
+        <div class="stat-val" id="val-energy">90</div>
+      </div>
+      <div class="stat-row">
+        <div class="stat-label">🧠 Smart</div>
+        <div class="stat-bar-wrap"><div class="stat-bar bar-smart" id="bar-smart" style="width:55%"></div></div>
+        <div class="stat-val" id="val-smart">55</div>
+      </div>
+    </div>
+
+    <!-- Wealth -->
+    <div class="card">
+      <h2>Finances</h2>
+      <div class="wealth-card">
+        <div>
+          <div class="wealth-amount" id="wealth-amount">$2,400</div>
+          <div class="wealth-delta" id="wealth-delta">+$0 / yr</div>
+        </div>
+        <div style="font-size:2rem">💵</div>
+      </div>
+    </div>
+
+    <!-- Life stages -->
+    <div class="card">
+      <h2>Life Journey</h2>
+      <div class="stages-strip" id="stages-strip">
+        <div class="stage-dot done"   title="Childhood">👶</div>
+        <div class="stage-dot done"   title="Teen">🧒</div>
+        <div class="stage-dot active" title="Young Adult">🧑</div>
+        <div class="stage-dot"        title="Adult">🧔</div>
+        <div class="stage-dot"        title="Middle Age">👨</div>
+        <div class="stage-dot"        title="Senior">👴</div>
+      </div>
+      <p style="font-size:.75rem">Currently in <strong id="stage-label" style="color:var(--accent)">Young Adult</strong> stage</p>
+    </div>
+
+  </aside>
+
+  <!-- CENTRE: Timeline & actions ──────────────────────────────── -->
+  <main class="main-panel" id="main-panel">
+
+    <!-- Year bar -->
+    <div class="year-bar">
+      <div>
+        <div class="year-label">Current Year</div>
+        <div class="year-value" id="year-val">Year 1</div>
+      </div>
+      <div class="year-progress-wrap">
+        <div class="year-progress" id="year-progress" style="width:0%"></div>
+      </div>
+      <div class="chip">Age <strong id="age-chip">18</strong></div>
+      <button class="btn primary" id="btn-advance">⏩ Advance Year</button>
+    </div>
+
+    <!-- Quick actions -->
+    <div class="actions-bar">
+      <button class="btn" data-action="work"     title="Earn money & gain experience">💼 Work</button>
+      <button class="btn" data-action="study"    title="Increase intelligence">📚 Study</button>
+      <button class="btn" data-action="exercise" title="Improve health">🏃 Exercise</button>
+      <button class="btn" data-action="socialize"title="Boost happiness & relationships">🎉 Socialize</button>
+      <button class="btn" data-action="rest"     title="Restore energy">😴 Rest</button>
+      <button class="btn" data-action="invest"   title="Grow wealth">📈 Invest</button>
+      <button class="btn" data-action="travel"   title="Boost happiness, costs money">✈️ Travel</button>
+      <button class="btn" data-action="meditate" title="Balance all stats">🧘 Meditate</button>
+    </div>
+
+    <!-- Event feed -->
+    <div class="feed">
+      <div class="feed-title">
+        <h2 style="margin:0">Life Events</h2>
+        <button class="btn" id="btn-clear" style="padding:.25rem .6rem;font-size:.72rem">Clear log</button>
+      </div>
+      <div id="event-feed"></div>
+    </div>
+
+  </main>
+
+  <!-- RIGHT: Relationships, career & skills ───────────────────── -->
+  <aside class="right-panel" id="right-panel">
+
+    <!-- Career -->
+    <div class="card">
+      <h2>Career</h2>
+      <div class="career-row" id="career-row">
+        <div class="career-name" id="career-title">Student</div>
+        <div class="career-company" id="career-company">State University</div>
+        <div class="career-meta">
+          <div class="career-stat">Salary <span id="career-salary">$0</span></div>
+          <div class="career-stat">Exp <span id="career-exp">0 yrs</span></div>
+          <div class="career-stat">Level <span id="career-level">Entry</span></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Relationships -->
+    <div class="card">
+      <div class="section-head">
+        <h2 style="margin:0">Relationships</h2>
+        <button class="btn" id="btn-meet" style="padding:.2rem .55rem;font-size:.72rem">+ Meet</button>
+      </div>
+      <div id="rel-list">
+        <div class="rel-item">
+          <div class="rel-avatar" style="background:color-mix(in srgb,#58a6ff 20%,#161b22)">😊</div>
+          <div class="rel-info">
+            <div class="rel-name">Maria R.</div>
+            <div class="rel-type">Best Friend</div>
+          </div>
+          <div class="rel-heart">
+            ♥ 88
+            <div class="mini-bar-wrap"><div class="mini-bar" style="width:88%"></div></div>
+          </div>
+        </div>
+        <div class="rel-item">
+          <div class="rel-avatar" style="background:color-mix(in srgb,#3fb950 20%,#161b22)">👨</div>
+          <div class="rel-info">
+            <div class="rel-name">Dad</div>
+            <div class="rel-type">Family</div>
+          </div>
+          <div class="rel-heart">
+            ♥ 75
+            <div class="mini-bar-wrap"><div class="mini-bar" style="width:75%"></div></div>
+          </div>
+        </div>
+        <div class="rel-item">
+          <div class="rel-avatar" style="background:color-mix(in srgb,#e3700a 20%,#161b22)">👩</div>
+          <div class="rel-info">
+            <div class="rel-name">Mom</div>
+            <div class="rel-type">Family</div>
+          </div>
+          <div class="rel-heart">
+            ♥ 82
+            <div class="mini-bar-wrap"><div class="mini-bar" style="width:82%"></div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Skills -->
+    <div class="card">
+      <h2>Skills</h2>
+      <div class="skill-grid" id="skill-grid">
+        <div class="skill-pill">
+          <div class="skill-pill-name">Writing</div>
+          <div class="skill-pill-bar-wrap"><div class="skill-pill-bar" id="sk-writing" style="width:30%"></div></div>
+        </div>
+        <div class="skill-pill">
+          <div class="skill-pill-name">Coding</div>
+          <div class="skill-pill-bar-wrap"><div class="skill-pill-bar" id="sk-coding" style="width:15%"></div></div>
+        </div>
+        <div class="skill-pill">
+          <div class="skill-pill-name">Fitness</div>
+          <div class="skill-pill-bar-wrap"><div class="skill-pill-bar" id="sk-fitness" style="width:40%"></div></div>
+        </div>
+        <div class="skill-pill">
+          <div class="skill-pill-name">Cooking</div>
+          <div class="skill-pill-bar-wrap"><div class="skill-pill-bar" id="sk-cooking" style="width:20%"></div></div>
+        </div>
+        <div class="skill-pill">
+          <div class="skill-pill-name">Music</div>
+          <div class="skill-pill-bar-wrap"><div class="skill-pill-bar" id="sk-music" style="width:10%"></div></div>
+        </div>
+        <div class="skill-pill">
+          <div class="skill-pill-name">Finance</div>
+          <div class="skill-pill-bar-wrap"><div class="skill-pill-bar" id="sk-finance" style="width:5%"></div></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Milestones -->
+    <div class="card">
+      <h2>Milestones</h2>
+      <div id="milestones">
+        <div class="milestone locked"><span class="check">⬜</span> Graduate university</div>
+        <div class="milestone locked"><span class="check">⬜</span> Land first job</div>
+        <div class="milestone locked"><span class="check">⬜</span> Buy a house</div>
+        <div class="milestone locked"><span class="check">⬜</span> Find a partner</div>
+        <div class="milestone locked"><span class="check">⬜</span> Start a family</div>
+        <div class="milestone locked"><span class="check">⬜</span> Reach $100k wealth</div>
+        <div class="milestone locked"><span class="check">⬜</span> Become a manager</div>
+        <div class="milestone locked"><span class="check">⬜</span> Travel the world</div>
+      </div>
+    </div>
+
+  </aside>
+</div>
+
+<!-- ══ MODAL: New game ════════════════════════════════════════════ -->
+<div class="modal-overlay" id="new-game-modal">
+  <div class="modal">
+    <h2>🌱 Start a New Life</h2>
+    <p>Choose your character and begin a new simulation. All current progress will be lost.</p>
+    <div style="display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.2rem">
+      <div>
+        <label style="font-size:.8rem;color:var(--muted);display:block;margin-bottom:.3rem">Name</label>
+        <input id="ng-name" type="text" value="Alex Rivera"
+          style="width:100%;padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.9rem;outline:none" />
+      </div>
+      <div>
+        <label style="font-size:.8rem;color:var(--muted);display:block;margin-bottom:.3rem">Avatar</label>
+        <div style="display:flex;gap:.5rem;flex-wrap:wrap" id="avatar-picker">
+          <span class="avatar-opt" data-em="😊" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid var(--accent)">😊</span>
+          <span class="avatar-opt" data-em="😎" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">😎</span>
+          <span class="avatar-opt" data-em="🤓" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">🤓</span>
+          <span class="avatar-opt" data-em="🧑‍🎨" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">🧑‍🎨</span>
+          <span class="avatar-opt" data-em="🧑‍💻" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">🧑‍💻</span>
+          <span class="avatar-opt" data-em="🧑‍🍳" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">🧑‍🍳</span>
+          <span class="avatar-opt" data-em="🧑‍🎤" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">🧑‍🎤</span>
+          <span class="avatar-opt" data-em="🦸" style="font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:6px;border:2px solid transparent">🦸</span>
+        </div>
+      </div>
+    </div>
+    <div class="modal-actions">
+      <button class="btn" id="ng-cancel">Cancel</button>
+      <button class="btn primary" id="ng-confirm">Begin Life</button>
+    </div>
+  </div>
+</div>
+
+<!-- ══ MODAL: Random event ════════════════════════════════════════ -->
+<div class="modal-overlay" id="event-modal">
+  <div class="modal">
+    <div id="ev-icon" style="font-size:2.5rem;margin-bottom:.5rem">🎲</div>
+    <h2 id="ev-title">Life Event</h2>
+    <p id="ev-desc">Something happened!</p>
+    <div class="modal-actions" id="ev-choices"></div>
+  </div>
+</div>
+
+<!-- ══ TOAST CONTAINER ════════════════════════════════════════════ -->
+<div id="toast-container"></div>
+
+<!-- ══ SCRIPT ════════════════════════════════════════════════════ -->
+<script>
+/* ── State ──────────────────────────────────────────────────── */
+const DEFAULT = {
+  name: 'Alex Rivera', avatar: '😊',
+  age: 18, year: 1,
+  health: 80, happy: 70, energy: 90, smart: 55,
+  wealth: 2400, income: 0,
+  careerTitle: 'Student', careerCompany: 'State University',
+  careerExp: 0, careerLevel: 'Entry', careerSalary: 0,
+  relationships: [
+    { name: 'Maria R.',  type: 'Best Friend', avatar: '😊', love: 88 },
+    { name: 'Dad',       type: 'Family',      avatar: '👨', love: 75 },
+    { name: 'Mom',       type: 'Family',      avatar: '👩', love: 82 },
+  ],
+  skills: { writing: 30, coding: 15, fitness: 40, cooking: 20, music: 10, finance: 5 },
+  milestones: {
+    graduated: false, firstJob: false, house: false,
+    partner: false, family: false, rich: false, manager: false, traveler: false
+  },
+  events: [],
+  stage: 'Young Adult',
+  stageIdx: 2,
+};
+
+let S = deepCopy(DEFAULT);
+
+function deepCopy(o) { return JSON.parse(JSON.stringify(o)); }
+
+/* ── Life stages ─────────────────────────────────────────────── */
+const STAGES = [
+  { label: 'Childhood',   icon: '👶', minAge: 0,  maxAge: 11 },
+  { label: 'Teen',        icon: '🧒', minAge: 12, maxAge: 17 },
+  { label: 'Young Adult', icon: '🧑', minAge: 18, maxAge: 29 },
+  { label: 'Adult',       icon: '🧔', minAge: 30, maxAge: 44 },
+  { label: 'Middle Age',  icon: '👨', minAge: 45, maxAge: 64 },
+  { label: 'Senior',      icon: '👴', minAge: 65, maxAge: 120 },
+];
+
+/* ── Career tracks ───────────────────────────────────────────── */
+const CAREERS = [
+  { title: 'Intern',        company: 'StartupCo',     salary: 18000  },
+  { title: 'Junior Dev',    company: 'TechCorp',      salary: 55000  },
+  { title: 'Developer',     company: 'TechCorp',      salary: 80000  },
+  { title: 'Senior Dev',    company: 'TechCorp',      salary: 110000 },
+  { title: 'Lead Engineer', company: 'MegaTech',      salary: 145000 },
+  { title: 'CTO',           company: 'Startup Alpha', salary: 200000 },
+];
+
+/* ── Random event pool ───────────────────────────────────────── */
+const EVENTS = [
+  {
+    icon: '🏆', title: 'Award Nomination',
+    desc: 'You were nominated for "Employee of the Year." Do you accept the spotlight?',
+    tag: 'info',
+    choices: [
+      { label: 'Accept 🎉', effect: { happy: 15, smart: 5 } },
+      { label: 'Decline',   effect: { energy: 5 } },
+    ]
+  },
+  {
+    icon: '💔', title: 'Friendship Drift',
+    desc: 'A close friend has moved away. Distance is straining the bond.',
+    tag: 'bad',
+    choices: [
+      { label: 'Stay in touch 📱', effect: { happy: -5, wealth: -200 } },
+      { label: 'Let it fade',      effect: { happy: -15 } },
+    ]
+  },
+  {
+    icon: '💡', title: 'Business Idea',
+    desc: 'You have a great idea for a side project. It could pay off — or cost you.',
+    tag: 'warn',
+    choices: [
+      { label: 'Pursue it 🚀', effect: { smart: 10, wealth: -500, happy: 10 } },
+      { label: 'Pass',         effect: { energy: 5 } },
+    ]
+  },
+  {
+    icon: '🏥', title: 'Health Scare',
+    desc: 'You\'ve been feeling unwell. A checkup reveals minor issues easily managed.',
+    tag: 'bad',
+    choices: [
+      { label: 'See a doctor 🩺', effect: { health: 10, wealth: -400 } },
+      { label: 'Ignore it',       effect: { health: -20 } },
+    ]
+  },
+  {
+    icon: '🎁', title: 'Unexpected Bonus',
+    desc: 'Your manager surprises you with a performance bonus!',
+    tag: 'good',
+    choices: [
+      { label: 'Save it 💰',  effect: { wealth: 2000 } },
+      { label: 'Celebrate 🥂', effect: { wealth: 500, happy: 20 } },
+    ]
+  },
+  {
+    icon: '🌍', title: 'Dream Vacation Offer',
+    desc: 'Friends invite you on a spontaneous trip abroad.',
+    tag: 'good',
+    choices: [
+      { label: 'Go for it ✈️',  effect: { happy: 25, health: 5, wealth: -1500 } },
+      { label: 'Stay home',      effect: { energy: 10 } },
+    ]
+  },
+  {
+    icon: '📰', title: 'Market Crash',
+    desc: 'Economic turmoil hits your investments hard.',
+    tag: 'bad',
+    choices: [
+      { label: 'Hold steady',    effect: { wealth: -800, happy: -10 } },
+      { label: 'Sell everything', effect: { wealth: -300, happy: -5 } },
+    ]
+  },
+  {
+    icon: '🤝', title: 'Networking Event',
+    desc: 'A professional mixer could open career doors.',
+    tag: 'info',
+    choices: [
+      { label: 'Attend 👔', effect: { smart: 5, careerExp: 1 } },
+      { label: 'Skip',      effect: { energy: 5 } },
+    ]
+  },
+];
+
+/* ── Action definitions ──────────────────────────────────────── */
+const ACTIONS = {
+  work: {
+    label: 'Worked hard',
+    effect: s => {
+      s.wealth += s.careerSalary > 0 ? Math.floor(s.careerSalary / 12) : 200;
+      s.energy = Math.max(0, s.energy - 15);
+      s.health = Math.max(0, s.health - 3);
+      s.careerExp += 0.25;
+      return `Earned income. Energy -15, Health -3, Exp +0.25`;
+    },
+    icon: '💼', tag: 'info'
+  },
+  study: {
+    label: 'Hit the books',
+    effect: s => {
+      s.smart = Math.min(100, s.smart + 8);
+      s.energy = Math.max(0, s.energy - 10);
+      s.skills.writing = Math.min(100, s.skills.writing + 3);
+      return `Intelligence +8, Energy -10`;
+    },
+    icon: '📚', tag: 'info'
+  },
+  exercise: {
+    label: 'Worked out',
+    effect: s => {
+      s.health = Math.min(100, s.health + 12);
+      s.energy = Math.max(0, s.energy - 15);
+      s.happy  = Math.min(100, s.happy + 5);
+      s.skills.fitness = Math.min(100, s.skills.fitness + 4);
+      return `Health +12, Happy +5, Energy -15`;
+    },
+    icon: '🏃', tag: 'good'
+  },
+  socialize: {
+    label: 'Went out with friends',
+    effect: s => {
+      s.happy  = Math.min(100, s.happy + 15);
+      s.energy = Math.max(0, s.energy - 10);
+      s.wealth = Math.max(0, s.wealth - 80);
+      s.relationships.forEach(r => r.love = Math.min(100, r.love + 5));
+      return `Happy +15, Energy -10, $80 spent`;
+    },
+    icon: '🎉', tag: 'good'
+  },
+  rest: {
+    label: 'Rested at home',
+    effect: s => {
+      s.energy = Math.min(100, s.energy + 30);
+      s.health = Math.min(100, s.health + 5);
+      return `Energy +30, Health +5`;
+    },
+    icon: '😴', tag: 'info'
+  },
+  invest: {
+    label: 'Invested savings',
+    effect: s => {
+      if (s.wealth < 500) return null;
+      const gain = Math.random() > .35
+        ? Math.floor(s.wealth * .08)
+        : -Math.floor(s.wealth * .04);
+      s.wealth = Math.max(0, s.wealth + gain);
+      s.skills.finance = Math.min(100, s.skills.finance + 3);
+      return gain >= 0 ? `Portfolio up $${gain}` : `Portfolio down $${Math.abs(gain)}`;
+    },
+    icon: '📈', tag: 'warn'
+  },
+  travel: {
+    label: 'Traveled abroad',
+    effect: s => {
+      if (s.wealth < 1200) return null;
+      s.wealth -= 1200;
+      s.happy   = Math.min(100, s.happy + 20);
+      s.energy  = Math.max(0, s.energy - 10);
+      s.health  = Math.min(100, s.health + 5);
+      if (!s.milestones.traveler) { s.milestones.traveler = true; }
+      return `Happy +20, $1,200 spent. Wonderful memories!`;
+    },
+    icon: '✈️', tag: 'good'
+  },
+  meditate: {
+    label: 'Meditated',
+    effect: s => {
+      ['health','happy','energy','smart'].forEach(k => {
+        s[k] = Math.min(100, Math.max(0, s[k] + 4));
+      });
+      return `All stats +4`;
+    },
+    icon: '🧘', tag: 'info'
+  },
+};
+
+/* ── DOM refs ────────────────────────────────────────────────── */
+const $ = id => document.getElementById(id);
+const feed = $('event-feed');
+
+/* ── Render ──────────────────────────────────────────────────── */
+function render() {
+  // Character
+  $('char-avatar').textContent = S.avatar;
+  $('char-age').textContent    = S.age;
+  $('char-name').textContent   = S.name;
+  $('char-stage').textContent  = S.stage;
+  $('char-meta').innerHTML     = `💼 ${S.careerTitle} &nbsp;|&nbsp; 📍 Hometown`;
+  $('age-chip').textContent    = S.age;
+
+  // Stats
+  setBar('health', S.health);
+  setBar('happy',  S.happy);
+  setBar('energy', S.energy);
+  setBar('smart',  S.smart);
+
+  // Wealth
+  $('wealth-amount').textContent = fmt(S.wealth);
+  $('wealth-delta').textContent  = `${S.income >= 0 ? '+' : ''}${fmt(S.income)} / yr`;
+
+  // Year bar
+  $('year-val').textContent  = `Year ${S.year}`;
+  $('year-progress').style.width = `${Math.min(100, (S.year / 60) * 100)}%`;
+
+  // Career
+  $('career-title').textContent   = S.careerTitle;
+  $('career-company').textContent = S.careerCompany;
+  $('career-salary').textContent  = fmt(S.careerSalary);
+  $('career-exp').textContent     = `${S.careerExp.toFixed(1)} yrs`;
+  $('career-level').textContent   = S.careerLevel;
+
+  // Stage dots
+  const dots = [...$('stages-strip').children];
+  dots.forEach((d, i) => {
+    d.classList.remove('done', 'active');
+    if (i < S.stageIdx)  d.classList.add('done');
+    if (i === S.stageIdx) d.classList.add('active');
+  });
+  $('stage-label').textContent = S.stage;
+
+  // Relationships
+  renderRels();
+
+  // Skills
+  Object.keys(S.skills).forEach(k => {
+    const el = $('sk-' + k);
+    if (el) el.style.width = S.skills[k] + '%';
+  });
+
+  // Milestones
+  renderMilestones();
+}
+
+function setBar(stat, val) {
+  $('bar-' + stat).style.width = val + '%';
+  $('val-' + stat).textContent = val;
+}
+
+function fmt(n) {
+  return '$' + Math.round(n).toLocaleString();
+}
+
+function renderRels() {
+  const list = $('rel-list');
+  list.innerHTML = S.relationships.map(r => `
+    <div class="rel-item">
+      <div class="rel-avatar" style="background:color-mix(in srgb,var(--accent) 15%,var(--surface))">${r.avatar}</div>
+      <div class="rel-info">
+        <div class="rel-name">${r.name}</div>
+        <div class="rel-type">${r.type}</div>
+      </div>
+      <div class="rel-heart">
+        ♥ ${r.love}
+        <div class="mini-bar-wrap"><div class="mini-bar" style="width:${r.love}%"></div></div>
+      </div>
+    </div>
+  `).join('');
+}
+
+const MILESTONE_DEFS = [
+  { key: 'graduated', label: 'Graduate university' },
+  { key: 'firstJob',  label: 'Land first job' },
+  { key: 'house',     label: 'Buy a house' },
+  { key: 'partner',   label: 'Find a partner' },
+  { key: 'family',    label: 'Start a family' },
+  { key: 'rich',      label: 'Reach $100k wealth' },
+  { key: 'manager',   label: 'Become a manager' },
+  { key: 'traveler',  label: 'Travel the world' },
+];
+
+function renderMilestones() {
+  $('milestones').innerHTML = MILESTONE_DEFS.map(m => {
+    const done = S.milestones[m.key];
+    return `<div class="milestone${done ? '' : ' locked'}">
+      <span class="check">${done ? '✅' : '⬜'}</span> ${m.label}
+    </div>`;
+  }).join('');
+}
+
+/* ── Add event to feed ───────────────────────────────────────── */
+function addEvent({ icon, title, desc, tag, age }) {
+  const item = document.createElement('div');
+  item.className = 'event-item';
+  item.innerHTML = `
+    <div class="event-icon" style="background:${tagBg(tag)}">${icon}</div>
+    <div class="event-body">
+      <div class="event-title">${title}<span class="event-tag tag-${tag}">${tag}</span></div>
+      <div class="event-desc">${desc}</div>
+      <div class="event-meta">Age ${age ?? S.age} · Year ${S.year}</div>
+    </div>`;
+  feed.prepend(item);
+}
+
+function tagBg(tag) {
+  const map = { good: 'color-mix(in srgb,#3fb950 15%,#161b22)', bad: 'color-mix(in srgb,#f85149 15%,#161b22)',
+                info: 'color-mix(in srgb,#58a6ff 15%,#161b22)', warn: 'color-mix(in srgb,#d29922 15%,#161b22)' };
+  return map[tag] || map.info;
+}
+
+/* ── Toast ───────────────────────────────────────────────────── */
+function toast(msg, icon = 'ℹ️') {
+  const t = document.createElement('div');
+  t.className = 'toast';
+  t.innerHTML = `${icon} ${msg}`;
+  $('toast-container').append(t);
+  setTimeout(() => t.remove(), 3000);
+}
+
+/* ── Advance year logic ──────────────────────────────────────── */
+function advanceYear() {
+  S.year++;
+  S.age++;
+
+  // Natural stat decay
+  S.health  = Math.max(0, S.health  - rnd(2, 5));
+  S.happy   = Math.max(0, S.happy   - rnd(1, 4));
+  S.energy  = Math.min(100, S.energy + rnd(5, 15));
+  S.relationships.forEach(r => r.love = Math.max(0, r.love - rnd(0, 3)));
+
+  // Income
+  if (S.careerSalary > 0) {
+    S.wealth += S.careerSalary;
+    S.income  = S.careerSalary;
+  }
+
+  // Life stage update
+  const newStage = STAGES.find(st => S.age >= st.minAge && S.age <= st.maxAge);
+  if (newStage && newStage.label !== S.stage) {
+    S.stage    = newStage.label;
+    S.stageIdx = STAGES.indexOf(newStage);
+    addEvent({ icon: newStage.icon, title: `Entered ${newStage.label}`, desc: `You've reached a new stage of life.`, tag: 'info' });
+    toast(`New life stage: ${newStage.label}`, newStage.icon);
+  }
+
+  // Auto milestones
+  checkAutoMilestones();
+
+  // Career progression
+  autoCareerProgress();
+
+  // Random event (50% chance)
+  if (Math.random() > .5) triggerRandomEvent();
+
+  // Age-based events
+  ageEvents();
+
+  addEvent({ icon: '📅', title: `Year ${S.year} begins`, desc: `You are now ${S.age} years old.`, tag: 'info' });
+
+  // Death check (>= 85)
+  if (S.age >= 85 && Math.random() > .7) {
+    endOfLife();
+    return;
+  }
+
+  render();
+}
+
+function ageEvents() {
+  if (S.age === 22 && !S.milestones.graduated) {
+    S.milestones.graduated = true;
+    addEvent({ icon: '🎓', title: 'University Graduation!', desc: 'You earned your degree. The world awaits.', tag: 'good' });
+    toast('Milestone: Graduated!', '🎓');
+    S.smart = Math.min(100, S.smart + 10);
+  }
+  if (S.age === 25 && !S.milestones.firstJob && S.milestones.graduated) {
+    S.milestones.firstJob = true;
+    S.careerTitle    = CAREERS[1].title;
+    S.careerCompany  = CAREERS[1].company;
+    S.careerSalary   = CAREERS[1].salary;
+    S.careerLevel    = 'Entry';
+    addEvent({ icon: '💼', title: 'First Real Job!', desc: `You landed a role as ${S.careerTitle}.`, tag: 'good' });
+    toast('Milestone: First job!', '💼');
+  }
+  if (S.age === 35 && !S.milestones.house && S.wealth >= 40000) {
+    S.milestones.house = true;
+    S.wealth -= 30000;
+    addEvent({ icon: '🏠', title: 'Bought a House!', desc: 'You put down roots with your own home.', tag: 'good' });
+    toast('Milestone: New homeowner!', '🏠');
+  }
+  if (S.wealth >= 100000 && !S.milestones.rich) {
+    S.milestones.rich = true;
+    addEvent({ icon: '💰', title: 'Six-Figure Wealth!', desc: 'Your net worth crossed $100,000.', tag: 'good' });
+    toast('Milestone: $100k wealth!', '💰');
+  }
+}
+
+function autoCareerProgress() {
+  if (S.careerExp >= 3 && S.careerSalary === CAREERS[1].salary) {
+    S.careerTitle   = CAREERS[2].title;
+    S.careerSalary  = CAREERS[2].salary;
+    S.careerLevel   = 'Mid';
+    addEvent({ icon: '📈', title: 'Promoted!', desc: `You advanced to ${S.careerTitle}.`, tag: 'good' });
+  } else if (S.careerExp >= 7 && S.careerSalary === CAREERS[2].salary) {
+    S.careerTitle   = CAREERS[3].title;
+    S.careerSalary  = CAREERS[3].salary;
+    S.careerLevel   = 'Senior';
+    if (!S.milestones.manager) S.milestones.manager = true;
+    addEvent({ icon: '🏅', title: 'Senior Promotion!', desc: `You are now a ${S.careerTitle}.`, tag: 'good' });
+    toast('Milestone: Manager!', '🏅');
+  }
+  S.careerExp += 1;
+}
+
+function checkAutoMilestones() {}
+
+function triggerRandomEvent() {
+  const ev = EVENTS[Math.floor(Math.random() * EVENTS.length)];
+  showEventModal(ev);
+}
+
+/* ── Event modal ─────────────────────────────────────────────── */
+function showEventModal(ev) {
+  $('ev-icon').textContent  = ev.icon;
+  $('ev-title').textContent = ev.title;
+  $('ev-desc').textContent  = ev.desc;
+  const choices = $('ev-choices');
+  choices.innerHTML = '';
+  ev.choices.forEach(c => {
+    const btn = document.createElement('button');
+    btn.className = 'btn' + (ev.choices.indexOf(c) === 0 ? ' primary' : '');
+    btn.textContent = c.label;
+    btn.onclick = () => {
+      applyEffect(c.effect);
+      const summary = Object.entries(c.effect)
+        .map(([k, v]) => `${k} ${v > 0 ? '+' : ''}${typeof v === 'number' && k !== 'careerExp' && k !== 'wealth' ? v : (k === 'wealth' ? fmt(v) : v)}`)
+        .join(', ');
+      addEvent({ icon: ev.icon, title: ev.title, desc: `You chose: ${c.label}. (${summary})`, tag: ev.tag });
+      closeModal('event-modal');
+      render();
+    };
+    choices.append(btn);
+  });
+  openModal('event-modal');
+}
+
+function applyEffect(effect) {
+  Object.entries(effect).forEach(([k, v]) => {
+    if (k === 'careerExp') { S.careerExp += v; return; }
+    if (typeof S[k] === 'number') {
+      S[k] = Math.max(0, Math.min(['health','happy','energy','smart'].includes(k) ? 100 : Infinity, S[k] + v));
+    }
+  });
+}
+
+/* ── Quick actions ───────────────────────────────────────────── */
+document.querySelectorAll('[data-action]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const key = btn.dataset.action;
+    const act = ACTIONS[key];
+    if (!act) return;
+    const result = act.effect(S);
+    if (result === null) {
+      toast('Not enough money!', '💸');
+      return;
+    }
+    addEvent({ icon: act.icon, title: act.label, desc: result, tag: act.tag });
+    render();
+  });
+});
+
+/* ── Advance year ────────────────────────────────────────────── */
+$('btn-advance').addEventListener('click', advanceYear);
+
+/* ── Meet someone ────────────────────────────────────────────── */
+$('btn-meet').addEventListener('click', () => {
+  const names    = ['Jordan', 'Sam', 'Casey', 'Riley', 'Morgan', 'Taylor', 'Quinn', 'Drew'];
+  const types    = ['Friend', 'Colleague', 'Neighbour', 'Acquaintance'];
+  const avatars  = ['🙂','😄','🤗','😁','😀','🥰','😎','🤩'];
+  const name   = names[Math.floor(Math.random() * names.length)];
+  const type   = types[Math.floor(Math.random() * types.length)];
+  const avatar = avatars[Math.floor(Math.random() * avatars.length)];
+  S.relationships.push({ name, type, avatar, love: 30 + Math.floor(Math.random() * 30) });
+  toast(`Met ${name} — new ${type}!`, avatar);
+  render();
+});
+
+/* ── Clear feed ──────────────────────────────────────────────── */
+$('btn-clear').addEventListener('click', () => {
+  feed.innerHTML = '';
+  S.events = [];
+});
+
+/* ── New game modal ──────────────────────────────────────────── */
+$('btn-new-game').addEventListener('click', () => openModal('new-game-modal'));
+$('ng-cancel').addEventListener('click',    () => closeModal('new-game-modal'));
+$('ng-confirm').addEventListener('click',   () => {
+  const name = $('ng-name').value.trim() || 'Alex Rivera';
+  S = deepCopy(DEFAULT);
+  S.name   = name;
+  S.avatar = document.querySelector('.avatar-opt[data-selected]')?.dataset.em || '😊';
+  feed.innerHTML = '';
+  addEvent({ icon: '🌱', title: 'A new life begins', desc: `Welcome to the world, ${S.name}! Your story starts now.`, tag: 'good' });
+  closeModal('new-game-modal');
+  render();
+  toast(`New life started: ${S.name}`, '🌱');
+});
+
+document.querySelectorAll('.avatar-opt').forEach(opt => {
+  opt.addEventListener('click', () => {
+    document.querySelectorAll('.avatar-opt').forEach(o => {
+      o.style.border = '2px solid transparent';
+      delete o.dataset.selected;
+    });
+    opt.style.border = '2px solid var(--accent)';
+    opt.dataset.selected = '1';
+  });
+});
+
+/* ── End of life ─────────────────────────────────────────────── */
+function endOfLife() {
+  const ms = MILESTONE_DEFS.filter(m => S.milestones[m.key]).length;
+  showEventModal({
+    icon: '🕊️',
+    title: `${S.name} lived to ${S.age}`,
+    desc : `A life well-lived. You achieved ${ms} of 8 milestones and amassed ${fmt(S.wealth)}. Thank you for playing.`,
+    tag  : 'info',
+    choices: [
+      { label: 'Start a new life 🌱', effect: {} },
+    ]
+  });
+  // Override the choice to reset
+  setTimeout(() => {
+    const btn = document.querySelector('#ev-choices .btn');
+    if (btn) btn.onclick = () => {
+      closeModal('event-modal');
+      $('btn-new-game').click();
+    };
+  }, 100);
+}
+
+/* ── Modal helpers ───────────────────────────────────────────── */
+function openModal(id)  { $(id).classList.add('open'); }
+function closeModal(id) { $(id).classList.remove('open'); }
+
+document.querySelectorAll('.modal-overlay').forEach(overlay => {
+  overlay.addEventListener('click', e => {
+    if (e.target === overlay) closeModal(overlay.id);
+  });
+});
+
+/* ── Helpers ─────────────────────────────────────────────────── */
+function rnd(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
+
+/* ── Boot ────────────────────────────────────────────────────── */
+addEvent({ icon: '🌱', title: 'A new life begins', desc: `Welcome, ${S.name}! Your story starts here. Use actions and advance years to shape your destiny.`, tag: 'good' });
+render();
+</script>
+</body>
+</html>
