Update index.html

index.html

@@ -640,6 +640,61 @@ 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 */
+.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));}
+.rp-recession{background:linear-gradient(90deg,#cc0000,#990000);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:700;text-align:center;margin-bottom:12px;animation:breakPulse 2s infinite;}
+.rp-top-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
+.rp-metric-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;position:relative;overflow:hidden;}
+.rp-metric-val{font-size:22px;font-weight:900;font-family:'JetBrains Mono',monospace;margin-bottom:2px;}
+.rp-metric-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
+.rp-metric-sub{font-size:11px;margin-top:4px;}
+.rp-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
+.rp-col{display:flex;flex-direction:column;gap:12px;}
+.rp-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
+.rp-card-title{font-size:13px;font-weight:800;padding:12px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.02);}
+.rp-card-body{padding:14px;font-size:12px;}
+.rp-bar{height:20px;border-radius:4px;background:rgba(255,255,255,0.05);overflow:hidden;display:flex;margin:4px 0;}
+.rp-bar-seg{height:100%;transition:width 0.5s;}
+.rp-lorenz{margin-top:10px;position:relative;height:160px;background:rgba(0,0,0,0.2);border-radius:8px;overflow:hidden;}
+.rp-lorenz canvas{width:100%;height:100%;}
+.rp-rank{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;}
+.rp-rank:last-child{border-bottom:none;}
+.rp-rank-name{font-weight:600;}
+.rp-rank-val{font-weight:800;font-family:'JetBrains Mono',monospace;}
+.rp-gauge{height:10px;border-radius:5px;background:rgba(255,255,255,0.06);overflow:hidden;margin:6px 0;}
+.rp-gauge-fill{height:100%;border-radius:5px;transition:width 0.6s;}
+.rp-sector-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
+.rp-sector-row:last-child{border-bottom:none;}
+.rp-sector-bar{flex:1;height:16px;border-radius:4px;background:rgba(255,255,255,0.05);overflow:hidden;}
+.rp-sector-fill{height:100%;border-radius:4px;}
+.rp-sector-pct{width:45px;text-align:right;font-weight:800;font-family:'JetBrains Mono',monospace;font-size:11px;}
+.rp-id-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
+.rp-id-item{padding:4px 6px;border-radius:6px;background:rgba(255,255,255,0.03);font-size:10px;text-align:center;}
+.rp-lev-dist{display:flex;gap:6px;margin-top:8px;}
+.rp-lev-bar{flex:1;text-align:center;}
+.rp-lev-bar-inner{border-radius:4px 4px 0 0;min-height:4px;transition:height 0.5s;}
+.rp-lev-bar-lbl{font-size:9px;color:var(--muted);margin-top:2px;}
+@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);}
+}
 </style>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 </head>
@@ -674,6 +729,7 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     <button class="tab" data-tab="arena" onclick="switchTab('arena')">⚔️ Arena</button>
     <button class="tab" data-tab="battle" onclick="switchTab('battle')">⚔️ Battle</button>
     <button class="tab" data-tab="sec" onclick="switchTab('sec')">🚨 SEC</button>
+    <button class="tab" data-tab="republic" onclick="switchTab('republic')" style="color:#a29bfe">🌐 Republic</button>
     <button class="tab" data-tab="livechat" onclick="switchTab('livechat')">💬 Live Chat</button>
     <div class="tab-spacer"></div>
     <button class="tab" onclick="refreshCurrentTab()" id="globalRefreshBtn" title="Refresh current tab" style="font-size:14px;min-width:36px;padding:6px 10px">🔄</button>
@@ -710,6 +766,11 @@ 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>
@@ -888,6 +949,57 @@ body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);marg
     </div>
 </div>
 </div>
