JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<set $showStats = false>> <<set $budget to 2000>> <<set $resilience to 0>> <<run // Hide the fixed white SC logo only for this passage $('body').addClass('suppress-header-logo'); // Restore it once player advances $(document).one(':passagerender.opening-unhide', function () { $('body').removeClass('suppress-header-logo'); }); >> <div class="opening-wrapper"> <div class="opening-box opening-centered"> <!-- Compact logos row --> <div class="opening-logos"> <img src="https://raw.githubusercontent.com/preebharadwaj01/malaysia-adaptation-game-assets/refs/heads/main/backgrounds/SC%20Malaysia%20Logo%20Blue.png" alt="Securities Commission Malaysia" class="logo logo-sc" /> <img src="https://raw.githubusercontent.com/preebharadwaj01/malaysia-adaptation-game-assets/refs/heads/main/backgrounds/COFAR%20Logo.png" alt="COFAR" class="logo logo-cofar" /> </div> <h1>Malaysia’s Climate Adaptation Game</h1> <p>Can you save Malaysia from the worsening effects of climate change?</p> <p class="opening-disclaimer"> <em>Disclaimer: This is a prototype built for public education. It simplifies real policies and costs. Impacts and numbers are indicative, based on online resources, to help you explore trade-offs.</em> </p> [[Next|YourGoal]] </div> </div>
<<set $showStats = true>> <!-- Centered white card --> <div class="round-wrap"> <div class="round-box"> <h2>Welcome, the year is 2025. You have a budget of RM2 billion</h2> <p>Malaysia has signed on to the <<tip "Paris Agreement" "The Paris Agreement is a global treaty for all countries to limit global warming to well below 2°C above pre-industrial levels, ideally 1.5°C.">> and has pledged to reach net-zero emissions by 2050. <strong>However, that is not enough to shield the country from the growing impacts of climate change.</strong> Malaysia is already experiencing annual floods, heatwaves, and shifting monsoons. You have been brought on to spearhead adaptation efforts and build our country's <<tip "resilience" "The capacity of a community, business, or natural environment to prevent, withstand, respond to, and recover from a disruption.">>. You must balance budgetary concerns while considering opportunities to increase resilience.</p> <p>First up: <strong>Flood & Coastal Protection</strong>.</p> [[Let's begin|FloodDecision1]] </div> </div>
<<set $showStats = true>> <<set $round = 1>> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 1 of 3 | Q1 of 3</div> <h2>Flood & Coastal Protection</h2> <p> Flash floods now hit Klang Valley, Penang, Pahang, Kelantan, and Kedah regularly. How will you build resilience against floods? </p> <div class="choice-grid"> <!-- SABO DAMS --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 50; SugarCube.State.variables.resilience += 0.5; SugarCube.State.variables.equity += 1; SugarCube.State.variables.ecosystem += 1; SugarCube.State.variables.water += 1; SugarCube.Engine.play('AgricultureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Build <<tip "Sabo Dams" "Sabo dams are small concrete barriers built on hillsides to slow water and trap sediment.">> (Small Flood-Control Dams)</div> <div class="choice-desc"><em>Pros:</em> Slows runoff and traps debris upstream; protects hillside towns. <em>Cons:</em> Limited reach; needs upkeep after storms.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM50M</div> <div><strong>Resilience:</strong> +0.5</div> </div> </div> <!-- NATIONAL DRAINAGE --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1500; SugarCube.State.variables.resilience += 2.5; SugarCube.State.variables.equity += 0; SugarCube.State.variables.ecosystem -= 1; SugarCube.State.variables.water += 4; SugarCube.Engine.play('AgricultureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Upgrade drainage & <<tip "dredge" "Dredging means removing mud, sand, and debris from riverbeds or reservoirs to make them deeper. It helps prevent floods by allowing water to flow more smoothly and reducing overflow during heavy rain.">> rivers</div> <div class="choice-desc"><em>Pros:</em> Moves stormwater faster; reduces city flash floods. <em>Cons:</em> Construction disruption; mainly helps urban areas.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1.5B</div> <div><strong>Resilience:</strong> +2.5</div> </div> </div> <!-- DO NOTHING --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.resilience -= 4; SugarCube.State.variables.equity -= 2; SugarCube.State.variables.ecosystem -= 2; SugarCube.State.variables.water -= 4; SugarCube.Engine.play('AgricultureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Do nothing</div> <div class="choice-desc"><em>Pros:</em> Saves public funds for other priorities. <em>Cons:</em> Floods worsen with climate change, leading to repeated losses and rising repair bills.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> −4</div> </div> </div> </div> </div> </div> <style> /* center the white box both vertically & horizontally */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } /* keep your compact card layout */ .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; /* prevents overflow */ } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover, .choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<!-- StoryCaption: persistent overlay HUD (no extra #story!) --> <div id="statsbar"> <div class="stat"> <h4><span>Budget</span><span data-bind="budgetText">RM10B</span></h4> <div class="bar-fill budget-fill" data-bind="budgetFill"></div> </div> <div class="stat"> <h4><span>Resilience</span><span data-bind="resilienceText">0 pts</span></h4> <div class="bar-fill resilience-fill" data-bind="resilienceFill"></div> </div> <div class="timeline"> <div class="timeline-bar"> <div class="timeline-marker" id="roundMarker"></div> </div> </div> </div>
:: __DEV-CHANGELOG - v6 fixes: suppressed stats on homepage; removed :: markers; only wrap choices with indicators; fixed character grid; removed bullets; merged Round1&2 storyline; added Round3 placeholders.
<<set $showStats = false>> <div class="choose-overlay"> <h2>Choose your character</h2> <p>Select a character to represent your point of view. Each offers a unique lens on Malaysia’s climate future, though every journey begins with the same first round of decisions.</p> <div class="character-row"> <!-- RINA --> <a class="flip-card" data-passage="Round1Intro" data-setter="State.variables.character='Rina Rakyat'" aria-label="Choose Rina Rakyat – The Activist"> <div class="flip-inner"> <img class="flip-front" src="https://raw.githubusercontent.com/preebharadwaj01/malaysia-adaptation-game-assets/main/Avatars/Rina%20Rakyat_The%20Activist.png" alt="Rina Rakyat – The Activist"> <div class="flip-back"> <h3>Rina Rakyat – The Activist</h3> <p>People and environment lie at the heart of your activism. You have a deep desire for creating change within your sphere of influence, for the benefit of future generations.</p> </div> </div> </a> <!-- DATO' DANIEL DASAR --> <a class="flip-card" data-passage="Round1Intro" data-setter="State.variables.character='Dato’ Daniel Dasar'" aria-label="Choose Dato’ Daniel Dasar – The Policymaker"> <div class="flip-inner"> <img class="flip-front" src="https://raw.githubusercontent.com/preebharadwaj01/malaysia-adaptation-game-assets/main/Avatars/Dato'%20Daniel%20Dasar_The%20Policymaker.png" alt="Dato’ Diraja Dasar – The Policymaker"> <div class="flip-back"> <h3>Dato’ Daniel Dasar – The Policymaker</h3> <p>You are determined to use your position of power for the environment. You challenge the status quo and advocate for policies that protect people and nature.</p> </div> </div> </a> <!-- KATRINA KORPORAT --> <a class="flip-card" data-passage="Round1Intro" data-setter="State.variables.character='Katrina Korporat'" aria-label="Choose Katrina Korporat – The Entrepreneur"> <div class="flip-inner"> <img class="flip-front" src="https://raw.githubusercontent.com/preebharadwaj01/malaysia-adaptation-game-assets/main/Avatars/Katrina%20Korporat_The%20Entrepreneur.png" alt="Katrina Korporat – The Entrepreneur"> <div class="flip-back"> <h3>Katrina Korporat – The Entrepreneur</h3> <p>A successful entrepreneur with a good conscience, you prioritise profits, but never at the expense of your community and the environment.</p> </div> </div> </a> <!-- TERRY TENAGA --> <a class="flip-card" data-passage="Round1Intro" data-setter="State.variables.character='Terry Tenaga'" aria-label="Choose Terry Tenaga – The Innovator"> <div class="flip-inner"> <img class="flip-front" src="https://raw.githubusercontent.com/preebharadwaj01/malaysia-adaptation-game-assets/main/Avatars/Terry%20Tenaga_The%20Innovator.png" alt="Terry Tenaga – The Innovator"> <div class="flip-back"> <h3>Terry Tenaga – The Innovator</h3> <p>You’ve always had a knack for machines. Now, you’re determined to put that talent to good use. Your innovations are your legacy.</p> </div> </div> </a> </div> </div> <!-- keep a hidden wikilink so the map shows a connection --> <span style="display:none">[[Round1Intro]]</span>
<<set $showStats = true>> <div class="opening-wrapper opening-vcenter goal-up"> <div class="opening-box goal-page"> <h2>How to Play</h2> <ul> <li>You lead Malaysia’s <span class="tooltip-term" title="Various actions that help to reduce the risks associated with climate change.">adaptation</span> plan across three timeframes: <strong>2025</strong>, <strong>2050</strong>, and <strong>2100</strong>.</li> <li>Each round, you'll make three choices.</li> <li>Every option has a <strong>Cost (RM billion)</strong> and a visible <strong>Resilience effect</strong> (+ / − points). </li> <li> Your <strong>Budget bar</strong> falls as you spend; your <strong>Resilience bar</strong> shows how much protection Malaysia gains.</li> <li>At the end of each round you’ll see: <ul> <li>Your overall rating (<em>Failing</em>, <em>At Risk</em>, <em>Stable</em>, <em>Resilient</em>, <em>Thriving</em>)</li> <li>A short news recap on how Malaysia is coping</li> <li>And a refreshed budget for the next round</li> </ul> </li> <li><strong>Goal: Aim for 34+ points by 2100 to be Resilient. 39+ means Thriving</strong>.</li> <li><strong>Tip:</strong> Balance quick relief, systemic fixes, and nature-based co-benefits.</li> </ul> <div class="cta-center"> [[Choose character|ChooseCharacter]] </div> </div> </div>
:: StoryInit <<set $showStats = false>> <<set $budget = 2.5>> <<set $resilience = 0>> <<set $equity = 0>> <<set $ecosystem = 0>> <<set $water = 0>> <<set $round = 0>>
<<set $showStats = true>> <<set $round = 1>> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 1 of 3 | Q2 of 5</div> <h2>Urban Heat</h2> <p> Rising urban temperatures and the <strong><<tip "urban heat island effect" "The urban heat effect occurs when a city experiences much warmer temperatures than nearby rural areas.">></strong> pose risks to public health, energy consumption, and productivity in Malaysian cities. Effective interventions include energy-efficient technologies, urban greening, and large-scale cooling infrastructure. </p> <div class="choice-grid"> <!-- Provide Cooling Subsidies for Vulnerable Households --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 600; /* RM0.6B in millions */ SugarCube.State.variables.resilience += 1; SugarCube.State.variables.equity += 5; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 0; SugarCube.Engine.play('WaterSecurityDecision1'); /* next passage in Round 1 */ " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Provide <<tip "Cooling Subsidies" "Government rebates for energy-efficient fans or air-conditioners.">> for Vulnerable Households</div> <div class="choice-desc"><em>Pros:</em> Immediate relief for low-income families. <em>Cons:</em> Raises electricity demand; offers no outdoor cooling or long-term fix.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0.6B</div> <div><strong>Resilience:</strong> +1</div> </div> </div> <!-- Build Centralised Cooling Districts --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 10000; /* RM20B in millions */ SugarCube.State.variables.resilience += 5; SugarCube.State.variables.equity += 0; SugarCube.State.variables.ecosystem -= 1; SugarCube.State.variables.water += 0; SugarCube.Engine.play('WaterSecurityDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Build Centralised <<tip "Cooling Districts" "Shared underground systems deliver chilled water to multiple buildings.">></div> <div class="choice-desc"><em>Pros:</em> Efficient for dense business areas; long lifespan. <em>Cons:</em> Extremely expensive; limited to specific zones; long construction period.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM10B</div> <div><strong>Resilience:</strong> +5</div> </div> </div> <!-- Plant Trees & Install Cool Surfaces in Cities --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2000; /* RM2b in millions */ SugarCube.State.variables.resilience += 3; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 5; SugarCube.State.variables.water += 1; SugarCube.Engine.play('WaterSecurityDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"> <<tip "Plant Trees & Install Cool Surfaces" "Expanding tree canopy and adding reflective pavements or roofs reduce surface heat.">> in Cities</div> <div class="choice-desc"><em>Pros:</em> Cools streets, improves air quality, lowers flood risk through shade and absorption. <em>Cons:</em> Trees take years to mature; ongoing maintenance needed.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2.0B</div> <div><strong>Resilience:</strong> +3</div> </div> </div> </div> </div> </div> <style> /* Use the exact same layout rules you locked in on FloodDecision1 */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 1>> <!-- timeline stays at 2025 in R1 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 1 of 3 | Q3 of 5</div> <h2>Water Security</h2> <p> Prolonged dry spells and erratic rainfall patterns threaten water supply for households, agriculture, and industry. Investments in water infrastructure and innovative solutions are vital to enhance drought resilience and maintain equitable access. </p> <div class="choice-grid"> <!-- Repair Leaking Pipes (Non-Revenue Water Reduction) --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 800; /* RM0.8B (store in millions) */ SugarCube.State.variables.resilience += 2; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 5; SugarCube.Engine.play('AgricultureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"><<tip "Repair Leaking Pipes" "Fixing old pipes can save treated water.">> (Non-Revenue Water Reduction</div> <div class="choice-desc"><em>Pros:</em> Quick, low-cost efficiency gain. <em>Cons:</em> Only partial solution; leaks may recur without monitoring. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0.8B</div> <div><strong>Resilience:</strong> +2</div> </div> </div> <!-- Upgrade Reservoirs & Treatment Plants --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 5000; /* RM5B (store in millions) */ SugarCube.State.variables.resilience += 4.5; SugarCube.State.variables.equity += 1; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 6; SugarCube.Engine.play('AgricultureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"><<tip "Upgrade Reservoirs & Treatment Plants" "Expanding storage and modernising filtration increases reliable supply.">></div> <div class="choice-desc"><em>Pros:</em> Strengthens water security for cities. <em>Cons:</em> High capital cost; multi-year build time.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM5.0B</div> <div><strong>Resilience:</strong> +4.5</div> </div> </div> <!-- Impose Water Rationing --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.resilience -= 5; SugarCube.State.variables.equity += -3; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 2; SugarCube.Engine.play('AgricultureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Impose Water Rationing</div> <div class="choice-desc"><em>Pros:</em> Immediate savings during droughts; low cost. <em>Cons:</em> Hurts households and factories; lowers productivity; politically unpopular.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> −5</div> </div> </div> </div> </div> </div> <style> /* — same compact, centered white card as Flood/UrbanHeat — */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 1>> <!-- still Round 1 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 1 of 3 | Q2 of 3</div> <h2>Agriculture</h2> <p> Climate variability and extreme weather events increasingly affect crop yields and farming livelihoods. <strong>How do you ensure food security?</strong> </p> <div class="choice-grid"> <!-- Promote Agroforestry for Small Farmers --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 150; /* RM150m */ SugarCube.State.variables.resilience += 0.5; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 5; SugarCube.State.variables.water += 2; SugarCube.Engine.play('NatureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Promote <<tip "Agroforestry" "Integrates trees with crops or livestock. ">> for Smallholder Farmers</div> <div class="choice-desc"><em>Pros:</em> Improves soil, diversifies income, stores carbon. <em>Cons:</em> Requires training; yields build slowly.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM150M</div> <div><strong>Resilience:</strong> +0.5</div> </div> </div> <!-- Introduce Pilot Crop-Insurance Schemes --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 200; /* RM500m */ SugarCube.State.variables.resilience += 0.5; SugarCube.State.variables.equity += 4; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 0; SugarCube.Engine.play('NatureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Introduce Pilot <<tip "Crop-Insurance Schemes" "Provides payouts after floods or droughts">></div> <div class="choice-desc"><em>Pros:</em> Protects farmers’ income; builds trust in financial tools. <em>Cons:</em> Small coverage; doesn’t prevent physical losses. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM200M</div> <div><strong>Resilience:</strong> +0.5</div> </div> </div> <!-- Modernise Irrigation Systems --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 500; /* RM500m */ SugarCube.State.variables.resilience += 1.5; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 1; SugarCube.State.variables.water += 4; SugarCube.Engine.play('NatureDecision1'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"><<tip "Modernise Irrigation Systems" "Upgrading old irrigation canals with sensors and leak-proof linings helps deliver water more efficiently to farms.">></div> <div class="choice-desc"><em>Pros:</em> Boosts water efficiency and yields. <em>Cons:</em> Medium cost; needs skilled operators.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM500M</div> <div><strong>Resilience:</strong> +1.5</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 1>> <!-- still Round 1 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 1 of 3 | Q3 of 3</div> <h2>Nature-based Solutions</h2> <p> Loss of forest and ecosystem health is reducing Malaysia’s natural defences against climate risks. </p> <div class="choice-grid"> <!-- Launch Community Tree-Planting Programmes --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 20; /* RM0.02B */ SugarCube.State.variables.resilience += 0.5; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 4; SugarCube.State.variables.water += 1; SugarCube.Engine.play('Round1Summary'); /* next passage after Round 1 */ " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Launch Community Tree-Planting Programmes</div> <div class="choice-desc"><em>Pros:</em> Builds awareness, creates jobs, low cost. <em>Cons:</em> Small scale; depends on care and follow-up.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM20M</div> <div><strong>Resilience:</strong> +0.5</div> </div> </div> <!-- Convert Forests to Monoculture Plantations --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1500; /* RM2B */ SugarCube.State.variables.resilience -= 2; SugarCube.State.variables.equity -= 2; SugarCube.State.variables.ecosystem -= 6; SugarCube.State.variables.water -= 3; SugarCube.Engine.play('Round1Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Convert Forests to <<tip "Monoculture Plantations" "Single-crop estates (e.g. palm oil)">></div> <div class="choice-desc"><em>Pros:</em> Boosts exports, jobs, and rural incomes. <em>Cons:</em> Degrades soil, weakens flood protection, and reduces biodiversity. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1.5B</div> <div><strong>Resilience:</strong> -2</div> </div> </div> <!-- Expand Forest Reserves & Wildlife Corridors --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 500; /* RM500M */ SugarCube.State.variables.resilience += 2.5; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 6; SugarCube.State.variables.water += 2; SugarCube.Engine.play('Round1Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Expand Forest Reserves & <<tip "Wildlife Corridors" "Natural pathways that connect habitats, allowing animals to move safely between them.">></div> <div class="choice-desc"><em>Pros:</em> Reduces erosion, floods, and landslides. <em>Cons:</em> Limits land for logging or housing. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM500M</div> <div><strong>Resilience:</strong> 2.5</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 1>> /* keep timeline marker at 2025 */ <<run $('html, body').addClass('lock-scroll')>> /* ========= DATA-DRIVEN THRESHOLDS (Round 1; RM b for budget) ========= Failing < P10 • At Risk [P10, P30) • Stable [P30, P60) • Resilient [P60, P85) • Thriving ≥ P85 Budget Remaining: <1.44 | [1.44,3.66) | [3.66,6.09) | [6.09,7.54) | ≥7.54 Resilience sum: <1.40 | [1.40,9.00) | [9.00,15.50) | [15.50,23.65) | ≥23.65 Equity sum: <2.00 | [2.00,5.00) | [5.00,8.00) | [8.00,11.00) | ≥11.00 Ecosystem sum: <-3.00 | [-3.00,2.00) | [2.00,8.00) | [8.00,12.30) | ≥12.30 Water sum: <1.00 | [1.00,4.40) | [4.40,8.00) | [8.00,12.00) | ≥12.00 ========================================================================== */ <<silently>> /* --- values (with safe fallbacks) --- */ <<set _budget = ($budget || 0)>> <<set _res = ($resilience || 0)>> <<set _eq = ($equity || 0)>> <<set _eco = ($ecosystem || 0)>> <<set _water = ($water || $water_down || 0)>> /* --- helper: level code 1..5 from thresholds [p10,p30,p60,p85] --- */ <<set _level = function(v,p10,p30,p60,p85){ if (v < p10) { return 1; } /* Failing */ if (v < p30) { return 2; } /* At Risk */ if (v < p60) { return 3; } /* Stable */ if (v < p85) { return 4; } /* Resilient */ return 5; /* Thriving */ }>> /* Round 1 thresholds (data-driven from 27 combos; units: Budget in RM b) */ <<set _Lcost = _level(_budget, -0.26, 0.50, 1.48, 2.01)>> <<set _Lres = _level(_res, -3.60, -1.00, 1.80, 4.50)>> <<set _Leq = _level(_eq, 0.00, 2.00, 5.00, 6.10)>> <<set _Leco = _level(_eco, -6.40, -0.40, 5.00, 8.10)>> <<set _Lwat = _level(_water, -3.00, 0.00, 3.60, 7.00)>> /* --- map level code to label --- */ <<set _label = function(L){ return (L===5) ? "Thriving" : (L===4) ? "Resilient" : (L===3) ? "Stable" : (L===2) ? "At Risk" : "Failing"; }>> /* --- star string for overall (1–5) --- */ <<set _stars = function(L){ return "★".repeat(L) + "☆".repeat(5-L); }>> /* --- per-metric icon: ✅ if Thriving; ⚠️ if Resilient or Stable; 🚨 if At Risk or Failing --- */ <<set _icon = function(L){ return (L===5) ? "✅" : ((L===4 || L===3) ? "⚠️" : "🚨"); }>> /* --- qualitative text helper: pick (good, mid, bad) by level --- */ <<set _qual = function(L, good, mid, bad){ return (L===5) ? good : ((L===4 || L===3) ? mid : bad); }>> /* --- overall level: rounded average of the five metrics --- */ <<set _overall = Math.round((_Lcost + _Lres + _Leq + _Leco + _Lwat) / 5)>> <<set _overallLabel = _label(_overall)>> <<set _overallStars = _stars(_overall)>> /* --- qualitative bullets per metric (no raw numbers) --- */ <<set _costLine = _icon(_Lcost) + " Cost: " + _qual(_Lcost, "You’ve managed finances well; strong fiscal space.", "You have wiggle room; be selective next round.", "Funds are tight; be extra careful in Round 2." )>> <<set _resLine = _icon(_Lres) + " Resilience: " + _qual(_Lres, "Systems can bounce back quickly.", "Protection is improving, but gaps remain.", "High exposure to shocks; disruptions likely." )>> <<set _eqLine = _icon(_Leq) + " Equity: " + _qual(_Leq, "Benefits are reaching vulnerable groups.", "Some inclusion gains; keep closing gaps.", "Vulnerable groups risk being left behind." )>> <<set _ecoLine = _icon(_Leco) + " Ecosystem: " + _qual(_Leco, "Nature-based buffers are strengthening.", "Partial recovery; safeguard green assets.", "Ecosystem loss is eroding natural protection." )>> <<set _watLine = _icon(_Lwat) + " Water: " + _qual(_Lwat, "Supply reliability is improving.", "Patchy gains; drought risk persists.", "Water security is weak; shortages possible." )>> <</silently>> <div class="round-wrap"> <div class="round-box summary"> <h2>Round 1 Summary</h2> <div class="status-row"> <div class="stars"><span><<= _overallStars>></span></div> <div class="track">You are currently on track for <strong><<= _overallLabel>></strong></div> </div> <ul class="metric-bullets"> <li><<= _costLine>></li> <li><<= _resLine>></li> <li><<= _eqLine>></li> <li><<= _ecoLine>></li> <li><<= _watLine>></li> </ul> <div class="cta-wrap"> <button class="cta-btn" onclick="SugarCube.Engine.play('Round2Intro')">Continue to 2050</button> </div> </div> </div> <style> .round-wrap{ min-height:60vh; display:flex; justify-content:center; align-items:center; padding:0; box-sizing:border-box; } .round-box.summary{ max-width:600px; margin-top:-170px; } .round-box.summary h2{ margin:0 0 10px !important; line-height:1.15 !important; } .status-row{ display:flex; gap:12px; align-items:center; margin:6px 0 8px; } .stars{ font-size:18px; letter-spacing:2px; } .track{ font-weight:600; } .metric-bullets{ margin:10px 0 0 18px; padding:0; } .metric-bullets li{ margin:6px 0; font-size:15px; line-height:1.35; } .cta-wrap{ text-align:center; margin-top:16px; } .cta-btn{ background:#1e3a8a; color:#fff; border:0; border-radius:0; padding:12px 28px; font-weight:600; cursor:pointer; transition:background .2s ease; } .cta-btn:hover{ background:#154c79; } </style>
<<set $showStats = true>> <<set $round = 2>> <!-- move timeline marker to 2050 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 2 of 3 | Q1 of 5</div> <h2>Flood & Coastal Protection</h2> <p> By 2050, heavier downpours and higher sea levels are driving more frequent and damaging floods across Malaysia. West-coast towns face stronger surge and tidal flooding, while cities see flash floods as intense rainfall overwhelms drains. Your task now is to upgrade protection standards and reduce peak runoff, while spreading benefits fairly and safeguarding ecosystems. </p> <div class="choice-grid"> <!-- Adopt “Sponge City” Design in 5 Urban Zones --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2000; /* RM2B in millions */ SugarCube.State.variables.resilience += 6.5; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 5; SugarCube.State.variables.water += 4; SugarCube.Engine.play('UrbanHeatDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Adopt <<tip "“Sponge City”" "An urban area that integrates parks, green roofs, and permeable pavements to naturally absorb rainfall.">> Design in 5 Urban Zones</div> <div class="choice-desc"><em>Pros:</em> Reduces floods; creates greener spaces. <em>Cons:</em> High retrofit cost; limited to selected cities.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2B</div> <div><strong>Resilience:</strong> +6.5</div> </div> </div> <!-- Restore Mangroves and Wetlands --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1000; /* RM1B in millions */ SugarCube.State.variables.resilience += 6; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 7; SugarCube.State.variables.water += 3; SugarCube.Engine.play('UrbanHeatDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Restore Mangroves and Wetlands</div> <div class="choice-desc"><em>Pros:</em> Supports fisheries; stores carbon. <em>Cons:</em> Needs space; long to mature.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1B</div> <div><strong>Resilience:</strong> +6</div> </div> </div> <!-- Keep Relying on Old Systems --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.resilience -= 5; SugarCube.State.variables.equity -= 2; SugarCube.State.variables.ecosystem -= 3; SugarCube.State.variables.water -= 4; SugarCube.Engine.play('UrbanHeatDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Rely on outdated flood systems</div> <div class="choice-desc"><em>Pros:</em> No new expenditure; uses familiar methods. <em>Cons:</em> Existing drains can’t handle extreme rainfall; growing losses over time.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> −5</div> </div> </div> </div> </div> </div> <style> /* center the white box both vertically & horizontally (same as R1 cards) */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } /* compact card container */ .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; /* prevents overflow */ } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } /* cards grid + spacing */ .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } /* cards */ .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover, .choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 2>> <!-- timeline marker moves to 2050 --> <<set $budget += 5000>> <!-- top-up: RM12b in millions --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap"> <div class="round-box summary-box"> <h2>It is now 2050. You receive a top up of RM5 billion in addition to your leftover budget</h2> <p> Malaysia is hotter, with <strong>average temperatures rising by up to 3°C</strong> compared to the early 2000s. You face longer dry seasons and unpredictable heavy rainfall, with both droughts and floods disrupting lives and economies. Along the west coast, <strong>sea levels have risen by over 0.2m</strong>, pushing saltwater into farms and threatening coastal towns. You must chart the next phase of choices, consolidating gains and closing gaps as Malaysia enters its most challenging decades yet. </p> [[Continue to Round 2|UrbanHeatDecision2]] </div> </div> <style> /* Summary box tweaks */ .summary-box { max-width: 620px; font-size: 15px; line-height: 1.4; padding: 30px; } /* Reduce heading spacing */ .summary-box h2 { margin: 0 0 10px; /* less space below heading */ } /* Paragraph style */ .summary-box p { margin: 0 0 15px; /* less space between paragraph and button */ text-align: justify; } /* Blue button, squared edges, less margin */ .summary-box a.link-internal { display: inline-block; margin-top: 5px; /* tighter above button */ padding: 12px 28px; background-color: #0a2a52; color: #fff !important; font-weight: 600; border-radius: 0; text-decoration: none; transition: background 0.2s ease; } .summary-box a.link-internal:hover { background-color: #154c79; } </style>
<<set $showStats = true>> <<set $round = 2>> <!-- keep timeline marker at 2050 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 2 of 3 | Q1 of 3</div> <h2>Urban Heat</h2> <p> Malaysia’s cities are up to 1.5°C hotter. Heatwaves are more frequent and longer-lasting, amplifying the <strong><<tip "urban heat island effect" "The urban heat effect occurs when a city experiences much warmer temperatures than nearby rural areas.">></strong>. How will you respond? </p> <div class="choice-grid"> <!-- Provide Cooling Subsidies for Vulnerable Households --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 600; /* RM0.6B in millions */ SugarCube.State.variables.resilience += 1; SugarCube.State.variables.equity += 5; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 0; SugarCube.Engine.play('WaterSecurityDecision2'); /* next passage in Round 1 */ " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Provide <<tip "Cooling Subsidies" "Government rebates for energy-efficient fans or air-conditioners.">> for Vulnerable Households</div> <div class="choice-desc"><em>Pros:</em> Immediate relief for low-income families. <em>Cons:</em> Raises electricity demand; offers no outdoor cooling or long-term fix.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0.6B</div> <div><strong>Resilience:</strong> +1</div> </div> </div> <!-- Build Centralised Cooling Districts --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 3500; /* RM3.5B in millions */ SugarCube.State.variables.resilience += 5; SugarCube.State.variables.equity += 0; SugarCube.State.variables.ecosystem -= 1; SugarCube.State.variables.water += 0; SugarCube.Engine.play('WaterSecurityDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Build Centralised <<tip "Cooling Districts" "Shared underground systems deliver chilled water to multiple buildings.">></div> <div class="choice-desc"><em>Pros:</em> Efficient for dense business areas; long lifespan. <em>Cons:</em> Extremely expensive; limited to specific zones; long construction period.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM3.5B</div> <div><strong>Resilience:</strong> +5</div> </div> </div> <!-- Plant Trees & Install Cool Surfaces in Cities --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2000; /* RM2b in millions */ SugarCube.State.variables.resilience += 3; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 5; SugarCube.State.variables.water += 1; SugarCube.Engine.play('WaterSecurityDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"> <<tip "Plant Trees & Install Cool Surfaces" "Expanding tree canopy and adding reflective pavements or roofs reduce surface heat.">> in Cities</div> <div class="choice-desc"><em>Pros:</em> Cools streets, improves air quality, lowers flood risk through shade and absorption. <em>Cons:</em> Trees take years to mature; ongoing maintenance needed.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2.0B</div> <div><strong>Resilience:</strong> +3</div> </div> </div> </div> </div> </div> <style> /* same compact layout as FloodDecision2 */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 2>> <!-- timeline marker stays at 2050 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 2 of 3 | Q2 of 3</div> <h2>Water Security </h2> <p> Malaysia faces <strong>longer dry spells</strong> and <strong>irregular heavy rainfall</strong>. How will you secure water for households, farms, and industry? </p> <div class="choice-grid"> <!-- Install Rainwater Harvesting in Cities --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1000; /* RM1B */ SugarCube.State.variables.resilience += 5; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 1; SugarCube.State.variables.water += 6; SugarCube.Engine.play('AgricultureDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Install <<tip "Rainwater Harvesting" "Rooftop tanks capture rain for reuse.">> in Cities</div> <div class="choice-desc"><em>Pros:</em> Adds supply; reduces strain on mains. <em>Cons:</em> Upkeep required; limited scale.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1B</div> <div><strong>Resilience:</strong> +5</div> </div> </div> <!-- Create a National Drought Relief Fund --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1000; /* RM1B */ SugarCube.State.variables.resilience += 6.5; SugarCube.State.variables.equity += 5; SugarCube.State.variables.ecosystem += 2; SugarCube.State.variables.water += 2; SugarCube.Engine.play('AgricultureDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Create a <<tip "National Drought Relief Fund" "Emergency fund to support farmers and SMEs.">></div> <div class="choice-desc"><em>Pros:</em> Quick financial recovery. <em>Cons:</em> Reactive measure; depends on annual budget.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1B</div> <div><strong>Resilience:</strong> +6.5</div> </div> </div> <!-- Store Excess Rain Underground (Managed Aquifer Recharge)--> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2000; /* RM2B */ SugarCube.State.variables.resilience += 4; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 3; SugarCube.State.variables.water += 5; SugarCube.Engine.play('AgricultureDecision2'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Store Excess Rain Underground (<<tip "Managed Aquifer Recharge" "Storing excess water underground for later use.">>)</div> <div class="choice-desc"><em>Pros:</em> Builds drought buffer; reduces floods. <em>Cons:</em> Complex setup; costly monitoring.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2B</div> <div><strong>Resilience:</strong> +4</div> </div> </div> </div> </div> </div> <style> /* same compact, centered decision layout used in other passages */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 2>> <!-- keep timeline at 2050 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 2 of 3 | Q3 of 3</div> <h2>Agriculture</h2> <p> Rice yields are projected to decline by up to 30.5% under hotter, drier conditions. <strong>How will you address potential shocks to production, imports, and food prices?</strong> </p> <div class="choice-grid"> <!-- Adopt Climate-Smart Farming Nationally --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2500; /* RM2.5B */ SugarCube.State.variables.resilience += 6.5; SugarCube.State.variables.equity += 4; SugarCube.State.variables.ecosystem += 3; SugarCube.State.variables.water += 4; SugarCube.Engine.play('Round2Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Adopt Climate-Smart Farming Nationally</div> <div class="choice-desc"><em>Pros:</em> Improves yields; reduces risk. <em>Cons:</em> Needs training and incentives.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2.5B</div> <div><strong>Resilience:</strong> +6.5</div> </div> </div> <!-- Expand Rice-Fish Farming --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 50; /* RM20m */ SugarCube.State.variables.resilience += 3; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 4; SugarCube.State.variables.water += 2; SugarCube.Engine.play('Round2Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Expand <<tip "Rice-Fish Farming" "Integrates fish ponds into paddy fields. ">></div> <div class="choice-desc"><em>Pros:</em> Adds protein; pest control. <em>Cons:</em> Limited area; small national effect.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM50m</div> <div><strong>Resilience:</strong> +4</div> </div> </div> <!-- Rely Mainly on Food Imports --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.resilience -= 6; SugarCube.State.variables.equity -= 4; SugarCube.State.variables.ecosystem -= 1; SugarCube.State.variables.water += 0; SugarCube.Engine.play('Round2Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Rely Mainly on Food Imports</div> <div class="choice-desc"><em>Pros:</em> Frees local land; meets short-term demand. <em>Cons:</em> Vulnerable to global price spikes; weakens food security.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> −5</div> </div> </div> </div> </div> </div> <style> /* compact decision layout as in other passages */ .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 2>> <!-- still 2050 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 2 of 3 | Q5 of 5</div> <h2>Nature-based Solutions</h2> <p> Malaysia’s ecosystems are under strain: forest cover has shrunk to around <strong>54%</strong>, with fragmentation weakening biodiversity and watershed functions. Mangroves remain a critical line of defence, able to cut <strong>wave heights by up to 99%</strong> over ~500m belts. Meanwhile, degraded peatlands amplify fire and flood risks. Your choices now will determine whether natural systems buffer climate shocks or collapse further. </p> <div class="choice-grid"> <!-- Rewet and Reforest Peatlands --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 200; /* RM200m */ SugarCube.State.variables.resilience += 4.5; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 6; SugarCube.State.variables.water += 3; SugarCube.Engine.play('Round2Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"><<tip "Rewet" "Raises groundwater; prevents haze fires. ">> and Reforest Peatlands</div> <div class="choice-desc"><em>Pros:</em> Cuts emissions; stabilises moisture. <em>Cons:</em> Needs expert management.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM200m</div> <div><strong>Resilience:</strong> +4.5</div> </div> </div> <!-- Allow Ongoing Deforestation --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 0; /* 0 */ SugarCube.State.variables.resilience -= 5; SugarCube.State.variables.equity -= 3; SugarCube.State.variables.ecosystem -=7; SugarCube.State.variables.water -= 3; SugarCube.Engine.play('Round2Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Allow Ongoing Deforestation</div> <div class="choice-desc"><em>Pros:</em> Frees land for farms or industry; boosts short-term GDP. <em>Cons:</em> Erosion, floods, habitat loss increase over time.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> -5</div> </div> </div> <!-- Restore Mangroves Along Coastlines --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 800; /* RM0.8B */ SugarCube.State.variables.resilience += 6.5; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 7; SugarCube.State.variables.water += 3; SugarCube.Engine.play('Round2Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Restore Mangroves Along Coastlines</div> <div class="choice-desc"><em>Pros:</em> Cuts wave energy; stores carbon. <em>Cons:</em> Requires local stewardship; years to grow.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM800M</div> <div><strong>Resilience:</strong> +6.5</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision{ min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision{ max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker{ position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 2>> <<run $('html, body').addClass('lock-scroll')>> /* ========= DATA-DRIVEN THRESHOLDS (Round 2) ========= Failing < P10 • At Risk [P10, P30) • Stable [P30, P60) • Resilient [P60, P85) • Thriving ≥ P85 Budget Remaining after R2 (RM b): <7.03 | [7.03,9.95) | [9.95,12.85) | [12.85,15.53) | ≥15.53 Cumulative Resilience: <8.00 | [8.00,19.00) | [19.00,30.00) | [30.00,40.50) | ≥40.50 Cumulative Equity: <5.00 | [5.00,10.00) | [10.00,16.00) | [16.00,21.00) | ≥21.00 Cumulative Ecosystem: <1.00 | [1.00,10.00) | [10.00,19.00) | [19.00,27.00) | ≥27.00 Cumulative Water: <7.00 | [7.00,12.00) | [12.00,18.00) | [18.00,24.00) | ≥24.00 ====================================================== */ <<silently>> /* --- values (with safe fallbacks) --- */ <<set _budget2 = ($budget || 0)>> <<set _res2 = ($resilience || 0)>> <<set _eq2 = ($equity || 0)>> <<set _eco2 = ($ecosystem || 0)>> <<set _water2 = ($water || $water_down || 0)>> /* --- helper: level 1..5 from thresholds --- */ <<set _level = function(v,p10,p30,p60,p85){ if (v < p10) { return 1; } if (v < p30) { return 2; } if (v < p60) { return 3; } if (v < p85) { return 4; } return 5; }>> /* Round 2 thresholds (data-driven from 729 R1×R2 paths; Budget in RM b) */ <<set _Lcost = _level(_budget2, -1.02, 0.87, 2.43, 3.97)>> <<set _Lres = _level(_res2, 2.00, 7.50, 13.50, 17.50)>> <<set _Leq = _level(_eq2, 3.00, 7.00, 12.00, 15.00)>> <<set _Leco = _level(_eco2, -2.00, 4.00, 10.00, 15.00)>> <<set _Lwat = _level(_water2, 2.80, 6.00, 11.00, 14.00)>> /* --- map level to label and star string --- */ <<set _label = function(L){ return (L===5) ? "Thriving" : (L===4) ? "Resilient" : (L===3) ? "Stable" : (L===2) ? "At Risk" : "Failing"; }>> <<set _stars = function(L){ return "★".repeat(L) + "☆".repeat(5-L); }>> /* --- icon rule --- */ <<set _icon = function(L){ return (L===5) ? "✅" : ((L===4 || L===3) ? "⚠️" : "🚨"); }>> /* --- qualitative texts (short, no numbers) --- */ <<set _qual = function(L, good, mid, bad){ return (L===5) ? good : ((L===4 || L===3) ? mid : bad); }>> /* --- overall as rounded average --- */ <<set _overall = Math.round((_Lcost + _Lres + _Leq + _Leco + _Lwat) / 5)>> <<set _overallLabel = _label(_overall)>> <<set _overallStars = _stars(_overall)>> /* --- bullet lines --- */ <<set _costLine = _icon(_Lcost) + " Cost: " + _qual(_Lcost, "Finances are strong; you’ve spent prudently.", "You have wiggle room; keep spending targeted.", "Spending is heavy; be extra cautious next round." )>> <<set _resLine = _icon(_Lres) + " Resilience: " + _qual(_Lres, "Systems recover quickly from shocks.", "Protection is improving, but gaps remain.", "High exposure to repeated disruptions." )>> <<set _eqLine = _icon(_Leq) + " Equity: " + _qual(_Leq, "Benefits reach vulnerable communities.", "Some inclusion gains; keep closing gaps.", "Vulnerable groups risk being left behind." )>> <<set _ecoLine = _icon(_Leco) + " Ecosystem: " + _qual(_Leco, "Nature-based buffers are strengthening.", "Partial recovery; protect green assets.", "Degradation is reducing natural protection." )>> <<set _watLine = _icon(_Lwat) + " Water: " + _qual(_Lwat, "Supply reliability is improving.", "Patchy gains; drought risk persists.", "Water security is weak; shortages possible." )>> <</silently>> <div class="round-wrap"> <div class="round-box summary"> <h2>Round 2 Summary</h2> <div class="status-row"> <div class="stars"><span><<= _overallStars>></span></div> <div class="track">You are currently on track for <strong><<= _overallLabel>></strong></div> </div> <ul class="metric-bullets"> <li><<= _costLine>></li> <li><<= _resLine>></li> <li><<= _eqLine>></li> <li><<= _ecoLine>></li> <li><<= _watLine>></li> </ul> <div class="cta-wrap"> <button class="cta-btn" onclick="SugarCube.Engine.play('Round3Intro')">Continue to 2100</button> </div> </div> </div> <style> .round-wrap{ min-height:60vh; display:flex; justify-content:center; align-items:center; padding:0; box-sizing:border-box; } .round-box.summary{ max-width:600px; margin-top:-170px; } .status-row{ display:flex; gap:12px; align-items:center; margin:6px 0 8px; } .stars{ font-size:18px; letter-spacing:2px; } .track{ font-weight:600; } .metric-bullets{ margin:10px 0 0 18px; padding:0; } .metric-bullets li{ margin:6px 0; font-size:15px; line-height:1.35; } .cta-wrap{ text-align:center; margin-top:16px; } .cta-btn{ background:#1e3a8a; color:#fff; border:0; border-radius:0; padding:12px 28px; font-weight:600; cursor:pointer; transition:background .2s ease; } .cta-btn:hover{ background:#154c79; } </style>
<<set $showStats = true>> <<set $round = 3>> <!-- timeline marker moves to 2100 --> <<set $budget += 16000>> <!-- top-up: RM16b in millions --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap"> <div class="round-box summary-box"> <h2>It is the year 2100. You receive a RM16 billion top up in addition to your leftover budget.</h2> <p> After decades of warming, you are governing a Malaysia that is decisively hotter and wetter in extremes. Coastal risk is higher; seas have risen substantially and storm surges reach farther inland, pushing saltwater into rivers and aquifers and driving costly protections or relocations in exposed districts. Your choices across the last two rounds set the baseline Malaysians rely on today. Your task now is to deepen resilience where it matters most, protect fairness as impacts widen, and lock in nature-based buffers and water security that can stand up to the rest of the century. <strong>Remember, your aim is to achieve 34+ points by the end of the game to be Resilient. 39+ means Thriving. Make sure you stay within budget.</strong>. </p> [[Continue to Round 3|FloodDecision3]] </div> </div> <style> /* Match the intro/summary look you've been using */ .summary-box { max-width: 620px; /* narrow card */ font-size: 15px; /* same as Round1Intro/Round2Intro */ line-height: 1.4; padding: 30px; } /* Tighten heading & paragraph spacing */ .summary-box h2 { margin: 0 0 10px; } .summary-box p { margin: 0 0 15px; text-align: justify; } /* Squared dark-blue CTA button (same tone as earlier rounds) */ .summary-box a.link-internal { display: inline-block; margin-top: 5px; padding: 12px 28px; background-color: #0a2a52; color: #fff !important; font-weight: 600; border-radius: 0; text-decoration: none; transition: background 0.2s ease; } .summary-box a.link-internal:hover { background-color: #154c79; } </style>
<<set $showStats = true>> <<set $round = 3>> <!-- timeline marker at 2100 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 3 of 3 | Q1 of 3</div> <h2>Flood & Coastal Protection</h2> <p> Once-in-a-century storm tides now arrive every decade, bringing surges that overtop bunds and displace whole towns. Major urban centres like Klang Valley and Penang face chronic flood emergencies. Your decisions here will determine whether Malaysia doubles down on engineered barriers, makes room for the sea, or keeps scrambling from crisis to crisis. </p> <div class="choice-grid"> <!-- Rely on Emergency Sandbags and Relief --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 0; /* 0 in millions */ SugarCube.State.variables.resilience -= 6; SugarCube.State.variables.equity += 1; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 1; SugarCube.Engine.play('UrbanHeatDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Rely on Emergency <<tip "Sandbags" "Sandbags are quick, low-cost flood defences used to keep water out of homes and roads during emergencies.">> and Relief</div> <div class="choice-desc"><em>Pros:</em> Cheaper, flexible response. <em>Cons:</em> Repeated recovery costs; no lasting safety.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> -6</div> </div> </div> <!-- Build a National Coastal Megadyke --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 10000; /* RM10B in millions */ SugarCube.State.variables.resilience += 7; SugarCube.State.variables.equity += 0; SugarCube.State.variables.ecosystem -= 4; SugarCube.State.variables.water += 7; SugarCube.Engine.play('UrbanHeatDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Build a National Coastal <<tip "Megadyke" "Continuous sea wall shielding major cities.">></div> <div class="choice-desc"><em>Pros:</em> Long-term defence; high protection. <em>Cons:</em> Enormous cost; damages marine ecosystems.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM10B</div> <div><strong>Resilience:</strong> +3</div> </div> </div> <!-- Offer Property Buy-Outs in Flood Zones --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 6000; /* RM10B in millions */ SugarCube.State.variables.resilience += 5; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 1; SugarCube.State.variables.water += 2; SugarCube.Engine.play('UrbanHeatDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"><<tip "Offer Property Buy-Outs" "Voluntary relocation to safer areas. ">> in Flood Zones</div> <div class="choice-desc"><em>Pros:</em> Removes people from danger permanently. <em>Cons:</em> Requires new housing; disrupts communities.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM6B</div> <div><strong>Resilience:</strong> +6</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision { min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision { max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker { position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 3>> <!-- timeline marker at 2100 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 3 of 3 | Q2 of 3</div> <h2>Urban Heat</h2> <p> Extreme heatwaves that once struck once in a generation now occur nearly every year. Hospitals report surges in heatstroke, kidney stress, and cardiovascular deaths. With 80% of Malaysians living in cities, your decisions now will determine whether they adapt with lasting protection or scramble season by season. </p> <div class="choice-grid"> <!-- Install Advanced Cooling Technologies --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 6000; /* RM8B in millions */ SugarCube.State.variables.resilience += 6; SugarCube.State.variables.equity += 1; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 0; SugarCube.Engine.play('NatureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Install <<tip "Advanced Cooling Technologies" "Smart misting, shading, and ventilation systems.">></div> <div class="choice-desc"><em>Pros:</em> Rapid cooling; scalable. <em>Cons:</em> Energy-intensive; high maintenance. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM6B</div> <div><strong>Resilience:</strong> +6</div> </div> </div> <!-- Retrofit Fully Green Cities --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 10000; /* RM10B in millions */ SugarCube.State.variables.resilience += 7; SugarCube.State.variables.equity += 4; SugarCube.State.variables.ecosystem += 6; SugarCube.State.variables.water += 2; SugarCube.Engine.play('NatureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title"><<tip "Retrofit Fully Green Cities" "Adds canopy, reflective surfaces, wetlands citywide.">></div> <div class="choice-desc"><em>Pros:</em> Lasting comfort; better health. <em>Cons:</em> High cost; long timeline.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM10B</div> <div><strong>Resilience:</strong> +7</div> </div> </div> <!-- Operate Temporary Cooling Shelters --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 3000; /* RM3B */ SugarCube.State.variables.resilience -= 4; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 0; SugarCube.Engine.play('NatureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Operate Temporary Cooling Shelters</div> <div class="choice-desc"><em>Pros:</em> Saves lives during extreme heat; quick to set up. <em>Cons:</em> Short-term; doesn’t reduce urban heat.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM3B</div> <div><strong>Resilience:</strong> −4</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision { min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision { max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker { position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 3>> <!-- timeline marker at 2100 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 3 of 3 | Q3 of 5</div> <h2>Water Security</h2> <p> Malaysia’s water crisis is acute. Dry-season flows in major rivers have fallen by nearly a third, while heavy downpours still overwhelm infrastructure during the monsoon. Without bold intervention, water trucking and boreholes become the default: costly, disruptive, and inequitable. Your decisions now will determine whether Malaysia invests in resilient, equitable systems or continues a cycle of crisis response. </p> <div class="choice-grid"> <!-- Build Renewable-Powered Desalination Plants --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 7000; /* RM7B in millions */ SugarCube.State.variables.resilience += 7; SugarCube.State.variables.equity += 1; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 7; SugarCube.Engine.play('AgricultureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Build <<tip "Renewable-Powered Desalination Plants" "Converts seawater into freshwater using solar/wind.">></div> <div class="choice-desc"><em>Pros:</em> Reliable supply; low emissions. <em>Cons:</em> Costly brine management.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM7B</div> <div><strong>Resilience:</strong> +7</div> </div> </div> <!-- Transport Water to Emergency Areas --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2000; /* RM2B in millions */ SugarCube.State.variables.resilience -= 5; SugarCube.State.variables.equity -= 2; SugarCube.State.variables.ecosystem -= 1; SugarCube.State.variables.water += 2; SugarCube.Engine.play('AgricultureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Transport Water to Emergency Areas</div> <div class="choice-desc"><em>Pros:</em> Quick emergency fix. <em>Cons:</em> Drains budgets; unsustainable.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2B</div> <div><strong>Resilience:</strong> -5</div> </div> </div> <!-- Lay Dual Pipelines for Recycled Water --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 6000; /* RM6B */ SugarCube.State.variables.resilience += 6; SugarCube.State.variables.equity += 2; SugarCube.State.variables.ecosystem += 1; SugarCube.State.variables.water += 6; SugarCube.Engine.play('AgricultureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Lay Dual Pipelines for Recycled Water</div> <div class="choice-desc"><em>Pros:</em> Expands supply sustainably. <em>Cons:</em> High cost; public acceptance needed.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM6B</div> <div><strong>Resilience:</strong> +6</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision { min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision { max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker { position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 3>> <!-- timeline marker at 2100 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 3 of 3 | Q4 of 5</div> <h2>Agriculture & Food Security</h2> <p> Malaysian agriculture faces its hardest test yet. Rice yields could fall by up to <strong>40%</strong> due to heat stress, salinity intrusion, and erratic rainfall. Irrigation shortfalls and land degradation reduce farm viability, while global food markets tighten under climate pressure. Your decisions now will determine whether Malaysia can still grow food at home, or face rising vulnerability in a turbulent global system. </p> <div class="choice-grid"> <!-- Depend Further on Food Imports --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 0; /* RM0B in millions */ SugarCube.State.variables.resilience -= 6; SugarCube.State.variables.equity -= 3; SugarCube.State.variables.ecosystem -= 1; SugarCube.State.variables.water += 0; SugarCube.Engine.play('NatureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Depend Further on Food Imports</div> <div class="choice-desc"><em>Pros:</em> Avoids local farming costs; quick access to supply. <em>Cons:</em> Global shortages or price spikes threaten food security.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM0</div> <div><strong>Resilience:</strong> -6</div> </div> </div> <!-- Develop Indoor Controlled-Environment Farms --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 5000; /* RM5B in millions */ SugarCube.State.variables.resilience += 5; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 0; SugarCube.State.variables.water += 2; SugarCube.Engine.play('NatureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Develop <<tip "Indoor Controlled-Environment Farms" "Vertical or greenhouse farms shield crops from weather.">></div> <div class="choice-desc"><em>Pros:</em> Year-round yields; local food. <em>Cons:</em> High energy demand; limited scale.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM5B</div> <div><strong>Resilience:</strong> +5</div> </div> </div> <!-- Invest in Heat- & Salt-Tolerant Rice Research --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1000; /* RM1B in millions */ SugarCube.State.variables.resilience += 6.5; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 2; SugarCube.State.variables.water += 4; SugarCube.Engine.play('NatureDecision3'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Invest in <<tip "Heat- & Salt-Tolerant Rice" "Rice that withstands extreme conditions.">> Research</div> <div class="choice-desc"><em>Pros:</em> Protects staple supply; affordable. <em>Cons:</em> Long R&D cycle; adoption risk.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1B</div> <div><strong>Resilience:</strong> +6.5</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision { min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision { max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker { position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 3>> <!-- timeline marker at 2100 --> <<run $('html, body').addClass('lock-scroll')>> <div class="round-wrap decision"> <div class="round-box decision"> <div class="round-tracker">Round 3 of 3 | Q5 of 5</div> <h2>Nature-Based Solutions</h2> <p> Mangroves, reefs, and peatlands have declined sharply. Without strong action, coastlines erode, biodiversity fragments, and natural carbon stores vanish, accelerating climate impacts. <strong>The question is whether you double down on ecological defenses or prioritise hard protection at nature’s expense.</strong> </p> <div class="choice-grid"> <!-- Expand Concrete Barriers into Sensitive Coasts --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 6000; /* RM6B in millions */ SugarCube.State.variables.resilience += 3; SugarCube.State.variables.equity += 0; SugarCube.State.variables.ecosystem -= 5; SugarCube.State.variables.water += 4; SugarCube.Engine.play('Round3Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Expand Concrete Barriers into Sensitive Coasts</div> <div class="choice-desc"><em>Pros:</em> Immediate physical protection; visible investment. <em>Cons:</em>Damages coral reefs; worsens erosion elsewhere. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2B</div> <div><strong>Resilience:</strong> +3</div> </div> </div> <!-- Establish Country-Wide Biodiversity Corridors --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 1500; /* RM1.5B in millions */ SugarCube.State.variables.resilience += 6; SugarCube.State.variables.equity += 3; SugarCube.State.variables.ecosystem += 7; SugarCube.State.variables.water += 3; SugarCube.Engine.play('Round3Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Establish Country-Wide Biodiversity Corridors</div> <div class="choice-desc"><em>Pros:</em> Supports wildlife movement; stabilises climate. <em>Cons:</em> Land competition; delayed benefits.</div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM1.5B</div> <div><strong>Resilience:</strong> +6</div> </div> </div> <!-- Create a National “Blue-Carbon Shield” --> <div class="choice-card" role="button" tabindex="0" onclick=" SugarCube.State.variables.budget -= 2000; /* RM6B in millions */ SugarCube.State.variables.resilience += 7; SugarCube.State.variables.equity += 4; SugarCube.State.variables.ecosystem += 8; SugarCube.State.variables.water += 5; SugarCube.Engine.play('Round3Summary'); " onkeydown="if(event.key==='Enter'||event.key===' ') this.click();"> <div class="choice-left"> <div class="choice-title">Create a National <<tip "Blue Carbon Shield" "Continuous belt of mangroves, seagrass, and reefs.">></div> <div class="choice-desc"><em>Pros:</em> Buffers waves, stores carbon, supports fisheries. <em>Cons:</em> Needs cross-state coordination and upkeep. </div> </div> <div class="choice-right"> <div><strong>Cost:</strong> RM2B</div> <div><strong>Resilience:</strong> +7</div> </div> </div> </div> </div> </div> <style> .round-wrap.decision { min-height: 60vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } .round-box.decision { max-width: 560px !important; width: 100%; line-height: 1.0 !important; max-height: 80vh; } .round-tracker { position:absolute; top:10px; right:14px; font-size:13px; font-weight:700; color:#444; } .round-box.decision h2{ margin:0 0 -20px !important; line-height:1.0 !important; } .round-box.decision p{ margin:0; line-height:1.15 !important; } .choice-grid{ display:grid; gap:-40px; margin-top:-40px; } .choice-card{ background:#f8fafc !important; border-radius:12px; padding:10px 10px; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; box-shadow:0 2px 10px rgba(0,0,0,.10); text-decoration:none !important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; line-height:1.0 !important; } .choice-card:hover,.choice-card:focus{ transform:scale(1.02); box-shadow:0 6px 16px rgba(0,0,0,.18); background:#fff !important; outline:none; } .choice-left{ flex:2; padding-right:8px; } .choice-right{ flex:1; text-align:right; font-size:13px; } .choice-title{ font-weight:700; margin-bottom:0; } .choice-desc{ font-size:13px; color:#333; } </style>
<<set $showStats = true>> <<set $round = 3>> <<run $('html, body').addClass('lock-scroll')>> /* ========= Round 3 thresholds (resilience-first, 2100) ========= Bands: Failing < P25 | At Risk [P25,P45) | Stable [P45,P70) | Resilient [P70,P92) | Thriving ≥ P92 Final placement is driven by Resilience; Equity/Ecosystem/Water can boost by +1 if ≥ base. Budget applies a GRADED penalty only: - overspend < RM 2b → −1 level - overspend = RM 2b → −1 level - overspend > RM 2b → −2 levels (Budget still appears in “What went well / Areas at risk” bullets.) ================================================================== */ <<silently>> /* Pull final totals with safe fallbacks */ <<set _budget = ($budget || 0)>> /* RM million */ <<set _res = ($resilience || 0)>> <<set _eq = ($equity || 0)>> <<set _eco = ($ecosystem || 0)>> <<set _water = ($water || $water_down || 0)>> /* Convert budget to billions for thresholds/bullets and overspend calc */ <<set _budgetB = (_budget ? _budget/1000 : 0)>> /* Character name exactly as stored by your character chooser */ <<set _char = ($character || "Player")>> /* Helper to convert a value into a 1..5 level using percentile cutpoints */ <<set _level = function(v,p25,p45,p70,p92){ if (v < p25) { return 1; } /* Failing */ if (v < p45) { return 2; } /* At Risk */ if (v < p70) { return 3; } /* Stable */ if (v < p92) { return 4; } /* Resilient */ return 5; /* Thriving */ }>> /* ---------------- Pillar levels (data-driven cutpoints) ---------------- Note: Budget thresholds are for display only; NOT used to compute base outcome. */ <<set _Lcost = _level(_budgetB, -1.20, 2.20, 6.23, 11.35)>> /* RM b */ <<set _Lres = _level(_res, 18, 25, 34, 40 )>> <<set _Leq = _level(_eq, 12, 16, 20, 24 )>> <<set _Leco = _level(_eco, 6, 11, 18, 25 )>> <<set _Lwat = _level(_water, 13, 16, 20, 25 )>> /* Label and star helpers */ <<set _label = function(L){ return (L===5) ? "Thriving" : (L===4) ? "Resilient" : (L===3) ? "Stable" : (L===2) ? "At Risk" : "Failing"; }>> <<set _stars = function(L){ return "★".repeat(L) + "☆".repeat(5-L); }>> /* ---------------- Final placement: resilience-first + capped boost + thriving rule -------- - Base = Resilience *level* (_Lres). - Support boost (Equity/Ecosystem/Water): at least two >= Base → +1, but cap at 4 (Resilient). - Thriving (level 5) is ONLY if: (a) $resilience ≥ 39 points AND (b) overspend == 0 (no budget bust). - Overspend penalty still applies normally. -------------------------------------------------------------------------------------------- */ <<set _base = _Lres>> <<set _supporters = ((_Leq >= _base) ? 1 : 0) + ((_Leco >= _base) ? 1 : 0) + ((_Lwat >= _base) ? 1 : 0)>> /* cap any boost from other indicators at Resilient (4) */ <<set _boost = (_supporters >= 2) ? 1 : 0>> <<set _overallBase = Math.min(_base + _boost, 4)>> /* overspend in billions (positive only if budget < 0) */ <<set _overspendB = Math.max(0, -_budgetB)>> <<set _penalty = (_overspendB > 2) ? 2 : ((_overspendB > 0) ? 1 : 0)>> /* Apply penalty and clamp to [1..5] (still max 4 at this stage) */ <<set _overall = Math.max(1, Math.min(5, _overallBase - _penalty))>> /* Thriving override: ONLY by resilience points + no bust */ <<set _thrivingOK = ($resilience >= 39 && _overspendB === 0)>> <<if _thrivingOK>> <<set _overall = 5>> <</if>> <<set _overallLabel = _label(_overall)>> <<set _overallStars = _stars(_overall)>> /* Build what went well and areas at risk from the thresholds only */ <<set _good = []>><<set _bad = []>> <<for _pair range [ ['Budget',_Lcost], ['Resilience',_Lres], ['Equity',_Leq], ['Ecosystem',_Leco], ['Water',_Lwat] ]>> <<if _pair[1] >= 4>><<run _good.push(_pair[0])>><</if>> <<if _pair[1] <= 2>><<run _bad.push(_pair[0])>><</if>> <</for>> <<set _goodStr = (_good.length>0) ? _good.join(", ") : "no particular sectors">> <<set _badStr = (_bad.length>0) ? _bad.join(", ") : "few sectors, most areas held strong">> /* Short world text by overall, no numbers, no em dashes */ <<if _overall >= 5>> <<set _world = "Malaysia is robust and confident. Cities are comfortable, coasts are protected, and communities prosper with nature.">> <<elseif _overall === 4>> <<set _world = "Malaysia is mostly safe and productive. Some regions still struggle and ecosystems need continued care.">> <<elseif _overall === 3>> <<set _world = "Malaysia gets through climate pressures with mixed results. Some places do well while others face persistent risks.">> <<elseif _overall === 2>> <<set _world = "Floods and heat strain services and budgets. Inequality and ecosystem loss increase the hardship.">> <<else>> <<set _world = "Unmanaged impacts shape daily life. Defences are patchy, nature is degraded, and recovery is slow.">> <</if>> <</silently>> <div class="round-wrap"> <div class="round-box summary"> <h2>Final Outcome: Year 2100</h2> <h3 class="achievement-line"> <<= _char>>, you have achieved <strong><<= _overallStars>> (<<= _overallLabel>>)!</strong> </h3> <p><strong>What went well:</strong> <<= _goodStr>></p> <p><strong>Areas at risk:</strong> <<= _badStr>></p> <p><strong>The world you helped shape:</strong> <<= _world>></p> <div class="cta-wrap"> <button class="cta-btn" onclick="SugarCube.Engine.restart()">Play Again</button> </div> </div> </div> <style> /* Full-screen flex layout, center content both ways */ .round-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; } /* Centered white summary card */ .round-box.summary { max-width: 640px; background: #fff; padding: 28px 34px; border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,0.15); transform: translateY(-30vh); /* nudges slightly upward for visual centering */ } /* Heading hierarchy */ .round-box.summary h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.2; text-align: center; } .round-box.summary .achievement-line { margin: 6px 0 14px; font-size: 18px; /* bigger than paragraph text */ font-weight: 600; text-align: center; color: #111; } /* Paragraphs and text spacing */ .round-box.summary p { margin: 6px 0 10px; font-size: 15px; letter-spacing: .1px; text-align: justify; } .round-box.summary p strong { font-weight: 600; } .explain { margin-top: 10px; color: #333; font-size: 14px; text-align: justify; } /* Restart button */ .cta-wrap { text-align: center; margin-top: 18px; } .cta-btn { background: #1e3a8a; color: #fff; border: 0; border-radius: 0; padding: 12px 28px; font-weight: 600; cursor: pointer; transition: background .2s ease; } .cta-btn:hover { background: #154c79; } </style>