Pension Roulette · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/pension-roulette/"> <meta name="description" content="A casino-themed 40-year pension allocation sim. Spin the wheel of markets. Land softly at 65."/> <meta name="theme-color" content="#0a2a1f"/> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E%F0%9F%8E%B0%3C/text%3E%3C/svg%3E"/> <style> :root{--felt:#0d4a31;--feltDark:#072919;--gold:#f4c45a;--goldDark:#a37512;--cream:#f3e7c9;--red:#b91c1c;--black:#0f0f0f} *,*::before,*::after{box-sizing:border-box} html,body{margin:0;height:100%;background:#000;color:#f3e7c9;font-family:Georgia,'Times New Roman',serif;min-height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%} body{-webkit-user-select:none;user-select:none;background: radial-gradient(ellipse 90% 60% at 50% 30%,rgba(244,196,90,.05) 0%,transparent 60%), radial-gradient(ellipse 80% 80% at 50% 50%,#0a3d27 0%,#062716 60%,#020f08 100%)} /* casino floor — repeating diamond pattern */ body::before{content:"";position:fixed;inset:0;pointer-events:none;background: radial-gradient(circle,rgba(244,196,90,.06) 0,transparent 2px) 0 0/24px 24px, radial-gradient(circle,rgba(244,196,90,.04) 0,transparent 2px) 12px 12px/24px 24px; opacity:.5;z-index:0} /* art-deco vignette */ body::after{content:"";position:fixed;inset:0;pointer-events:none;background: radial-gradient(ellipse 100% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.85) 100%);z-index:1} .wrap{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:36px 24px 80px} .crumb{display:inline-block;font-size:11px;color:var(--gold);margin-bottom:18px;padding:6px 14px;border:1px solid rgba(244,196,90,.4);border-radius:2px;background:rgba(0,0,0,.5);text-decoration:none;letter-spacing:.2em;text-transform:uppercase;font-family:Georgia,serif;font-weight:700} .crumb:hover{color:#fff;border-color:var(--gold);background:rgba(244,196,90,.1)} /* Title in art-deco style */ header.h{text-align:center;margin-bottom:18px;position:relative} h1{font-size:clamp(28px,5vw,42px);margin:0;letter-spacing:.06em;color:var(--gold);text-shadow:0 0 22px rgba(244,196,90,.5),0 4px 8px rgba(0,0,0,.7);font-family:Georgia,'Times New Roman',serif} h1 .amp{color:var(--cream);font-style:italic;font-weight:400;margin:0 6px} header.h::before,header.h::after{content:"";position:absolute;top:50%;width:18%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)} header.h::before{left:6%}header.h::after{right:6%} .sub{font-size:12px;color:var(--cream);letter-spacing:.24em;text-align:center;margin-bottom:22px;text-transform:uppercase;font-weight:700;opacity:.75} /* HUD chips like betting chips */ .hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:18px} .chip{display:flex;align-items:center;gap:8px;background:radial-gradient(circle at 30% 30%,var(--feltDark),#02160c);border:2px solid var(--gold);border-radius:999px;padding:8px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--cream);box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)} .chip b{font-size:18px;color:var(--gold);font-family:Georgia,serif;letter-spacing:0} /* Pot display - main treasury */ .pot{position:relative;background:linear-gradient(180deg,rgba(13,74,49,.95),rgba(7,41,25,.95));border:3px solid var(--gold);border-radius:16px;padding:24px;text-align:center;margin-bottom:20px;box-shadow:0 18px 40px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.3)} .pot::before{content:"";position:absolute;inset:6px;border:1px solid rgba(244,196,90,.4);border-radius:12px;pointer-events:none} .pot .label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:6px} .pot .v{font-size:clamp(36px,7vw,56px);font-weight:900;color:var(--gold);letter-spacing:-.01em;text-shadow:0 0 24px rgba(244,196,90,.55),0 4px 8px rgba(0,0,0,.7);font-family:Georgia,'Times New Roman',serif} .pot .age{font-size:12px;color:var(--cream);margin-top:6px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.75} .pot .age b{color:var(--gold)} /* Roulette wheel (CSS-built spinning element) */ .tableLayout{display:grid;grid-template-columns:auto 1fr;gap:24px;margin-bottom:18px;align-items:center} @media (max-width:760px){.tableLayout{grid-template-columns:1fr}} .wheel{width:220px;height:220px;justify-self:center;position:relative;flex-shrink:0} .wheel .outer{position:absolute;inset:0;border-radius:50%;background: radial-gradient(circle at 35% 30%,#7a5520,#3a2810 60%,#1a1208 100%); box-shadow:0 16px 40px rgba(0,0,0,.7),inset 0 0 24px rgba(0,0,0,.6),inset 0 4px 0 rgba(244,196,90,.3)} .wheel .ring{position:absolute;inset:14px;border-radius:50%;background:conic-gradient( #c41818 0deg 36deg,#0f0f0f 36deg 72deg,#c41818 72deg 108deg,#0f0f0f 108deg 144deg, #c41818 144deg 180deg,#0f0f0f 180deg 216deg,#c41818 216deg 252deg,#0f0f0f 252deg 288deg, #c41818 288deg 324deg,#16a34a 324deg 360deg );box-shadow:inset 0 0 12px rgba(0,0,0,.6);transition:transform 2.4s cubic-bezier(.15,.7,.2,1)} .wheel .inner{position:absolute;inset:48px;border-radius:50%;background: radial-gradient(circle at 35% 30%,#c69847,#7a5520 70%,#3a2810 100%); box-shadow:inset 0 0 16px rgba(0,0,0,.6),0 0 0 3px var(--gold)} .wheel .hub{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#a8945a 60%,#3a2810 100%);box-shadow:inset 0 0 8px rgba(0,0,0,.4)} .wheel .pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid var(--gold);filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));z-index:3} .wheel .ball{position:absolute;width:12px;height:12px;background:radial-gradient(circle at 30% 30%,#fff,#888);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.6);left:50%;top:18px;margin-left:-6px;z-index:2;transition:transform 2.4s cubic-bezier(.15,.7,.2,1)} .wheel.spin .ring{transform:rotate(1440deg)} .wheel.spin .ball{transform:rotate(-1080deg) translateY(36px) rotate(1080deg)} /* Allocation panel — bet sliders on a casino felt */ .bets{background:linear-gradient(180deg,rgba(13,74,49,.96),rgba(7,41,25,.96));border:2px solid rgba(244,196,90,.5);border-radius:12px;padding:18px 20px;box-shadow:0 12px 32px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.3)} .bets .title{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:14px;text-align:center;font-family:Georgia,serif} .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin:10px 0;padding:8px 12px;background:rgba(0,0,0,.25);border:1px solid rgba(244,196,90,.18);border-radius:6px} .row .name{font-size:14px;font-weight:700;color:var(--cream);letter-spacing:.02em;font-family:Georgia,serif} .row .name .desc{display:block;font-size:11px;color:#9cb4a8;font-weight:400;margin-top:2px;font-style:italic;letter-spacing:.02em} .row .group{display:flex;align-items:center;gap:12px} .row input[type=range]{width:120px;accent-color:var(--gold);height:6px} .row .pct{font-weight:900;color:var(--gold);min-width:54px;text-align:right;font-family:Georgia,serif;font-size:18px;text-shadow:0 0 8px rgba(244,196,90,.4)} .total{margin-top:10px;text-align:right;font-size:13px;color:var(--cream);letter-spacing:.1em;text-transform:uppercase;font-weight:700} .total.bad{color:var(--red)} /* Event ticker — looks like a casino announcement strip */ .event{background:linear-gradient(180deg,#1f0808,#0e0202);border:2px solid #a83838;border-left:6px solid var(--red);border-radius:6px;padding:12px 16px;margin:14px 0;font-size:13.5px;line-height:1.55;color:var(--cream);font-family:Georgia,serif;box-shadow:0 6px 18px rgba(0,0,0,.5)} .event b{color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:11px;display:block;margin-bottom:4px} /* Spin button — chunky casino-game style */ .btnbar{text-align:center;margin:14px 0} .btn{cursor:pointer;border:2px solid var(--gold);background:linear-gradient(180deg,#7a5520,#3a2810);color:var(--gold);font-weight:900;padding:14px 28px;border-radius:4px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;display:inline-block;font-family:Georgia,serif;box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(244,196,90,.4);transition:all .15s} .btn:hover{background:linear-gradient(180deg,#9c702b,#5a3e1a);transform:translateY(-2px);box-shadow:0 9px 18px rgba(244,196,90,.3),inset 0 1px 0 rgba(244,196,90,.5)} .btn:disabled{opacity:.4;cursor:not-allowed;transform:none} .btn.ghost{background:transparent;color:var(--cream);border-color:rgba(244,196,90,.4)} .btn.ghost:hover{background:rgba(244,196,90,.08)} /* History ledger */ .history{margin-top:14px;background:linear-gradient(180deg,#0e0a08,#070403);border:1px solid rgba(244,196,90,.3);border-radius:8px;padding:14px 18px;font-size:12.5px;line-height:1.55;max-height:200px;overflow-y:auto;font-family:Georgia,serif;box-shadow:inset 0 4px 8px rgba(0,0,0,.5)} .history .e{margin:6px 0;color:var(--cream);padding:6px 10px;background:rgba(244,196,90,.04);border-left:2px solid var(--gold);border-radius:0 4px 4px 0} .history .e b{color:var(--gold)} .history .e.bad{border-left-color:var(--red)} .history .e.bad b{color:#fca5a5} /* Modals — like opening a treasure chest */ .modal{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:30;padding:18px;font-family:Georgia,serif} .modal.hidden{display:none} .card{background:radial-gradient(ellipse 90% 70% at 50% 30%,rgba(244,196,90,.08) 0%,transparent 60%),linear-gradient(180deg,#13150f 0%,#080604 100%);border:3px solid var(--gold);border-radius:14px;max-width:560px;width:100%;padding:32px;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.8),0 0 0 1px rgba(244,196,90,.4),inset 0 0 40px rgba(244,196,90,.06);position:relative} .card::before,.card::after{content:"";position:absolute;width:48px;height:48px;border:1px solid var(--gold);opacity:.6} .card::before{top:8px;left:8px;border-right:none;border-bottom:none} .card::after{bottom:8px;right:8px;border-left:none;border-top:none} .card h2{margin:0 0 6px;font-size:30px;color:var(--gold);text-shadow:0 0 20px rgba(244,196,90,.5);letter-spacing:.06em} .card .s{color:var(--cream);font-size:11px;margin-bottom:18px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;opacity:.7} .rules{text-align:left;background:rgba(244,196,90,.06);border:1px solid rgba(244,196,90,.2);border-left:3px solid var(--gold);border-radius:0 4px 4px 0;padding:16px 18px;font-size:14px;line-height:1.65;margin-bottom:18px;color:var(--cream)} .rules li{margin:6px 0} .rules b{color:var(--gold)} .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 18px} .stat{background:rgba(0,0,0,.45);border:1px solid rgba(244,196,90,.25);border-radius:6px;padding:14px} .stat .v{font-size:28px;font-weight:900;color:var(--gold);text-shadow:0 0 12px rgba(244,196,90,.45);font-family:Georgia,serif} .stat .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin-top:4px;font-weight:700;opacity:.7} .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* spinning glow effect when wheel is spinning */ @keyframes wheelGlow{0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.7),inset 0 0 24px rgba(0,0,0,.6),0 0 30px rgba(244,196,90,.3)}50%{box-shadow:0 16px 40px rgba(0,0,0,.7),inset 0 0 24px rgba(0,0,0,.6),0 0 50px rgba(244,196,90,.6)}} .wheel.spin .outer{animation:wheelGlow 1.2s ease-in-out infinite} /* floating coins on event */ .coin{position:fixed;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#f4c45a 30%,#a37512 70%,#5a3e1a 100%);box-shadow:0 4px 12px rgba(0,0,0,.6),inset -2px -2px 4px rgba(0,0,0,.3);pointer-events:none;z-index:20;font-weight:900;color:#5a3e1a;font-size:20px;text-align:center;line-height:30px;font-family:Georgia,serif} @media (max-width:520px){ .wheel{width:160px;height:160px} .wheel .inner{inset:36px} .wheel .hub{inset:34%} .wheel .ball{width:9px;height:9px;margin-left:-4.5px} } </style> <link rel="stylesheet" href="/assets/light-theme.css?v=2026-05-31-gold" /> <script defer src="/assets/analytics.js?v=2026-05-20"></script> </head><body> <div class="wrap"> <a class="crumb" href="/innovative-games/">← Catalogue</a> <header class="h"><h1>Pension <span class="amp">·</span> Roulette</h1></header> <div class="sub">— A Forty-Year Wager —</div> <div class="hud"> <div class="chip">Decade <b><span id="dec">1</span>/8</b></div> <div class="chip">Age <b id="age">25</b></div> <div class="chip">Salary <b id="sal">$60k</b></div> </div> <div class="pot"> <div class="label">Retirement Treasury</div> <div class="v" id="pot">$0</div> <div class="age">Target at 65 · <b>$1.0M</b> minimum · <b>$1.5M</b> comfortable</div> </div> <div class="tableLayout"> <div class="wheel" id="wheel"> <div class="outer"></div> <div class="ring"></div> <div class="inner"></div> <div class="hub"></div> <div class="pointer"></div> <div class="ball"></div> </div> <div class="bets"> <div class="title">— Allocate Your Stake —</div> <div id="sliders"></div> <div class="total" id="total">Total: 0%</div> </div> </div> <div id="evbox"></div> <div class="btnbar"> <button class="btn" id="next">Spin the Decade →</button> </div> <div class="history" id="hist"> <div class="e">📜 <b>Age 25</b> · The croupier slides $0 into your treasury. The wheel awaits.</div> </div> </div> <div class="modal" id="intro"> <div class="card"> <h2>♠ Pension Roulette ♠</h2> <div class="s">Pension Benefits & Plan · 14-week sim</div> <ul class="rules"> <li>You sit at the high-roller table. The wheel of <b>forty years</b> spins eight times — once every five years.</li> <li>Before each spin, allocate your <b>8% contribution</b> across <b>equities · bonds · cash · employer DB</b>.</li> <li>The wheel deals you market reality: <b>bull · bear · sideways · inflation · rate hike · employer bonus · layoff · late-career boost</b>.</li> <li>The house always wins... unless you walk away from age 65 with <b>$1M minimum</b> ($1.5M for a comfortable seat).</li> </ul> <div class="btnrow"> <button class="btn" id="start">Place Your First Bet →</button> <a class="btn ghost" href="/games/pension-benefits-and-plan/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">Age 65</h2> <div class="s" id="overSub"></div> <div class="stats"> <div class="stat"><div class="v" id="finPot">$0</div><div class="l">Final treasury</div></div> <div class="stat"><div class="v" id="finRank">—</div><div class="l">Rank at the table</div></div> </div> <div class="rules" id="overNote"></div> <div class="btnrow"><button class="btn" id="again">Press your luck again</button><a class="btn ghost" href="/innovative-games/">Leave the table</a></div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); const ASSETS = [ { k:'eq', name:'Equities', desc:'Stocks. High return, high volatility.' }, { k:'bd', name:'Bonds', desc:'Lower return, lower volatility.' }, { k:'ca', name:'Cash', desc:'Stable, but real return often ≈ 0.' }, { k:'db', name:'Employer DB', desc:'Guaranteed match, capped by employer.' }, ]; const EVENTS = [ { name:'Bull Market', prob:.18, mods:{eq:+.12,bd:+.01,ca:-.01,db:0}, note:"Equities surge +12%." }, { name:'Bear Market', prob:.12, mods:{eq:-.10,bd:+.03,ca:0,db:0}, note:"Equities crash −10%. Bonds get a safety bump." }, { name:'Sideways Market', prob:.30, mods:{eq:+.04,bd:+.02,ca:+.005,db:0}, note:"Markets meander. Normal returns." }, { name:'Rate-Hike Cycle', prob:.10, mods:{eq:+.02,bd:-.04,ca:+.015,db:0}, note:"Rates rise. Bonds suffer, cash slightly better." }, { name:'Inflation Surge', prob:.10, mods:{eq:+.06,bd:-.05,ca:-.03,db:-.01}, note:"Inflation eats fixed income; cash loses real value." }, { name:'Employer Boost', prob:.08, mods:{eq:+.03,bd:+.02,ca:0,db:+.04}, note:"Employer doubled the pension match." }, { name:'Layoff', prob:.06, mods:{eq:+.03,bd:+.02,ca:0,db:-.05}, note:"You were laid off mid-block. Contributions paused." }, { name:'Late-Career Bonus', prob:.06, mods:{eq:+.05,bd:+.02,ca:0,db:+.02}, note:"Promotion + lump-sum bonus added." }, ]; const BASE = {eq:.07,bd:.04,ca:.012,db:.05}; const state = { dec:0, age:25, sal:60, pot:0, alloc:{eq:60,bd:20,ca:10,db:10}, hist:[] }; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.dec=0; state.age=25; state.sal=60; state.pot=0; state.alloc={eq:60,bd:20,ca:10,db:10}; state.hist=[]; renderSliders(); refresh(); $('hist').innerHTML = '<div class="e">📜 <b>Age 25</b> · The croupier slides $0 into your treasury. The wheel awaits.</div>'; } function refresh(){ $('dec').textContent = Math.min(state.dec+1, 8); $('age').textContent = state.age; $('sal').textContent = '$' + state.sal + 'k'; $('pot').textContent = '$' + Math.round(state.pot).toLocaleString() + 'k'; } function renderSliders(){ const s = $('sliders'); s.innerHTML=''; ASSETS.forEach(a => { const row = document.createElement('div'); row.className='row'; row.innerHTML = `<div class="name">${esc(a.name)}<span class="desc">${esc(a.desc)}</span></div> <div class="group"><input type="range" min="0" max="100" step="5" value="${state.alloc[a.k]}" data-k="${a.k}"/><span class="pct" id="p_${a.k}">${state.alloc[a.k]}%</span></div>`; s.appendChild(row); }); [...s.querySelectorAll('input')].forEach(i => i.oninput = e => { state.alloc[e.target.dataset.k] = +e.target.value; $(`p_${e.target.dataset.k}`).textContent = state.alloc[e.target.dataset.k] + '%'; updateTotal(); }); updateTotal(); } function updateTotal(){ const tot = Object.values(state.alloc).reduce((a,b)=>a+b,0); $('total').textContent = `Total: ${tot}%${tot===100?'':' — must equal 100%'}`; $('total').classList.toggle('bad', tot!==100); $('next').disabled = tot !== 100; } function advance(){ const tot = Object.values(state.alloc).reduce((a,b)=>a+b,0); if (tot !== 100) return; // Spin animation const wheel = $('wheel'); wheel.classList.remove('spin'); void wheel.offsetWidth; wheel.classList.add('spin'); $('next').disabled = true; setTimeout(() => doSpinResult(), 1800); } function doSpinResult(){ // pick event const r = Math.random(); let cum=0; let ev=null; for (const e of EVENTS){ cum+=e.prob; if (r<=cum){ ev=e; break; } } if (!ev) ev = EVENTS[2]; // contribution = 8% of salary × 5 years const contrib = state.sal * 0.08 * 5; const ret = {}; Object.keys(BASE).forEach(k => { ret[k] = BASE[k] + (ev.mods[k]||0); }); const weightedRate = Object.keys(state.alloc).reduce((s,k)=>s + (state.alloc[k]/100)*ret[k], 0); let pot = state.pot; pot = pot * Math.pow(1+weightedRate, 5); const newContribGrown = contrib * Math.pow(1+weightedRate, 2.5); const dbMatch = Math.min(state.alloc.db,60) * 0.005 * state.sal * 5 * 0.5; pot += newContribGrown + dbMatch * Math.pow(1+weightedRate, 2.5); state.pot = Math.round(pot*10)/10; const salGrowth = 0.03 + (ev.name==='Late-Career Bonus'?.04:0) + (ev.name==='Layoff'?-.02:0); state.sal = Math.round(state.sal * Math.pow(1+salGrowth, 5)); state.age += 5; state.dec++; state.hist.unshift({ age:state.age, event:ev.name, note:ev.note, pot:state.pot, rate:weightedRate }); $('evbox').innerHTML = `<div class="event"><b>${esc(ev.name)} · Ages ${state.age-5}–${state.age}</b>${esc(ev.note)}<br><i style="opacity:.7">Weighted real return: ${(weightedRate*100).toFixed(1)}%/yr</i></div>`; $('hist').innerHTML = state.hist.map(h => `<div class="e ${h.event==='Bear Market'||h.event==='Layoff'?'bad':''}">🎲 <b>Age ${h.age}</b> · ${esc(h.event)} → treasury $${Math.round(h.pot).toLocaleString()}k (${(h.rate*100).toFixed(1)}%/yr)</div>`).join(''); spawnCoin(); refresh(); $('next').disabled = false; if (state.dec >= 8) end(); } function spawnCoin(){ const wheel = $('wheel'); const r = wheel.getBoundingClientRect(); for (let i=0;i<5;i++){ setTimeout(()=>{ const coin = document.createElement('div'); coin.className='coin'; coin.textContent='$'; coin.style.left = (r.left + r.width/2 + (Math.random()-.5)*40) + 'px'; coin.style.top = (r.top + r.height/2) + 'px'; document.body.appendChild(coin); const dx = (Math.random()-.5)*200, dy = -100 - Math.random()*120; coin.animate([ { transform:'translate(0,0) rotate(0deg)', opacity:1 }, { transform:`translate(${dx*0.5}px, ${dy*0.5}px) rotate(360deg)`, opacity:1, offset:.5 }, { transform:`translate(${dx}px, ${dy + 240}px) rotate(720deg)`, opacity:0 } ], { duration:1100, easing:'cubic-bezier(.3,.1,.6,.3)', fill:'forwards' }); setTimeout(()=>coin.remove(), 1200); }, i*60); } } function end(){ $('finPot').textContent = '$' + (state.pot/1000).toFixed(2) + 'M'; let title='', sub='', note='', rank=''; if (state.pot >= 1500) { title='🏆 House Beaten'; sub=`$${(state.pot/1000).toFixed(2)}M at 65 — you walk away the winner.`; rank='Whale'; note='You hit the comfortable range. Steady contributions + equity tilt + employer match are the big three. The 14-week Pension sim covers DB vs. DC, tax shelters, drawdown strategies, and longevity risk in depth.'; } else if (state.pot >= 1000) { title='✅ Cashed Out Even'; sub=`$${(state.pot/1000).toFixed(2)}M at 65 — basic needs covered, little cushion.`; rank='High Roller'; note='You made the minimum. Different decisions (more equity early, more DB late) would have padded the cushion.'; } else if (state.pot >= 500) { title='⚠️ Short of the Mark'; sub=`$${(state.pot/1000).toFixed(2)}M at 65 — you\'ll need to keep working.`; rank='Grinder'; note='Common pattern: too much cash, missed employer match, or panic-sold in a bear market. The 14-week sim covers behavioural finance traps.'; } else { title='💀 The House Won'; sub=`$${(state.pot/1000).toFixed(2)}M at 65 — relying on state pension and family.`; rank='Down to the felt'; note='You learned what bad allocation + missed contributions look like over 40 years.'; } $('overTitle').textContent = title; $('overSub').textContent = sub; $('finRank').textContent = rank; $('overNote').innerHTML = note + ' <a href="/games/pension-benefits-and-plan/" style="color:#f4c45a">Play the full sim →</a>'; $('over').classList.remove('hidden'); } function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]))} $('start').onclick = start; $('again').onclick = start; $('next').onclick = advance; })(); </script> </body></html>