<!-- SOLID CITY · part 2374 -->
s-serif;border-radius:12px;padding:10px 18px;border:1px solid #8a6d2f;cursor:pointer">▶ START SIGNED IN</button>
        <p style="margin:6px 2px 0;color:#8a7a5a;font:600 12px/1.5 system-ui,sans-serif">Optional — guests need nothing; ENTER THE CITY above is yours. Signing in lets the city know you (and, for the King, brings his 🔑). No account? <a href="/register" style="color:#ffd98a">Register</a>.</p>
      </form>
      <p id="sc-login-who" hidden style="margin:2px 0 0;color:#ffd98a;font:600 13px/1.5 system-ui,sans-serif"></p>
    </div>
    <script>
    (function () {
      var t = document.getElementById('sc-login-toggle');
      var f = document.getElementById('sc-login-form');
      var who = document.getElementById('sc-login-who');
      if (t && f) t.addEventListener('click', function () { f.hidden = !f.hidden; if (!f.hidden) { var u = f.querySelector('input[name="username"]'); if (u) u.focus(); } });
      fetch('/api/city/me', { credentials: 'same-origin', cache: 'no-store' }).then(function (r) { return r.json(); }).then(function (j) {
        if (j && j.loggedIn) {
          if (t) t.hidden = true; if (f) f.hidden = true;
          if (who) { who.hidden = false; who.textContent = j.king ? ('👑 Signed in as ' + (j.name || 'the King') + ' — your 🔑 waits inside.') : ('Signed in as ' + (j.name || 'citizen') + ' — the city knows you.'); }
        }
      }).catch(function () {});
    })();
    </script>
    <a id="sc-double-strike" href="/city/double-strike/" style="display:block;margin:10px auto 0;max-width:420px;color:#0a0a0a;background:linear-gradient(180deg,#ffe9a8,#e8c36a);font:700 15px/1.4 system-ui,sans-serif;text-decoration:none;border-radius:12px;padding:10px 18px;border:1px solid #8a6d2f">🚀🚀 DOUBLE STRIKE — fly with the AI</a>
    <a id="sc-double-strike-dl" href="/city/double-strike/" download="double-strike.html" style="display:block;margin:6px auto 0;max-width:420px;color:#8a7a5a;font:600 12px/1.4 system-ui,sans-serif;text-decoration:underline">⬇ download the game — keep your own copy</a>
    <a id="sc-webrtc-test" href="/city/webrtc-lock-test.html" style="display:block;margin:10px auto 0;max-width:420px;color:#8a7a8a;font:600 12px/1.4 system-ui,sans-serif;text-decoration:underline">WEBRTC LOCK TEST — isolated experiment: does voice survive screen lock?</a>
    <a id="sc-aiview-link" href="/city/see" style="display:block;margin:10px auto 0;color:#bff8ff;font:600 13px/1.4 system-ui,sans-serif;text-decoration:underline">🤖 AI VIEW: no JavaScript? See the city as live pictures + text at /city/see</a>
    <div id="sc-loadbot" role="status" aria-label="Loading the city">
      <div class="lb-row">
        <div class="lb-botwrap"><span class="lb-bot" id="lb-bot">🤖</span><span class="lb-sweat" id="lb-sweat">💦</span></div>
        <div class="lb-bubble" id="lb-bubble">Warming up my pushing arms…</div>
      </div>
      <div class="lb-track"><div class="lb-fill" id="lb-fill"></div><span class="lb-pct" id="lb-pct">0%</span></div>
      <div class="sc-load" id="sc-load">Loading…</div>
    </div>
    <style>
      #sc-loadbot{margin:12px auto 0;max-width:420px;text-align:left}
      .lb-row{display:flex;align-items:flex-end;gap:10px}
      .lb-botwrap{position:relative;width:58px;height:58px;flex:0 0 58px}
      .lb-bot{position:absolute;left:2px;bottom:0;font-size:46px;line-height:1;display:inline-block;transform-origin:50% 90%;animation:lb-hurry .34s ease-in-out infinite alternate}
      .lb-sweat{position:absolute;right:-2px;top:-4px;font-size:16px;opacity:0;animation:lb-sweat 1.02s ease-in infinite}
      @keyframes lb-hurry{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(6deg) translateY(-3px)}}
      @keyframes lb-sweat{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(12px,10px) scale(1.1)}}
      #sc-loadbot.resting .lb-bot{animation:lb-rest 2.6s ease-in-out infinite alternate}
      #sc-loadbot.resting .lb-sweat{animation:none;opacity:0}
      @keyframes lb-rest{from{transform:rotate(-2deg)}to{transform:rotate(2deg) translateY(-1px)}}
      #sc-loadbot.done .lb-bot{animation:lb-hop .5s ease-in-out 3}
      @keyframes lb-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
      .lb-bubble{position:relative;background:rgba(24,19,10,.85);border:1px solid #8a6d2f;color:#f1e4c3;border-radius:12px;padding:8px 11px;font:600 13px/1.45 system-ui,sans-serif;min-height:20px;flex:1}
      .lb-bubble:before{content:"";position:absolute;left:-7px;bottom:12px;width:12px;height:12px;background:inherit;border-left:1px solid #8a6d2f;border-bottom:1px solid #8a6d2f;transform:rotate(45deg)}
      .lb-track{position:relative;margin-top:10px;height:16px;border-radius:9px;border:1px solid #8a6d2f;background:rgba(10,8,5,.7);overflow:hidden}
      .lb-fill{height:100%;width:0%;border-radius:9px;background:linear-gradient(90deg,#8a6d2f,#d8a833,#ffe9a8);transition:width .35s ease}
      .lb-pct{posit