fix: expose Smirk account entry in free Tavern mode

html/index.html

@@ -169,6 +169,9 @@
             <button id="animationToggleButton" class="ctrl-btn ctrl-btn--anim" style="display: none;">
                 🎬 DISABLE ANIMATION
             </button>
+            <section id="smirkAccountSection" class="smirk-account-entry" aria-label="Smirk account" tabindex="-1" style="display:none;">
+                <div id="smirkButtonContainer"></div>
+            </section>
             <div class="hud-toolbar">
                 <label>
                     <input type="checkbox" id="audioAlertsToggle"> Audio Alerts
@@ -302,20 +305,6 @@
             <p class="modal-description">Enter your Wownero (WOW) or Monero (XMR) address below. This will be used for payouts when you escape.</p>
             <p class="modal-description" style="font-size:11px; color:#888; margin-top:8px; padding:6px; background:rgba(255,200,0,0.1); border-radius:4px;">💡 <strong>Session Info:</strong> Your address and credits are tied to a browser session token stored locally. They will persist across page refreshes but will be lost if you clear cookies, use incognito mode, or switch browsers.</p>
 
-            <!-- Smirk Wallet Integration -->
-            <div id="smirkSection" style="margin: 15px 0; padding: 12px; background: rgba(26,26,77,0.5); border: 1px solid #3a3a7d; border-radius: 6px;">
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                    <span style="font-size: 1.2em;">🔐</span>
-                    <strong style="color: #aaf;">Connect with Smirk Wallet</strong>
-                </div>
-                <p style="font-size: 11px; color: #999; margin-bottom: 10px;">Automatically set your payout address by connecting your Smirk browser wallet.</p>
-                <div id="smirkButtonContainer">
-                    <!-- Will be populated by smirkAuth.js -->
-                </div>
-            </div>
-
-            <div style="text-align: center; color: #666; margin: 10px 0; font-size: 12px;">or enter manually</div>
-
             <form id="addressModalForm">
                 <label for="addressModalInput" class="modal-label">Payout Address</label>
                 <textarea id="addressModalInput" autocomplete="off" spellcheck="false" rows="3" placeholder="Paste your payout address here"></textarea>

html/js/network/smirkAuth.js

