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/key.html

@@ -3,19 +3,24 @@
 <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>
-  <main class="wrap">
-    <div class="logo">Hold'em<br>Night<small>PRIVATE CLUB</small></div>
+<body class="page-key">
+  <main class="key-screen">
+    <div class="app-mark" 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>
+    <h1 class="brand">Hold'em Night</h1>
+    <p class="brand-sub">PRIVATE CLUB</p>
 
-    <form id="form" class="card" autocomplete="off">
+    <form id="form" class="key-form" autocomplete="off">
       <h2 class="key-title" id="key-title">参加キーを入力</h2>
-      <p class="hint key-hint" id="key-hint">オーナーから教えてもらった6桁の数字</p>
+      <p class="key-hint" id="key-hint">オーナーから教えてもらった6桁の数字</p>
       <div class="key-inputs" id="digits">
         <input type="tel" inputmode="numeric" aria-label="1桁目" autocomplete="one-time-code">
         <input type="tel" inputmode="numeric" aria-label="2桁目">
@@ -24,10 +29,11 @@
         <input type="tel" inputmode="numeric" aria-label="5桁目">
         <input type="tel" inputmode="numeric" aria-label="6桁目">
       </div>
-      <div class="error-text text-center" id="error"></div>
-      <button class="btn btn-orange btn-block mt-8" id="submit" type="submit">入室する</button>
+      <p class="error-text" id="error" role="alert"></p>
+      <button class="btn btn-tint btn-lg btn-block" id="submit" type="submit">入室する</button>
     </form>
   </main>
+  <script src="/assets/fluid.js"></script>
   <script src="/assets/common.js"></script>
   <script src="/assets/key.js"></script>
 </body>