Rebuild the UI in an Apple style with spring-driven motion

Replace the look of every page (key, lobby, create, table, range, review)
with light/dark semantic colors, translucent materials, iOS-style grouped
lists and system typography. Add fluid.js, a small spring engine with
interruptible, velocity-aware animations, and use it for draggable bottom
sheets, sliding segmented controls, a custom bet slider with rubber-banding,
swipe-to-delete in the lobby, and dealt/flipped cards. Seats and cards are
now reused between renders so animations are not cut off. Honors reduced
motion, reduced transparency and increased contrast.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/lobby.html

@@ -3,34 +3,77 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="#24493b">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f2f2f7">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
   <meta name="robots" content="noindex, nofollow">
   <title>Hold'em Night</title>
   <link rel="icon" href="/assets/favicon.ico">
   <link rel="stylesheet" href="/assets/style.css">
 </head>
-<body>
+<body class="page-lobby">
+  <header class="nav-bar" id="nav">
+    <div class="nav-inner"><span class="nav-title"></span></div>
+  </header>
+
   <main class="wrap">
-    <div class="logo">Hold'em<br>Night<small>PRIVATE CLUB</small></div>
-
-    <label for="name">あなたの名前</label>
-    <input id="name" type="text" maxlength="12" placeholder="例: とらのすけ" autocomplete="nickname">
-    <div class="error-text" id="name-error"></div>
-
-    <button id="create" class="btn btn-orange btn-block mt-4" type="button">＋ テーブルを作成</button>
-    <a id="range-link" class="btn btn-dark btn-block mt-8" href="/range" hidden>♠ ハンドレンジ学習</a>
-    <a id="review-link" class="btn btn-dark btn-block mt-8" href="/review" hidden>📝 CPU戦のレビュー</a>
-
-    <div class="section-title">
-      <span>開催中のテーブル</span>
-      <span class="sub" id="count"></span>
+    <div class="hero">
+      <div class="app-mark small" aria-hidden="true">
+        <svg viewBox="0 0 24 24"><path d="M12 2.2c-2.3 3.1-7.6 6.3-7.6 10.4a4.1 4.1 0 0 0 7 2.9c-.1 2.3-1 4-2.6 5.3h6.4c-1.6-1.3-2.5-3-2.6-5.3a4.1 4.1 0 0 0 7-2.9c0-4.1-5.3-7.3-7.6-10.4z"/></svg>
+      </div>
+      <div>
+        <h1 class="large-title" id="large-title">Hold'em Night</h1>
+        <p class="brand-sub">PRIVATE CLUB</p>
+      </div>
     </div>
-    <div class="table-list" id="list">
-      <div class="empty">読み込み中…</div>
+
+    <section class="group">
+      <div class="group-header">プロフィール</div>
+      <div class="list">
+        <div class="cell field-cell">
+          <label for="name">名前</label>
+          <input id="name" type="text" maxlength="12" placeholder="例: とらのすけ" autocomplete="nickname">
+        </div>
+      </div>
+      <div class="error-text" id="name-error" role="alert"></div>
+    </section>
+
+    <div class="lobby-actions">
+      <button id="create" class="btn btn-tint btn-lg btn-block" type="button">
+        <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>テーブルを作成
+      </button>
     </div>
+
+    <!-- 管理者だけに表示 -->
+    <section class="group" id="admin-group" hidden>
+      <div class="group-header">管理者</div>
+      <div class="list">
+        <a id="range-link" class="cell cell-link" href="/range">
+          <span class="cell-icon tone-purple"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5"/></svg></span>
+          <span class="cell-title">ハンドレンジ学習</span>
+          <svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
+        </a>
+        <a id="review-link" class="cell cell-link" href="/review">
+          <span class="cell-icon tone-orange"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 20v-8M12 20V5M19 20v-9"/></svg></span>
+          <span class="cell-title">CPU戦のレビュー</span>
+          <svg class="i chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
+        </a>
+      </div>
+    </section>
+
+    <section class="group">
+      <div class="group-header">
+        <span>開催中のテーブル</span>
+        <span id="count"></span>
+      </div>
+      <div class="list" id="list">
+        <div class="empty">読み込み中…</div>
+      </div>
+      <div class="group-footer" id="list-footer" hidden>行を左へスワイプすると削除できます（管理者）。</div>
+    </section>
   </main>
 
   <script src="/socket.io/socket.io.js"></script>
+  <script src="/assets/fluid.js"></script>
   <script src="/assets/common.js"></script>
   <script src="/assets/lobby.js"></script>
 </body>