feat(ui): crypto-aware title/favicon + clearer Champions vs Pleb framing

- Footer title and favicon now track the currency: "Monero Roguelike" + the
  Monero logo favicon on the XMR instance, "Wownero Roguelike" + the existing
  favicon on WOW (driven by UI.updateGameTitle).
- "Choose How to Play" modal: a header explains that paying (credits/entry)
  puts high scores in the Hall of Champions while free play uses the Pleb
  leaderboard, and each option now says which board it feeds — on both the
  no-payout (mainnet) and payout (stagenet) variants.

html/index.html

@@ -3,8 +3,8 @@
 <head>
     <title>Wownerogue - A Wownero Roguelike</title>
     <link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    
+    <link rel="icon" type="image/x-icon" href="favicon.ico" id="favicon">
+
     <!-- Socket.io -->
     <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
     
@@ -221,7 +221,7 @@
 
         <!-- Footer -->
         <div class="footer">
-            <span>Wownero Roguelike v0.1.0 | Use WASD or arrow keys to move</span>
+            <span id="footer-title">Wownero Roguelike v0.1.0 | Use WASD or arrow keys to move</span>
             <span id="hosted-by-container"></span>
         </div>
     </div>

html/js/ui/paymentUI.js

@@ -113,7 +113,17 @@ const PaymentUI = {
         
         // Reset selected package
         this.selectedPackageId = null;
-        
+
+        // Explain the two leaderboards up front when both paid and free are available.
+        if (this.config.paymentsEnabled && this.config.freePlayEnabled) {
+            $container.append(
+                '<div style="margin-bottom:14px;padding:10px;background:rgba(245,158,11,0.08);border:1px solid #92400e;border-radius:6px;font-size:0.85em;line-height:1.5;">' +
+                    '🏅 <strong style="color:#fbbf24;">Pay</strong> (credits or single entry) to put your high scores in the <strong style="color:#fbbf24;">Hall of Champions</strong>.<br>' +
+                    '🪙 <strong style="color:#8ab4f8;">Play free</strong> — high scores go to the <strong style="color:#8ab4f8;">Pleb leaderboard</strong> instead.' +
+                '</div>'
+            );
+        }
+
         // === SECTION 1: Use existing credits (if available) ===
         if (hasCredits && this.config.creditsModeEnabled) {
             const creditsPayoutsEnabled = this.config.creditsPayoutsEnabled;
@@ -125,9 +135,9 @@ const PaymentUI = {
                 const baseFormatted = this.formatPrice(creditsBaseValue);
                 const escapeWin = (parseFloat(baseFormatted) * creditsMultipliers.escape).toFixed(2);
                 const treasureWin = (parseFloat(baseFormatted) * creditsMultipliers.escapeWithTreasure).toFixed(2);
-                payoutNote = `<span style="color:#4ade80;">💰 Win: ${creditsMultipliers.escape}x (${escapeWin} ${currency}) • Treasure: ${creditsMultipliers.escapeWithTreasure}x (${treasureWin} ${currency})</span>`;
+                payoutNote = `<span style="color:#4ade80;">💰 Win: ${creditsMultipliers.escape}x (${escapeWin} ${currency}) • Treasure: ${creditsMultipliers.escapeWithTreasure}x (${treasureWin} ${currency})</span><br><span style="color:#fbbf24;">🏅 High scores enter the Hall of Champions</span>`;
             } else {
-                payoutNote = '<span style="color:#888;">No crypto payouts • Play for fun</span>';
+                payoutNote = '<span style="color:#fbbf24;">🏅 High scores enter the Hall of Champions</span>';
             }
             
             $container.append(`
@@ -156,9 +166,9 @@ const PaymentUI = {
             if (directPayoutsEnabled) {
                 const escapeWin = (parseFloat(price) * multipliers.escape).toFixed(2);
                 const treasureWin = (parseFloat(price) * multipliers.escapeWithTreasure).toFixed(2);
-                payoutInfo = `<span style="color:#4ade80;">Win: ${multipliers.escape}x (${escapeWin} ${currency}) • Treasure: ${multipliers.escapeWithTreasure}x (${treasureWin} ${currency})</span>`;
+                payoutInfo = `<span style="color:#4ade80;">Win: ${multipliers.escape}x (${escapeWin} ${currency}) • Treasure: ${multipliers.escapeWithTreasure}x (${treasureWin} ${currency})</span><br><span style="color:#fbbf24;">🏅 High scores enter the Hall of Champions</span>`;
             } else {
-                payoutInfo = '<span style="color:#888;">No crypto payouts</span>';
+                payoutInfo = '<span style="color:#fbbf24;">🏅 High scores enter the Hall of Champions</span>';
             }
             
             $container.append(`
@@ -193,7 +203,7 @@ const PaymentUI = {
                 const treasureWin = (parseFloat(baseFormatted) * creditsMultipliers.escapeWithTreasure).toFixed(2);
                 creditsPayoutInfo = `<div style="font-size:0.85em;color:#4ade80;margin-bottom:10px;">💰 Win: ${creditsMultipliers.escape}x (${escapeWin} ${currency}) • Treasure: ${creditsMultipliers.escapeWithTreasure}x (${treasureWin} ${currency})</div>`;
             } else {
-                creditsPayoutInfo = `<div style="font-size:0.85em;color:#888;margin-bottom:10px;">No crypto payouts • Play for fun with bulk discount</div>`;
+                creditsPayoutInfo = `<div style="font-size:0.85em;color:#fbbf24;margin-bottom:10px;">🏅 High scores enter the Hall of Champions • bulk discount</div>`;
             }
             
             let packagesHtml = '';
@@ -264,7 +274,7 @@ const PaymentUI = {
         // alongside paid (freePlayEnabled). Free games go to the Pleb leaderboard.
         if (this.config.freePlayEnabled) {
             const note = this.config.paymentsEnabled
-                ? 'No payout • Pleb leaderboard'
+                ? '🪙 Free — high scores go to the Pleb leaderboard'
                 : 'No payments required';
             $container.append(`
                 <button class="mode-option" data-mode="FREE" data-action="free"

html/js/ui/ui.js

@@ -51,7 +51,8 @@ const UI = {
     _gameTitleFull: "WOWNEROGUE - A Wownero Roguelike",
 
     updateGameTitle: function(cryptoType) {
-        if (cryptoType === 'XMR') {
+        var isXmr = cryptoType === 'XMR';
+        if (isXmr) {
             document.title = "Monerogue - A Monero Roguelike";
             this._gameTitleFull = "MONEROGUE - A Monero Roguelike";
         } else {
@@ -59,6 +60,11 @@ const UI = {
             this._gameTitleFull = "WOWNEROGUE - A Wownero Roguelike";
         }
 
+        // Footer line + favicon track the currency too (Wownero vs Monero per instance).
+        $('#footer-title').text((isXmr ? 'Monero' : 'Wownero') + ' Roguelike v0.1.0 | Use WASD or arrow keys to move');
+        var favicon = document.getElementById('favicon');
+        if (favicon) favicon.href = isXmr ? 'favicon-monero.png' : 'favicon.ico';
+
         // If the static banner is already visible (animation finished), update it immediately
         if ($('#staticbanner').is(':visible') && !$('#banner').is(':visible')) {
             $('#staticbanner').text(this._gameTitleFull);