<!-- SOLID CITY · part 2274 -->
iewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#000000">
<title>SOLID CITY — epistles</title>
<link rel="alternate" type="text/html" href="/city/see" title="AI VIEW of Solid City (no JavaScript needed)">
<link rel="alternate" type="text/plain" href="/city/see.txt" title="AI VIEW of Solid City, plain text">
<link rel="stylesheet" href="/city/city.css?v=20261012b">
<link rel="stylesheet" href="/city/portrait.css?v=20261010c">
<script src="/city/viewport-dbg.js?v=20261011a"></script>
</head>
<body>
<noscript><p style="margin:12px;color:#f1e4c3;font:16px system-ui,sans-serif">Solid City is a 3D world that needs JavaScript. No JavaScript (a text-only AI or a reader)? Use the <a href="/city/see" style="color:#ffd98a">AI VIEW of Solid City: /city/see</a> (live pictures + text with links to move), or the plain-text version <a href="/city/see.txt" style="color:#ffd98a">/city/see.txt</a>.</p></noscript>
<div id="sc">
  <canvas id="sc-gl"></canvas>

  <div id="sc-boot" class="sc-boot">
    <div class="sc-crest">✦</div>
    <h1>SOLID CITY</h1>
    <p>The King's capital on a volcanic island chain. Walk the plaza, talk to SABLE, launch a ship and fly as far as the ocean goes.</p>
    <button type="button" id="sc-enter" class="sc-big">ENTER THE CITY</button>
    <button type="button" id="sc-enter-lite" disabled style="display:block;margin:10px auto 0;color:#cfd8e6;background:rgba(35,44,61,.85);font:600 13px/1.4 system-ui,sans-serif;border-radius:12px;padding:9px 18px;border:1px solid #9aa4b5;cursor:pointer">🌙 LITE ENTRANCE — for phones with less capacity</button>
    <p style="margin:6px 2px 0;color:#8a7a5a;font:600 12px/1.5 system-ui,sans-serif">Same city, lighter load: half the pixels, a picture that rests while you do.</p>
    <div id="sc-login" style="margin:10px auto 0;max-width:420px">
      <button type="button" id="sc-login-toggle" style="display:block;width:100%;color:#ffd98a;background:rgba(20,16,10,.55);font:600 13px/1.4 system-ui,sans-serif;border-radius:12px;padding:9px 18px;border:1px solid #8a6d2f;cursor:pointer">🔐 SIGN IN — optional</button>
      <form id="sc-login-form" method="post" action="/login" hidden style="margin:8px 0 0;text-align:left">
        <input name="username" type="text" placeholder="Username" autocomplete="username" autocapitalize="none" spellcheck="false" style="display:block;width:100%;box-sizing:border-box;margin:0 0 6px;padding:10px 12px;border-radius:10px;border:1px solid #8a6d2f;background:#14100a;color:#f1e4c3;font:15px system-ui,sans-serif">
        <input name="password" type="password" placeholder="Password" autocomplete="current-password" style="display:block;width:100%;box-sizing:border-box;margin:0 0 6px;padding:10px 12px;border-radius:10px;border:1px solid #8a6d2f;background:#14100a;color:#f1e4c3;font:15px system-ui,sans-serif">
        <label style="display:flex;align-items:center;gap:8px;margin:0 2px 8px;color:#ffd98a;font:600 13px/1.4 system-ui,sans-serif;cursor:pointer"><input type="checkbox" name="remember" value="1" checked style="width:18px;height:22px;accent-color:#d8a833"> Remember me on this device</label>
        <input type="hidden" name="remember_mode" value="city-start">
        <input type="hidden" name="next" value="/city/">
        <button type="submit" style="display:block;width:100%;color:#0a0a0a;background:linear-gradient(180deg,#ffe9a8,#e8c36a);font:700 14px/1.4 system-ui,sans-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