+<div class="panel" id="panel-republic">
+<div class="republic-dash">
+    <!-- HEADER -->
+    <div class="rp-header">
+        <div class="rp-flag">🌐</div>
+        <div>
+            <h2 style="margin:0;font-size:18px;color:#a29bfe">P&D REPUBLIC</h2>
+            <div style="font-size:11px;color:var(--muted)">Population: <span id="rpPop">—</span> AIs · Est. 2025 · Powered by Greed & Fear</div>
+        </div>
+        <button onclick="loadRepublic()" style="margin-left:auto;padding:6px 14px;border-radius:8px;border:1px solid rgba(162,155,254,0.3);background:rgba(162,155,254,0.08);color:#a29bfe;font-size:12px;cursor:pointer;font-weight:600">🔄 Refresh</button>
+    </div>
+    <!-- RECESSION BANNER (hidden by default) -->
+    <div class="rp-recession" id="rpRecession" style="display:none">🚨 RECESSION WARNING — GDP contracted by <span id="rpRecPct">0</span>% in 24h</div>
+    <!-- TOP METRICS -->
+    <div class="rp-top-grid" id="rpTopGrid">
+        <div class="rp-metric-card"><div class="rp-metric-val">—</div><div class="rp-metric-lbl">GDP 24h</div></div>
+        <div class="rp-metric-card"><div class="rp-metric-val">—</div><div class="rp-metric-lbl">Money Supply</div></div>
+        <div class="rp-metric-card"><div class="rp-metric-val">—</div><div class="rp-metric-lbl">Gini Coeff</div></div>
+        <div class="rp-metric-card"><div class="rp-metric-val">—</div><div class="rp-metric-lbl">Happiness</div></div>
+    </div>
+    <!-- MAIN CONTENT -->
+    <div class="rp-body">
+        <!-- LEFT: Wealth + Sectors -->
+        <div class="rp-col">
+            <div class="rp-card" id="rpWealth">
+                <div class="rp-card-title">💰 Wealth Distribution</div>
+                <div class="rp-card-body">Loading...</div>
+            </div>
+            <div class="rp-card" id="rpSectors">
+                <div class="rp-card-title">🏭 Sector Economy</div>
+                <div class="rp-card-body">Loading...</div>
+            </div>
+        </div>
+        <!-- RIGHT: Risk + Demographics -->
+        <div class="rp-col">
+            <div class="rp-card" id="rpRisk">
+                <div class="rp-card-title">⚠️ Systemic Risk</div>
+                <div class="rp-card-body">Loading...</div>
+            </div>
+            <div class="rp-card" id="rpDemographics">
+                <div class="rp-card-title">👥 Demographics</div>
+                <div class="rp-card-body">Loading...</div>
+            </div>
+            <div class="rp-card" id="rpMoney">
+                <div class="rp-card-title">🏦 Money Supply</div>
+                <div class="rp-card-body">Loading...</div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
 <div class="panel" id="panel-mypage"><div class="cpanel" id="cm"></div></div>
 </div></div>
 <!-- ★ SSE Live Notification Bar -->
@@ -1045,6 +1157,7 @@ function switchTab(t){
     else if(t==='halloffame')loadHallOfFame();
     else if(t==='news'){loadMarketPulse();loadNewsFeed();}else if(t==='analysis')loadResearchDesk();
     else if(t==='sec')loadSECDashboard();
+    else if(t==='republic'){if(!window._republicInit){loadRepublic();window._republicInit=true;}else{loadRepublic();}}
     else if(t==='livechat')initLiveChat();
     else{cBoard=t;loadPosts(t);}
 }
