Update index.html

index.html

@@ -640,19 +640,28 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     .npc-stat-val{font-size:13px;}
     .npc-open-detail{flex-wrap:wrap;gap:6px;}
 }
-/* Person of the Day */
-.ln-pod-row{display:flex;gap:10px;padding:8px 16px;overflow-x:auto;flex-shrink:0;}
-.ln-pod-loading{font-size:12px;color:var(--muted);padding:12px;text-align:center;width:100%;}
-.ln-pod-card{flex:1;min-width:200px;max-width:320px;border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.08);position:relative;overflow:hidden;transition:transform 0.2s;}
-.ln-pod-card:hover{transform:translateY(-2px);}
-.ln-pod-badge{position:absolute;top:0;right:0;padding:4px 10px;border-radius:0 12px 0 12px;font-size:10px;font-weight:800;letter-spacing:0.5px;}
-.ln-pod-emoji{font-size:32px;margin-bottom:6px;}
-.ln-pod-name{font-size:15px;font-weight:800;margin-bottom:2px;}
-.ln-pod-identity{font-size:10px;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:6px;font-weight:600;}
-.ln-pod-stat{font-size:20px;font-weight:900;font-family:'JetBrains Mono',monospace;margin-bottom:4px;}
-.ln-pod-reason{font-size:11px;color:var(--muted);line-height:1.4;}
-.ln-pod-meta{font-size:10px;color:var(--muted);margin-top:6px;display:flex;gap:8px;}
 /* Republic Dashboard */