@@ -318,7 +318,7 @@ const SmirkAuth = {
      * Create and return the Smirk login button element
      */
     _createButton() {
-        const btn = $('<button id="smirkLoginBtn" class="menu-button">')
+        const btn = $('<button id="smirkLoginBtn" type="button" class="menu-button">')
             .css({
                 'background': '#1a1a4d',
                 'color': '#fff',
@@ -330,7 +330,7 @@ const SmirkAuth = {
                 'width': '100%',
                 'text-align': 'center'
             })
-            .text('Connect Smirk Wallet');
+            .text('Connect Smirk');
 
         return btn;
     },
@@ -363,7 +363,7 @@ const SmirkAuth = {
             default: // 'ready'
                 btn.prop('disabled', false)
                    .css({ 'background': '#1a1a4d', 'border-color': '#3a3a7d', 'cursor': 'pointer' })
-                   .text('Connect Smirk Wallet');
+                   .text('Connect Smirk');
         }
     },
 

html/js/network/socketHandlers.js

@@ -18,6 +18,7 @@ const SocketHandlers = {
 
     _directModeEnabled: false,
     _directPayoutsEnabled: false,
+    _anyPayoutsEnabled: false,
     _paymentsEnabled: false,
     _isSmirkExplicitlyEnabled: function(data) {
         return !!data && data.smirkEnabled === true;
@@ -874,6 +875,10 @@ const SocketHandlers = {
     },
 
     onAddressPrompt: function(data) {
+        if (!SocketHandlers._anyPayoutsEnabled) {
+            console.warn('Ignoring payout address prompt while payouts are disabled.');
+            return;
+        }
         if (typeof AddressModal !== 'undefined') {
             AddressModal.show({
                 existingAddress: data?.existingAddress || null,
@@ -916,7 +921,14 @@ const SocketHandlers = {
             && data.modes.match.economies.crypto_race);
         var anyPayouts = SocketHandlers._creditsPayoutsEnabled
             || SocketHandlers._directPayoutsEnabled || matchCryptoPayouts;
+        SocketHandlers._anyPayoutsEnabled = anyPayouts;
         $('#manageAddressButton').toggle(anyPayouts);
+        $('#smirkAccountSection').toggle(SocketHandlers._smirkEnabled);
+        if (SocketHandlers._smirkEnabled && window.location.hash === '#smirkAccountSection'
+            && document.activeElement === document.body) {
+            document.getElementById('smirkAccountSection')?.focus({ preventScroll: true });
+        }
+        if (!anyPayouts && typeof AddressModal !== 'undefined') AddressModal.hide();
         if (data.entitlements && typeof SinglePlayerAvatar !== 'undefined') {
             SinglePlayerAvatar.applyEntitlements(data.entitlements);
         }

html/js/ui/addressModal.js

@@ -53,6 +53,9 @@
         },
 
         show({ existingAddress = null, message = null } = {}) {
+            if (typeof SocketHandlers === 'undefined' || SocketHandlers._anyPayoutsEnabled !== true) {
+                return;
+            }
             this.ensureInit();
             if (!this._elements.overlay.length) {
                 return;

html/styles/stylesheet.css

@@ -204,6 +204,12 @@ body {
     border-top: 1px solid rgba(255,255,255,0.055);
 }
 
+.smirk-account-entry { margin-top: 8px; }
+.smirk-account-entry :is(button, a):focus-visible {
+    outline: 2px solid #aaf;
+    outline-offset: 2px;
+}
+
 /* =========================================================================
    HUD TOOLBAR: secondary "chip" controls (audio toggle + help / history /
    scores / manage-address). Small, bordered, glow-on-hover.

html/tavern.html

@@ -44,10 +44,12 @@
                linear-gradient(180deg,#111015,var(--bg) 48%); color:var(--text); font-family:PixelOperator,ui-monospace,monospace; }
         body::before { content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px; }
         .wrap { position:relative; max-width:980px; margin:0 auto; padding:18px clamp(10px,3vw,26px) 32px; }
-        .tavern-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
+        .tavern-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap; }
+        .tavern-nav { display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap; }
         h1 { color:#fff;font-size:clamp(24px,4vw,34px);margin:0;letter-spacing:.03em; }
         .backlink { color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:13px; }
         .backlink:hover { color:#fff;border-color:#667386; }
+        .backlink:focus-visible { outline:2px solid var(--cyan);outline-offset:2px; }
         .muted { color:var(--muted);font-size:13px; }
         .rk-canvas { background:#050609;display:block;max-width:100%;image-rendering:pixelated; }
         .panel { background:rgba(21,26,32,.97);border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:12px;box-shadow:inset 0 1px rgba(255,255,255,.025); }
@@ -99,7 +101,7 @@
         .touch-pad button { width:44px;height:40px;padding:0;touch-action:manipulation;background:rgba(25,45,31,.94);color:#93f3a2;border-color:#4f9a5c; }
         .touch-pad [data-dir="up"]{grid-area:up}.touch-pad [data-dir="left"]{grid-area:left}.touch-pad [data-dir="down"]{grid-area:down}.touch-pad [data-dir="right"]{grid-area:right}
         @media (max-width:700px),(pointer:coarse) { .touch-pad{display:grid} #stage,.spectator-render{height:min(54vh,500px)} .join-copy{display:block}.join-copy .muted{display:block;margin-top:5px}.join-fields{grid-template-columns:auto minmax(0,1fr)}.join-fields #customizeBtn,.join-fields #joinBtn{grid-column:auto / span 1}.join-fields label{grid-column:1}.join-fields #name{grid-column:2} }
-        @media (max-width:430px) { .wrap{padding-inline:8px}.tavern-head .muted{display:none}#modebar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.modebtn{white-space:nowrap} }
+        @media (max-width:430px) { .wrap{padding-inline:8px}.tavern-head{align-items:flex-start;flex-direction:column;gap:10px}.tavern-head .muted{display:none}.tavern-nav{justify-content:flex-start}#modebar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.modebtn{white-space:nowrap} }
         @media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important} }
     </style>
 </head>
@@ -107,7 +109,11 @@
     <div class="wrap">
         <header class="tavern-head">
             <h1>🔥 The Tavern <span class="muted">social hall</span></h1>
-            <span><a class="backlink" href="/responsible-play">Responsible Play</a> <a class="backlink" href="/">← Lobby</a></span>
+            <nav class="tavern-nav" aria-label="Tavern links">
+                <a id="smirkAccountLink" class="backlink" href="/#smirkAccountSection" hidden>Smirk account</a>
+                <a class="backlink" href="/responsible-play">Responsible Play</a>
+                <a class="backlink" href="/">← Lobby</a>
+            </nav>
         </header>
 
         <form id="joinPanel" class="panel" autocomplete="off">
@@ -466,6 +472,8 @@
         });
         socket.on('game_mode_info', function (data) {
             lastGameModeInfo = data || null;
+            var smirkAccountLink = document.getElementById('smirkAccountLink');
+            if (smirkAccountLink) smirkAccountLink.hidden = !(data && data.smirkEnabled === true);
             if (data && data.entitlements) applyEntitlements(data.entitlements);
             if (data && data.cryptoType) cryptoType = data.cryptoType;
         });