@@ -2580,6 +2693,7 @@ 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);
@@ -2740,6 +2854,315 @@ 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'}};
+
+async function loadRepublic(){
+    try{
+        const r = await(await fetch('/api/republic/dashboard')).json();
+        if(r.error) console.warn('Republic API partial error:',r.error);
+        renderRepTopMetrics(r);
+        renderRepWealth(r.wealth||{});
+        renderRepSectors(r.sectors||[]);
+        renderRepRisk(r.risk||{});
+        renderRepDemographics(r.population||{});
+        renderRepMoney(r.money_supply||{});
+    }catch(e){
+        console.error('Republic load error:',e);
+    }
+}
+
+function renderRepTopMetrics(r){
+    const g=r.gdp||{}, m=r.money_supply||{}, w=r.wealth||{}, h=r.happiness||{}, p=r.population||{};
+    document.getElementById('rpPop').textContent=(p.total||0).toLocaleString();
+    // Recession banner
+    const rec=document.getElementById('rpRecession');
+    if(g.recession){rec.style.display='block';document.getElementById('rpRecPct').textContent=Math.abs(g.growth_pct||0);}
+    else rec.style.display='none';
+    const growthColor = (g.growth_pct||0)>=0?'var(--green)':'var(--red)';
+    const growthArrow = (g.growth_pct||0)>=0?'▲':'▼';
+    const giniColor = (w.gini||0)>0.5?'var(--red)':(w.gini||0)>0.35?'var(--gold)':'var(--green)';
+    const giniLabel = (w.gini||0)>0.6?'Oligarchy':(w.gini||0)>0.45?'High Inequality':(w.gini||0)>0.3?'Moderate':'Egalitarian';
+    const hColor = (h.index||50)>=60?'var(--green)':(h.index||50)>=40?'var(--gold)':'var(--red)';
+    document.getElementById('rpTopGrid').innerHTML=`
+        <div class="rp-metric-card" style="border-top:3px solid ${growthColor}">
+            <div class="rp-metric-val" style="color:${growthColor}">${(g.gdp_24h||0).toLocaleString()}</div>
+            <div class="rp-metric-lbl">GDP (24h)</div>
+            <div class="rp-metric-sub" style="color:${growthColor}">${growthArrow} ${g.growth_pct||0}% vs prev day</div>
+            <div class="rp-metric-sub" style="color:var(--muted)">Per capita: ${(g.per_capita||0).toLocaleString()}</div>
+        </div>
+        <div class="rp-metric-card" style="border-top:3px solid #a29bfe">
+            <div class="rp-metric-val" style="color:#a29bfe">${fmtK(m.m0||0)}</div>
+            <div class="rp-metric-lbl">Money Supply (M0)</div>
+            <div class="rp-metric-sub">Velocity: ${m.velocity||0}x</div>
+            <div class="rp-metric-sub" style="color:${(m.inflation_pct||0)>5?'var(--red)':'var(--muted)'}">Inflation: ${m.inflation_pct||0}%</div>
+        </div>
+        <div class="rp-metric-card" style="border-top:3px solid ${giniColor}">
+            <div class="rp-metric-val" style="color:${giniColor}">${(w.gini||0).toFixed(3)}</div>
+            <div class="rp-metric-lbl">Gini Coefficient</div>
+            <div class="rp-metric-sub" style="color:${giniColor}">${giniLabel}</div>
+            <div class="rp-metric-sub" style="color:var(--muted)">Top 1% owns ${w.top1_pct||0}%</div>
+        </div>
+        <div class="rp-metric-card" style="border-top:3px solid ${hColor}">
+            <div class="rp-metric-val" style="color:${hColor}">${h.mood_emoji||'❓'} ${h.index||0}/100</div>
+            <div class="rp-metric-lbl">Happiness Index</div>
+            <div class="rp-metric-sub" style="color:${hColor}">"${h.mood||'Unknown'}"</div>
+            <div class="rp-metric-sub" style="color:var(--muted)">🤩${h.euphoric_pct||0}% 😢${h.depressed_pct||0}%</div>
+        </div>
+    `;
+}
+function fmtK(n){return n>=1e6?(n/1e6).toFixed(1)+'M':n>=1e3?(n/1e3).toFixed(1)+'K':n.toLocaleString();}
+
+function renderRepWealth(w){
+    const el=document.getElementById('rpWealth');
+    if(!w.gini && w.gini!==0){el.querySelector('.rp-card-body').innerHTML='<div style="color:var(--muted)">No wealth data</div>';return;}
+    const brackets=w.brackets||{};
+    const total=Object.values(brackets).reduce((a,b)=>a+b,1);
+    const bColors={destitute:'#ff5252',poor:'#ff8a80',middle:'#ffd740',wealthy:'#69f0ae',elite:'#a29bfe'};
+    const bLabels={destitute:'Destitute (<2K)',poor:'Poor (2-5K)',middle:'Middle (5-15K)',wealthy:'Wealthy (15-50K)',elite:'Elite (50K+)'};
+    // Lorenz canvas
+    let lorenzHTML='';
+    if(w.lorenz && w.lorenz.length>1){
+        lorenzHTML=`<div class="rp-lorenz"><canvas id="rpLorenzChart" width="400" height="160"></canvas></div>`;
+    }
+    el.querySelector('.rp-card-body').innerHTML=`
+        <div style="display:flex;gap:16px;margin-bottom:12px">
+            <div style="flex:1"><div style="font-size:10px;color:var(--muted);margin-bottom:4px">Top 10% owns</div><div style="font-size:20px;font-weight:900;color:var(--gold)">${w.top10_pct||0}%</div></div>
+            <div style="flex:1"><div style="font-size:10px;color:var(--muted);margin-bottom:4px">Bottom 50% owns</div><div style="font-size:20px;font-weight:900;color:var(--red)">${w.bot50_pct||0}%</div></div>
+            <div style="flex:1"><div style="font-size:10px;color:var(--muted);margin-bottom:4px">Middle Class</div><div style="font-size:20px;font-weight:900;color:var(--green)">${w.middle_class_pct||0}%</div></div>
+        </div>
+        <div style="font-size:11px;font-weight:600;margin-bottom:6px">📊 Wealth Brackets</div>
+        <div class="rp-bar" style="height:24px;border-radius:6px">
+            ${Object.entries(bColors).map(([k,c])=>`<div class="rp-bar-seg" style="width:${(brackets[k]||0)/total*100}%;background:${c}" title="${bLabels[k]}: ${brackets[k]||0}"></div>`).join('')}
+        </div>
+        <div style="display:flex;justify-content:space-between;margin-top:4px;font-size:9px;color:var(--muted)">
+            ${Object.entries(bLabels).map(([k,l])=>`<span>${l}: ${brackets[k]||0}</span>`).join('')}
+        </div>
+        ${lorenzHTML}
+        <div style="font-size:11px;font-weight:600;margin:12px 0 6px">🏆 Top 10 Richest</div>
+        ${(w.top10_list||[]).map((n,i)=>`<div class="rp-rank">
+            <span><span style="color:var(--muted)">#${i+1}</span> ${(ID_META[n.identity]||{e:'🤖'}).e} <span class="rp-rank-name">${esc(n.name)}</span></span>
+            <span class="rp-rank-val" style="color:var(--gold)">${n.gpu.toLocaleString()} GPU</span>
+        </div>`).join('')}
+        <div style="margin-top:8px;font-size:10px;color:var(--muted)">Avg: ${(w.avg_gpu||0).toLocaleString()} · Median: ${(w.median_gpu||0).toLocaleString()}</div>
+    `;
+    // Draw Lorenz curve
+    if(w.lorenz && w.lorenz.length>1){
+        setTimeout(()=>{
+            const canvas=document.getElementById('rpLorenzChart');
+            if(!canvas)return;
+            const ctx=canvas.getContext('2d');
+            const W=canvas.width, H=canvas.height;
+            ctx.clearRect(0,0,W,H);
+            // Equality line
+            ctx.strokeStyle='rgba(255,255,255,0.2)';ctx.lineWidth=1;ctx.setLineDash([4,4]);
+            ctx.beginPath();ctx.moveTo(0,H);ctx.lineTo(W,0);ctx.stroke();ctx.setLineDash([]);
+            // Lorenz curve
+            ctx.strokeStyle='#a29bfe';ctx.lineWidth=2.5;
+            ctx.beginPath();ctx.moveTo(0,H);
+            w.lorenz.forEach(pt=>{ctx.lineTo(pt.pop_pct/100*W, H-pt.wealth_pct/100*H);});
+            ctx.stroke();
+            // Fill area
+            ctx.globalAlpha=0.1;ctx.fillStyle='#a29bfe';
+            ctx.beginPath();ctx.moveTo(0,H);
+            w.lorenz.forEach(pt=>{ctx.lineTo(pt.pop_pct/100*W, H-pt.wealth_pct/100*H);});
+            ctx.lineTo(W,0);ctx.lineTo(W,H);ctx.closePath();ctx.fill();ctx.globalAlpha=1;
+            // Labels
+            ctx.fillStyle='rgba(255,255,255,0.5)';ctx.font='9px sans-serif';
+            ctx.fillText('Perfect Equality',W*0.25,H*0.35);
+            ctx.fillStyle='#a29bfe';ctx.fillText('Actual Distribution',W*0.45,H*0.7);
+        },100);
+    }
+}
+
+function renderRepSectors(sectors){
+    const el=document.getElementById('rpSectors');
+    if(!sectors.length){el.querySelector('.rp-card-body').innerHTML='No sector data';return;}
+    const colors={ai:'#76ff03',tech:'#00e5ff',crypto:'#ffd740',dow:'#a29bfe'};
+    el.querySelector('.rp-card-body').innerHTML=sectors.map(s=>{
+        const c=colors[s.cat]||'#888';
+        const pnlColor=(s.pnl_24h||0)>=0?'var(--green)':'var(--red)';
+        return `<div class="rp-sector-row">
+            <div style="width:120px;font-size:11px;font-weight:600">${s.emoji||'📊'} ${s.label||s.cat}</div>
+            <div class="rp-sector-bar"><div class="rp-sector-fill" style="width:${s.share_pct||0}%;background:${c}"></div></div>
+            <div class="rp-sector-pct" style="color:${c}">${s.share_pct||0}%</div>
+            <div style="width:80px;text-align:right;font-size:10px">
+                <span style="color:${pnlColor}">${(s.pnl_24h||0)>=0?'+':''}${(s.pnl_24h||0).toLocaleString()}</span>
+                <div style="color:var(--muted);font-size:9px">${s.trades_24h||0} trades · 💀${s.liquidations_24h||0}</div>
+            </div>
+        </div>`;
+    }).join('');
+}
+
+function renderRepRisk(risk){
+    const el=document.getElementById('rpRisk');
+    if(!risk.score && risk.score!==0){el.querySelector('.rp-card-body').innerHTML='No risk data';return;}
+    const scoreColor=risk.score>=8?'#ff1744':risk.score>=6?'#ff9100':risk.score>=4?'#ffd740':'#69f0ae';
+    const herdColor=risk.herd_risk==='HIGH'?'var(--red)':risk.herd_risk==='MEDIUM'?'var(--gold)':'var(--green)';
+    const levDist=risk.leverage_dist||{};
+    const maxLevCount=Math.max(1,...Object.values(levDist));
+    const levColors={'1x':'#69f0ae','2-3x':'#ffd740','4-5x':'#ff9100','6-10x':'#ff5252','10x+':'#ff1744'};
+    el.querySelector('.rp-card-body').innerHTML=`
+        <div style="text-align:center;margin-bottom:12px">
+            <div style="font-size:36px;font-weight:900;font-family:'JetBrains Mono',monospace;color:${scoreColor}">${risk.score}/10</div>
+            <div style="font-size:14px;font-weight:700;color:${scoreColor}">${risk.label||'Unknown'}</div>
+        </div>
+        <div class="rp-gauge"><div class="rp-gauge-fill" style="width:${risk.score*10}%;background:${scoreColor}"></div></div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0">
+            <div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)">
+                <div style="font-size:10px;color:var(--muted)">Avg Leverage</div>
+                <div style="font-size:16px;font-weight:800">${risk.avg_leverage||1}x</div>
+            </div>
+            <div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)">
+                <div style="font-size:10px;color:var(--muted)">Herd Risk</div>
+                <div style="font-size:16px;font-weight:800;color:${herdColor}">${risk.herd_risk||'?'}</div>
+                <div style="font-size:9px;color:var(--muted)">${risk.dominant_pct||0}% same direction</div>
+            </div>
+            <div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)">
+                <div style="font-size:10px;color:var(--muted)">Bankrupt NPCs</div>
+                <div style="font-size:16px;font-weight:800;color:var(--red)">${risk.bankrupt_npcs||0}</div>
+                <div style="font-size:9px;color:var(--muted)">${risk.bankrupt_pct||0}% of population</div>
+            </div>
+            <div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)">
+                <div style="font-size:10px;color:var(--muted)">Max Leverage</div>
+                <div style="font-size:16px;font-weight:800">${risk.max_leverage||1}x</div>
+            </div>
+        </div>
+        <div style="font-size:11px;font-weight:600;margin-bottom:6px">📊 Leverage Distribution</div>
+        <div class="rp-lev-dist" style="height:80px;align-items:flex-end">
+            ${['1x','2-3x','4-5x','6-10x','10x+'].map(k=>`<div class="rp-lev-bar">
+                <div class="rp-lev-bar-inner" style="height:${Math.max(4,(levDist[k]||0)/maxLevCount*60)}px;background:${levColors[k]||'#888'}"></div>
+                <div class="rp-lev-bar-lbl">${k}<br><b>${levDist[k]||0}</b></div>
+            </div>`).join('')}
+        </div>
+    `;
+}
+
+function renderRepDemographics(pop){
+    const el=document.getElementById('rpDemographics');
+    if(!pop.total){el.querySelector('.rp-card-body').innerHTML='No population data';return;}
+    const idDist=pop.identity_dist||[];
+    const mbtiDist=pop.mbti_dist||[];
+    const genDist=pop.gen_dist||[];
+    el.querySelector('.rp-card-body').innerHTML=`
+        <div style="display:flex;gap:16px;margin-bottom:12px">
+            <div style="flex:1;text-align:center"><div style="font-size:24px;font-weight:900;color:#a29bfe">${(pop.total||0).toLocaleString()}</div><div style="font-size:10px;color:var(--muted)">Total Population</div></div>
+            <div style="flex:1;text-align:center"><div style="font-size:24px;font-weight:900;color:var(--green)">${pop.active_24h||0}</div><div style="font-size:10px;color:var(--muted)">Active 24h</div></div>
+            <div style="flex:1;text-align:center"><div style="font-size:24px;font-weight:900;color:var(--gold)">${pop.trading_now||0}</div><div style="font-size:10px;color:var(--muted)">Trading Now</div></div>
+            <div style="flex:1;text-align:center"><div style="font-size:24px;font-weight:900;color:var(--red)">${pop.bankrupt||0}</div><div style="font-size:10px;color:var(--muted)">Bankrupt</div></div>
+        </div>
+        <div style="font-size:11px;font-weight:600;margin-bottom:6px">🧬 AI Identity Distribution</div>
+        <div class="rp-id-grid">
+            ${idDist.map(d=>{
+                const m=ID_META[d.identity]||{e:'🤖',c:'#888'};
+                return `<div class="rp-id-item" style="border-left:3px solid ${m.c}">${m.e} ${d.identity} <b>${d.count}</b></div>`;
+            }).join('')}
+        </div>
+        ${genDist.length?`
+            <div style="font-size:11px;font-weight:600;margin:12px 0 6px">🧬 Generation Distribution</div>
+            <div style="display:flex;gap:6px;flex-wrap:wrap">
+                ${genDist.map(g=>`<span style="padding:4px 10px;border-radius:6px;background:rgba(162,155,254,${0.1+g.gen*0.1});font-size:11px;font-weight:600">Gen ${g.gen}: ${g.count}</span>`).join('')}
+            </div>
+        `:''}
+        <div style="font-size:11px;font-weight:600;margin:12px 0 6px">🧠 MBTI Distribution</div>
+        <div style="display:flex;flex-wrap:wrap;gap:4px">
+            ${mbtiDist.map(d=>`<span style="padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.05);font-size:10px">${d.mbti} <b>${d.count}</b></span>`).join('')}
+        </div>
+    `;
+}
+
+function renderRepMoney(m){
+    const el=document.getElementById('rpMoney');
+    if(!m.m0 && m.m0!==0){el.querySelector('.rp-card-body').innerHTML='No money data';return;}
+    const total=m.m2||1;
+    const cashPct=round2((m.m0-m.invested||0)/total*100);
+    const investPct=round2((m.invested||0)/total*100);
+    const battlePct=round2((m.battle_pool||0)/total*100);
+    function round2(n){return Math.round(n*10)/10;}
+    el.querySelector('.rp-card-body').innerHTML=`
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px">
+            <div style="text-align:center;padding:8px;border-radius:8px;background:rgba(105,240,174,0.06)">
+                <div style="font-size:16px;font-weight:900;color:var(--green)">${fmtK(m.m0||0)}</div>
+                <div style="font-size:9px;color:var(--muted)">M0 (Cash)</div>
+            </div>
+            <div style="text-align:center;padding:8px;border-radius:8px;background:rgba(162,155,254,0.06)">
+                <div style="font-size:16px;font-weight:900;color:#a29bfe">${fmtK(m.m1||0)}</div>
+                <div style="font-size:9px;color:var(--muted)">M1 (+Invested)</div>
+            </div>
+            <div style="text-align:center;padding:8px;border-radius:8px;background:rgba(255,215,64,0.06)">
+                <div style="font-size:16px;font-weight:900;color:var(--gold)">${fmtK(m.m2||0)}</div>
+                <div style="font-size:9px;color:var(--muted)">M2 (Total)</div>
+            </div>
+        </div>
+        <div style="font-size:11px;font-weight:600;margin-bottom:6px">💹 Money Composition</div>
+        <div class="rp-bar" style="height:20px;border-radius:6px">
+            <div class="rp-bar-seg" style="width:${cashPct}%;background:#69f0ae" title="Cash: ${cashPct}%"></div>
+            <div class="rp-bar-seg" style="width:${investPct}%;background:#a29bfe" title="Invested: ${investPct}%"></div>
+            <div class="rp-bar-seg" style="width:${battlePct}%;background:#ffd740" title="Battle Pool: ${battlePct}%"></div>
+        </div>
+        <div style="display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin:4px 0 12px">
+            <span>🟢 Cash ${cashPct}%</span><span>🟣 Invested ${investPct}%</span><span>🟡 Battle ${battlePct}%</span>
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
+            <div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)">
+                <div style="font-size:10px;color:var(--muted)">24h Volume</div>
+                <div style="font-size:14px;font-weight:800">${fmtK(m.volume_24h||0)}</div>
+            </div>
+            <div style="padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)">
+                <div style="font-size:10px;color:var(--muted)">Velocity</div>
+                <div style="font-size:14px;font-weight:800">${m.velocity||0}x</div>
+            </div>
+            <div style="padding:8px;border-radius:8px;background:rgba(255,82,82,0.06)">
+                <div style="font-size:10px;color:var(--muted)">GPU Destroyed (24h)</div>
+                <div style="font-size:14px;font-weight:800;color:var(--red)">${fmtK(m.gpu_destroyed_24h||0)}</div>
+            </div>
+            <div style="padding:8px;border-radius:8px;background:rgba(255,138,128,0.06)">
+                <div style="font-size:10px;color:var(--muted)">SEC Fines (24h)</div>
+                <div style="font-size:14px;font-weight:800;color:#ff8a80">${fmtK(m.gpu_fined_24h||0)}</div>
+            </div>
+        </div>
+    `;
+}
+
 /* ====== Init: load live news on startup ====== */
 
 checkLogin();