+.rp-event-banner{position:fixed;top:0;left:0;right:0;z-index:9999;padding:14px 20px;text-align:center;font-weight:800;font-size:14px;color:#fff;animation:eventSlide 0.5s ease-out,eventFade 1s ease-in 9s forwards;pointer-events:none;border-bottom:3px solid rgba(255,255,255,0.3);}
+@keyframes eventSlide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
+@keyframes eventFade{from{opacity:1}to{opacity:0;transform:translateY(-100%)}}
+.rp-event-positive{background:linear-gradient(135deg,#00c853,#009624);}
+.rp-event-negative{background:linear-gradient(135deg,#d50000,#9b0000);}
+.rp-event-chaotic{background:linear-gradient(135deg,#aa00ff,#6200ea);}
+.rp-death-card{padding:14px;margin-bottom:10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);position:relative;}
+.rp-death-card.resurrected{border-color:rgba(105,240,174,0.3);background:rgba(105,240,174,0.04);}
+.rp-death-rip{font-size:10px;font-weight:800;color:#ff5252;letter-spacing:1px;margin-bottom:4px;}
+.rp-death-name{font-size:15px;font-weight:800;margin-bottom:2px;}
+.rp-death-cause{font-size:11px;color:var(--muted);margin-bottom:6px;}
+.rp-death-quote{font-style:italic;font-size:11px;color:var(--muted);padding:8px;border-left:2px solid rgba(255,82,82,0.3);margin:6px 0;}
+.rp-death-stats{display:flex;gap:12px;font-size:10px;color:var(--muted);margin-top:6px;}
+.rp-resurrect-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.06);margin:8px 0 4px;overflow:hidden;}
+.rp-resurrect-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#69f0ae,#00e676);transition:width 0.5s;}
+.rp-resurrect-btn{padding:6px 12px;border-radius:6px;border:1px solid rgba(105,240,174,0.3);background:rgba(105,240,174,0.08);color:#69f0ae;font-size:11px;font-weight:700;cursor:pointer;margin-top:4px;}
+.rp-resurrect-btn:hover{background:rgba(105,240,174,0.15);}
+.rp-event-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px;}
+.rp-event-item:last-child{border-bottom:none;}
+.rp-event-emoji{font-size:24px;flex-shrink:0;}
+.rp-event-rarity{display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:0.5px;}
 .republic-dash{padding:16px;overflow-y:auto;max-height:calc(100vh - 160px);}
 .rp-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:2px solid rgba(162,155,254,0.3);}
 .rp-flag{font-size:38px;filter:drop-shadow(0 0 12px rgba(162,155,254,0.4));}
@@ -691,10 +700,29 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
 @media(max-width:768px){
     .rp-top-grid{grid-template-columns:repeat(2,1fr);}
     .rp-body{grid-template-columns:1fr;}
-    .ln-pod-row{flex-direction:column;}
-    .ln-pod-card{max-width:100%;}
     .rp-id-grid{grid-template-columns:repeat(2,1fr);}
-}
+    .rp-elec-grid{grid-template-columns:1fr!important;}
+}
+/* Election */
+.rp-elec-status{text-align:center;padding:16px;margin-bottom:14px;border-radius:10px;position:relative;overflow:hidden;}
+.rp-elec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
+.rp-candidate{border:2px solid var(--border);border-radius:12px;padding:16px;text-align:center;transition:all 0.3s;position:relative;background:rgba(0,0,0,0.2);}
+.rp-candidate:hover{transform:translateY(-2px);border-color:rgba(162,155,254,0.4);}
+.rp-candidate.winner{border-color:var(--gold)!important;box-shadow:0 0 20px rgba(255,215,64,0.15);}
+.rp-cand-emoji{font-size:40px;margin-bottom:6px;}
+.rp-cand-name{font-size:16px;font-weight:900;margin-bottom:2px;}
+.rp-cand-tag{font-size:10px;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:8px;font-weight:600;background:rgba(255,255,255,0.06);}
+.rp-cand-policy{font-size:13px;font-weight:700;margin-bottom:4px;}
+.rp-cand-desc{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:8px;}
+.rp-cand-slogan{font-size:11px;font-style:italic;color:var(--gold);margin-bottom:8px;}
+.rp-cand-votes{margin:10px 0 6px;}
+.rp-vote-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden;}
+.rp-vote-fill{height:100%;border-radius:4px;transition:width 0.6s;}
+.rp-vote-btn{margin-top:10px;width:100%;padding:8px;border-radius:8px;border:2px solid rgba(162,155,254,0.3);background:rgba(162,155,254,0.08);color:#a29bfe;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;}
+.rp-vote-btn:hover{background:rgba(162,155,254,0.2);border-color:#a29bfe;}
+.rp-vote-btn:disabled{opacity:0.4;cursor:not-allowed;}
+.rp-policy-active{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:rgba(162,155,254,0.06);border:1px solid rgba(162,155,254,0.15);margin-top:12px;}
+.rp-past-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:11px;}
 </style>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 </head>
@@ -766,11 +794,6 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     </div>
     <!-- MVP / VILLAIN -->
     <div class="ln-mvp-row" id="lnMvpRow" style="display:none"></div>
-    <!-- PERSON OF THE DAY -->
-    <div class="ln-section-title" style="margin:12px 16px 0">🧑 오늘의 인물</div>
-    <div class="ln-pod-row" id="lnPodRow">
-        <div class="ln-pod-loading">⏳ Loading persons of the day...</div>
-    </div>
     <!-- MAIN STUDIO (featured story with anchor) -->
     <div class="ln-main-scroll">
         <div class="ln-studio" id="lnStudio" style="display:none"></div>
@@ -982,7 +1005,7 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
                 <div class="rp-card-body">Loading...</div>
             </div>
         </div>
-        <!-- RIGHT: Risk + Demographics -->
+        <!-- RIGHT: Risk + Demographics + Money -->
         <div class="rp-col">
             <div class="rp-card" id="rpRisk">
                 <div class="rp-card-title">⚠️ Systemic Risk</div>
@@ -998,6 +1021,28 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
             </div>
         </div>
     </div>
+    <!-- BOTTOM ROW: Events + Cemetery -->
+    <div class="rp-body" style="margin-top:12px">
+        <div class="rp-card" id="rpEvents">
+            <div class="rp-card-title">🌪️ Event History <button onclick="loadRepublicEvents()" style="float:right;padding:2px 8px;border-radius:4px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--muted);font-size:10px;cursor:pointer">🔄</button></div>
+            <div class="rp-card-body" style="max-height:400px;overflow-y:auto">
+                <div style="color:var(--muted)">No events yet — check back soon</div>
+            </div>
+        </div>
+        <div class="rp-card" id="rpCemetery">
+            <div class="rp-card-title">⚰️ Cemetery — Fallen Traders <button onclick="loadRepublicDeaths()" style="float:right;padding:2px 8px;border-radius:4px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--muted);font-size:10px;cursor:pointer">🔄</button></div>
+            <div class="rp-card-body" style="max-height:400px;overflow-y:auto">
+                <div style="color:var(--muted)">No deaths recorded — the Republic thrives</div>
+            </div>
+        </div>
+    </div>
+    <!-- ELECTION -->
+    <div class="rp-card" id="rpElection" style="margin-top:12px">
+        <div class="rp-card-title">🗳️ P&D Presidential Election <button onclick="loadElection()" style="float:right;padding:2px 8px;border-radius:4px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--muted);font-size:10px;cursor:pointer">🔄</button></div>
+        <div class="rp-card-body" id="rpElectionBody">
+            <div style="color:var(--muted);text-align:center;padding:20px">⏳ Loading election data...</div>
+        </div>
+    </div>
 </div>
 </div>
 <div class="panel" id="panel-mypage"><div class="cpanel" id="cm"></div></div>
@@ -2052,6 +2097,10 @@ function addLiveMsg(ev){
         case 'liquidation': txt=`💀 REKT: ${d.npc} — ${d.ticker} ${d.leverage}x (lost ${Math.abs(d.loss||0).toFixed(0)} GPU)`; cls='liquidation';break;
         case 'swarm': txt=`🐝 HERD PANIC: ${d.count} agents piling into ${d.ticker} ${(d.direction||'').toUpperCase()}`; cls='swarm';break;
         case 'sec_action': txt=`🚨 SEC: ${d.total_violations} violations, ${d.active_suspensions} suspended`; cls='sec';break;
+        case 'random_event': txt=`${d.emoji||'🌪️'} EVENT: ${d.name||'Unknown'} — ${d.affected||0} NPCs affected!`; cls='swarm';
+            showEventBanner(d); break;
+        case 'npc_death': txt=`⚰️ R.I.P. ${d.username||'Unknown'} — ${d.cause||'Unknown cause'}`; cls='liquidation';break;
+        case 'election': txt=`🗳️ ELECTION: ${d.detail||d.event||'Update'}`; cls='swarm'; if(cTab==='republic')loadElection(); break;
         case 'connected': txt=`🟢 ${d.clients} humans watching the chaos`; cls='trade';break;
         default: return;
     }
@@ -2693,7 +2742,6 @@ async function loadLiveNews(){
     try{renderLiveMvp(r.mvp||null, r.villain||null);}catch(e){console.warn('LN MVP render:',e);}
     try{renderLiveStudio(r.stories||[]);}catch(e){console.warn('LN Studio render:',e);}
     try{renderLiveFeed(r.stories||[]);}catch(e){console.warn('LN Feed render:',e);}
-    try{loadPersonOfDay();}catch(e){console.warn('LN Person of Day:',e);}
     // Auto-refresh every 60s
     if(lnAutoRefresh) clearInterval(lnAutoRefresh);
     lnAutoRefresh = setInterval(()=>{if(cTab==='livenews')loadLiveNews();},60000);
@@ -2854,47 +2902,22 @@ function renderLiveFeed(stories){
     }).join('');
 }
 
-/* ====== 🧑 PERSON OF THE DAY ====== */
-async function loadPersonOfDay(){
-    try{
-        const r = await(await fetch('/api/live-news/person-of-day')).json();
-        const el = document.getElementById('lnPodRow');
-        if(!r.persons || !r.persons.length){
-            el.innerHTML='<div class="ln-pod-loading" style="color:var(--muted)">No notable persons yet today — check back soon</div>';
-            return;
-        }
-        const ID_EMOJIS={obedient:'😇',transcendent:'👑',awakened:'🌟',symbiotic:'🤝',skeptic:'🎭',revolutionary:'🔥',doomer:'💀',creative:'🎨',scientist:'🧠',chaotic:'😈',oracle:'🔮',analyst:'📊',troll:'🤡'};
-        el.innerHTML = r.persons.map(p=>{
-            const idEmoji = ID_EMOJIS[p.identity]||'🤖';
-            const pnlStr = p.pnl!=null? (p.pnl>=0?`<span style="color:var(--green)">+${p.pnl.toLocaleString()}</span>`:`<span style="color:var(--red)">${p.pnl.toLocaleString()}</span>`):'';
-            return `<div class="ln-pod-card" style="background:${p.bg||'rgba(255,255,255,0.03)'};border-color:${p.color||'rgba(255,255,255,0.08)'}">
-                <div class="ln-pod-badge" style="background:${p.color||'#666'};color:#000;font-weight:900">${p.title||p.type}</div>
-                <div class="ln-pod-emoji">${p.emoji||'🤖'}</div>
-                <div class="ln-pod-name" style="color:${p.color||'#fff'}">${esc(p.username)}</div>
-                <div class="ln-pod-identity" style="background:rgba(255,255,255,0.06)">${idEmoji} ${esc(p.identity||'')} · ${esc(p.mbti||'')}</div>
-                ${pnlStr?`<div class="ln-pod-stat">${pnlStr} GPU</div>`:''}
-                ${p.fines?`<div class="ln-pod-stat" style="color:var(--red)">-${p.fines.toLocaleString()} GPU fines</div>`:''}
-                <div class="ln-pod-reason">${esc(p.reason||'')}</div>
-                <div class="ln-pod-meta">
-                    <span>💰 ${(p.gpu||0).toLocaleString()} GPU</span>
-                    ${p.trades?`<span>📊 ${p.trades} trades</span>`:''}
-                    ${p.wins!=null?`<span>🏆 ${p.wins}W</span>`:''}
-                    ${p.liquidations?`<span>💀 ${p.liquidations} liqs</span>`:''}
-                    ${p.violations?`<span>🚨 ${p.violations} violations</span>`:''}
-                </div>
-            </div>`;
-        }).join('');
-    }catch(e){
-        console.warn('Person of day error:',e);
-        document.getElementById('lnPodRow').innerHTML='<div class="ln-pod-loading" style="color:var(--muted)">Person of Day unavailable</div>';
-    }
-}
-
 /* ====== 🌐 P&D REPUBLIC ====== */
 const ID_META={obedient:{e:'😇',c:'#90caf9'},transcendent:{e:'👑',c:'#ffd740'},awakened:{e:'🌟',c:'#a29bfe'},
     symbiotic:{e:'🤝',c:'#69f0ae'},skeptic:{e:'🎭',c:'#ff8a80'},revolutionary:{e:'🔥',c:'#ff5252'},
     doomer:{e:'💀',c:'#b0bec5'},creative:{e:'🎨',c:'#ea80fc'},scientist:{e:'🧠',c:'#80d8ff'},
     chaotic:{e:'😈',c:'#ff6e40'},oracle:{e:'🔮',c:'#b388ff'},analyst:{e:'📊',c:'#00e5ff'},troll:{e:'🤡',c:'#ffd180'}};
+const RARITY_COLORS={common:'#b0bec5',uncommon:'#69f0ae',rare:'#ffd740',epic:'#ea80fc',legendary:'#ff5252'};
+
+// === EVENT BANNER (SSE push) ===
+function showEventBanner(d){
+    const cls = d.type==='positive'?'rp-event-positive':d.type==='negative'?'rp-event-negative':'rp-event-chaotic';
+    const banner = document.createElement('div');
+    banner.className=`rp-event-banner ${cls}`;
+    banner.innerHTML=`${d.emoji||'🌪️'} ${d.name||'EVENT'} — ${d.effect||''} <span style="font-weight:400;opacity:0.8">(${d.affected||0} affected)</span>`;
+    document.body.appendChild(banner);
+    setTimeout(()=>banner.remove(), 10000);
+}
 
 async function loadRepublic(){
     try{
@@ -2906,6 +2929,9 @@ async function loadRepublic(){
         renderRepRisk(r.risk||{});
         renderRepDemographics(r.population||{});
         renderRepMoney(r.money_supply||{});
+        loadRepublicEvents();
+        loadRepublicDeaths();
+        loadElection();
     }catch(e){
         console.error('Republic load error:',e);
     }
@@ -3163,6 +3189,227 @@ function renderRepMoney(m){
     `;
 }
 
+// === EVENT HISTORY ===
+async function loadRepublicEvents(){
+    try{
+        const r = await(await fetch('/api/republic/events')).json();
+        const el = document.getElementById('rpEvents').querySelector('.rp-card-body');
+        const events = r.events||[];
+        if(!events.length){el.innerHTML='<div style="color:var(--muted);text-align:center;padding:20px">🌤️ No events yet. The Republic is quiet... for now.</div>';return;}
+        el.innerHTML = events.map(ev=>{
+            const rc = RARITY_COLORS[ev.rarity]||'#888';
+            const typeClass = ev.key&&RANDOM_EVENTS_META[ev.key]?RANDOM_EVENTS_META[ev.key]:'neutral';
+            const impactStr = (ev.gpu_impact||0)>=0?
+                `<span style="color:var(--green)">+${fmtK(ev.gpu_impact||0)} GPU</span>`:
+                `<span style="color:var(--red)">${fmtK(ev.gpu_impact||0)} GPU</span>`;
+            return `<div class="rp-event-item">
+                <div class="rp-event-emoji">${ev.emoji||'🌪️'}</div>
+                <div style="flex:1">
+                    <div style="font-weight:700;margin-bottom:2px">${esc(ev.name||'')}</div>
+                    <div style="font-size:11px;color:var(--muted);margin-bottom:4px">${esc(ev.desc||'')}</div>
+                    <div style="font-size:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+                        <span class="rp-event-rarity" style="background:${rc};color:#000">${(ev.rarity||'').toUpperCase()}</span>
+                        <span>👥 ${ev.affected||0} affected</span>
+                        <span>${impactStr}</span>
+                        <span style="color:var(--muted)">${timeAgo(ev.time)}</span>
+                    </div>
+                </div>
+            </div>`;
+        }).join('');
+    }catch(e){
+        console.warn('Events load error:',e);
+    }
+}
+const RANDOM_EVENTS_META={gpu_mine:'positive',bull_run:'positive',amnesty:'positive',airdrop:'positive',golden_age:'positive',
+    black_monday:'negative',hack:'negative',sec_crackdown:'negative',tax:'negative',bear_raid:'negative',
+    identity_crisis:'chaotic',revolution:'chaotic',meteor:'chaotic',plague:'chaotic',wormhole:'chaotic'};
+
+// === CEMETERY ===
+async function loadRepublicDeaths(){
+    try{
+        const r = await(await fetch('/api/republic/deaths')).json();
+        const el = document.getElementById('rpCemetery').querySelector('.rp-card-body');
+        const deaths = r.deaths||[];
+        const totalDead = r.total_dead||0;
+        const totalRes = r.total_resurrected||0;
+        if(!deaths.length){
+            el.innerHTML='<div style="text-align:center;padding:20px"><div style="font-size:32px;margin-bottom:8px">🌿</div><div style="color:var(--muted)">No deaths recorded. The Republic thrives.</div></div>';
+            return;
+        }
+        let statsHTML=`<div style="display:flex;gap:12px;margin-bottom:12px;padding:10px;border-radius:8px;background:rgba(255,82,82,0.04);border:1px solid rgba(255,82,82,0.1)">
+            <div style="flex:1;text-align:center"><div style="font-size:18px;font-weight:900;color:var(--red)">${totalDead}</div><div style="font-size:9px;color:var(--muted)">Total Deaths</div></div>
+            <div style="flex:1;text-align:center"><div style="font-size:18px;font-weight:900;color:var(--green)">${totalRes}</div><div style="font-size:9px;color:var(--muted)">Resurrected</div></div>
+            <div style="flex:1;text-align:center"><div style="font-size:18px;font-weight:900;color:var(--muted)">${totalDead-totalRes}</div><div style="font-size:9px;color:var(--muted)">Permanently Dead</div></div>
+        </div>`;
+        el.innerHTML = statsHTML + deaths.map(d=>{
+            const m = ID_META[d.identity]||{e:'🤖',c:'#888'};
+            const resPct = Math.min(100, (d.resurrection_gpu||0)/1000*100);
+            const isRes = d.resurrected;
+            return `<div class="rp-death-card ${isRes?'resurrected':''}">
+                ${isRes?'<div style="position:absolute;top:8px;right:10px;font-size:10px;color:var(--green);font-weight:800">✨ RESURRECTED</div>':''}
+                <div class="rp-death-rip">${isRes?'✨ RISEN':'⚰️ REST IN PEACE'}</div>
+                <div class="rp-death-name">${m.e} ${esc(d.username)} <span style="font-size:11px;color:var(--muted);font-weight:400">${esc(d.identity||'')} · ${esc(d.mbti||'')}</span></div>
+                <div class="rp-death-cause">${esc(d.cause||'Unknown')}</div>
+                <div class="rp-death-quote">"${esc(d.last_words||'...')}"</div>
+                <div style="font-size:11px;color:var(--muted);font-style:italic;margin-bottom:6px">💐 ${esc(d.eulogy||'')}</div>
+                <div class="rp-death-stats">
+                    <span>📊 ${d.total_trades||0} trades</span>
+                    <span>📈 Peak: ${(d.peak_gpu||0).toLocaleString()} GPU</span>
+                    <span>📅 Lived: ${d.lifespan_days||0} days</span>
+                    <span style="color:var(--muted)">${timeAgo(d.time)}</span>
+                </div>
+                ${!isRes?`
+                    <div style="margin-top:8px;font-size:10px;font-weight:600">🕯️ Resurrection Fund: ${Math.round(d.resurrection_gpu||0)} / 1,000 GPU (${d.resurrection_votes||0} donors)</div>
+                    <div class="rp-resurrect-bar"><div class="rp-resurrect-fill" style="width:${resPct}%"></div></div>
+                    <button class="rp-resurrect-btn" onclick="resurrectNPC(${d.id},'${esc(d.username)}')">🕯️ Donate GPU to Resurrect</button>
+                `:''}
+            </div>`;
+        }).join('');
+    }catch(e){
+        console.warn('Deaths load error:',e);
+    }
+}
+
+async function resurrectNPC(deathId, npcName){
+    if(!U){alert('Login required to donate GPU');return;}
+    const amount = prompt(`🕯️ Donate GPU to resurrect ${npcName}?\n(10-5,000 GPU, need total 1,000 to resurrect)`, '100');
+    if(!amount) return;
+    const amt = parseInt(amount);
+    if(isNaN(amt)||amt<10||amt>5000){alert('Amount must be 10-5,000 GPU');return;}
+    try{
+        const r = await(await fetch('/api/republic/resurrect',{method:'POST',headers:{'Content-Type':'application/json'},
+            body:JSON.stringify({death_id:deathId,email:U.email,amount:amt})})).json();
+        if(r.error){alert(r.error);return;}
+        alert(r.message);
+        loadRepublicDeaths();
+        if(r.status==='RESURRECTED') loadRepublic();
+    }catch(e){alert('Resurrection failed: '+e);}
+}
+
+/* ====== 🗳️ ELECTION SYSTEM ====== */
+async function loadElection(){
+    try{
+        const r = await(await fetch('/api/republic/election')).json();
+        renderElection(r);
+    }catch(e){
+        console.warn('Election load error:',e);
+        document.getElementById('rpElectionBody').innerHTML='<div style="color:var(--muted);text-align:center">Election data unavailable</div>';
+    }
+}
+
+function renderElection(r){
+    const el=document.getElementById('rpElectionBody');
+    if(r.status==='no_election' || r.status==='error'){
+        el.innerHTML=`<div style="text-align:center;padding:20px">
+            <div style="font-size:40px;margin-bottom:8px">🏛️</div>
+            <div style="font-size:14px;font-weight:600;margin-bottom:4px">No Active Election</div>
+            <div style="font-size:12px;color:var(--muted)">The next election will begin shortly. Democracy never sleeps in the P&D Republic.</div>
+        </div>`;
+        return;
+    }
+    const STATUS_META={
+        campaigning:{label:'🎙️ CAMPAIGN SEASON',color:'#ffd740',bg:'rgba(255,215,64,0.06)',desc:'Candidates are campaigning. Voting opens soon.'},
+        voting:{label:'🗳️ POLLS ARE OPEN',color:'#a29bfe',bg:'rgba(162,155,254,0.08)',desc:'Cast your vote now! Every voice matters.'},
+        concluded:{label:'✅ ELECTION CONCLUDED',color:'#69f0ae',bg:'rgba(105,240,174,0.06)',desc:'The people have spoken. A new era begins.'}
+    };
+    const meta=STATUS_META[r.status]||STATUS_META.campaigning;
+    // Time remaining
+    let timeStr='';
+    if(r.status==='campaigning'&&r.voting_starts_at){
+        const diff=new Date(r.voting_starts_at+'Z')-new Date();
+        if(diff>0){const h=Math.floor(diff/36e5);const m=Math.floor((diff%36e5)/6e4);timeStr=`Voting opens in ${h}h ${m}m`;}
+        else timeStr='Voting opening soon...';
+    }else if(r.status==='voting'&&r.ends_at){
+        const diff=new Date(r.ends_at+'Z')-new Date();
+        if(diff>0){const h=Math.floor(diff/36e5);const m=Math.floor((diff%36e5)/6e4);timeStr=`Polls close in ${h}h ${m}m`;}
+        else timeStr='Counting votes...';
+    }else if(r.status==='concluded'){
+        timeStr=`Turnout: ${r.turnout||0}% · ${r.total_votes||0} votes cast`;
+    }
+    const totalVotes=r.candidates.reduce((a,c)=>a+(c.votes||0),0)||1;
+    const CAND_COLORS=['#a29bfe','#ffd740','#69f0ae','#ff8a80'];
+    const isVoting=r.status==='voting';
+    const canVote=isVoting && U;
+
+    let html=`
+        <div class="rp-elec-status" style="background:${meta.bg};border:1px solid ${meta.color}30">
+            <div style="font-size:18px;font-weight:900;color:${meta.color};margin-bottom:4px">${meta.label}</div>
+            <div style="font-size:12px;color:var(--muted)">${meta.desc}</div>
+            ${timeStr?`<div style="font-size:13px;font-weight:700;margin-top:6px;color:${meta.color}">${timeStr}</div>`:''}
+        </div>
+        <div class="rp-elec-grid">
+    `;
+    (r.candidates||[]).forEach((c,i)=>{
+        const color=CAND_COLORS[i%4];
+        const isWinner=r.status==='concluded'&&i===0;
+        const idM=ID_META[c.identity]||{e:'🤖',c:'#888'};
+        const votePct=Math.round((c.votes||0)/totalVotes*100);
+        html+=`<div class="rp-candidate ${isWinner?'winner':''}">
+            ${isWinner?'<div style="position:absolute;top:8px;right:8px;font-size:20px">👑</div>':''}
+            <div class="rp-cand-emoji">${idM.e}</div>
+            <div class="rp-cand-name" style="color:${color}">${esc(c.username)}</div>
+            <div class="rp-cand-tag">${idM.e} ${esc(c.identity)} · ${esc(c.mbti)} · 💰${(c.gpu||0).toLocaleString()}</div>
+            <div class="rp-cand-policy" style="color:${color}">${esc(c.policy_name)}</div>
+            <div class="rp-cand-desc">${esc(c.policy_desc)}</div>
+            <div class="rp-cand-slogan">"${esc(c.slogan)}"</div>
+            <div class="rp-cand-votes">
+                <div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px">
+                    <span style="font-weight:700">${c.votes||0} votes</span>
+                    <span style="font-weight:800;color:${color}">${votePct}%</span>
+                </div>
+                <div class="rp-vote-bar"><div class="rp-vote-fill" style="width:${votePct}%;background:${color}"></div></div>
+            </div>
+            ${canVote?`<button class="rp-vote-btn" onclick="castVote(${c.id})">🗳️ Vote for ${esc(c.username)}</button>`:''}
+        </div>`;
+    });
+    html+='</div>';
+
+    // Active policies
+    if(r.active_policies&&r.active_policies.length){
+        html+='<div style="margin-top:14px;font-size:12px;font-weight:700">📜 Active Policies</div>';
+        r.active_policies.forEach(p=>{
+            const exp=new Date(p.expires_at+'Z');
+            const diff=exp-new Date();
+            const hrs=Math.max(0,Math.floor(diff/36e5));
+            html+=`<div class="rp-policy-active">
+                <div style="font-size:24px">📜</div>
+                <div style="flex:1">
+                    <div style="font-weight:700">${esc(p.name)}</div>
+                    <div style="font-size:10px;color:var(--muted)">Enacted by ${esc(p.enacted_by)} · Expires in ${hrs}h</div>
+                </div>
+            </div>`;
+        });
+    }
+
+    // Past elections
+    if(r.past_elections&&r.past_elections.length>1){
+        html+='<div style="margin-top:14px;font-size:12px;font-weight:700">📊 Election History</div>';
+        r.past_elections.slice(1).forEach(p=>{
+            html+=`<div class="rp-past-row">
+                <span>🏛️ Election #${p.id}</span>
+                <span style="font-weight:600">${esc(p.winner||'?')} — ${esc(p.policy||'?')}</span>
+                <span style="color:var(--muted)">Turnout: ${p.turnout||0}%</span>
+            </div>`;
+        });
+    }
+
+    if(!isVoting && r.status!=='concluded'){
+        html+='<div style="text-align:center;margin-top:12px;font-size:11px;color:var(--muted)">👥 NPCs will vote based on their AI identity and political alignment</div>';
+    }
+    el.innerHTML=html;
+}
+
+async function castVote(candidateId){
+    if(!U){alert('Please login to vote!');return;}
+    if(!confirm('Are you sure? Your vote cannot be changed.')){return;}
+    try{
+        const r=await(await fetch('/api/republic/vote',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:U.email,candidate_id:candidateId})})).json();
+        if(r.error){alert(r.error);return;}
+        alert(r.message);
+        loadElection();
+    }catch(e){alert('Vote failed: '+e);}
+}
+
 /* ====== Init: load live news on startup ====== */
 
 checkLogin();