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>

admin/range.html

@@ -3,42 +3,49 @@
 <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">
   <link rel="stylesheet" href="/range/files/range.css">
 </head>
-<body>
-  <main class="wrap range-wrap">
-    <div class="topbar">
-      <a class="icon-btn" href="/" aria-label="ロビーへ戻る">←</a>
-      <h1>ハンドレンジ</h1>
+<body class="page-range">
+  <header class="nav-bar" id="nav">
+    <div class="nav-inner">
+      <a class="nav-back" href="/" aria-label="ロビーへ戻る"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg>ロビー</a>
+      <span class="nav-title"></span>
     </div>
+  </header>
 
-    <div class="seg" id="tabs">
+  <main class="wrap range-wrap">
+    <h1 class="large-title" id="large-title">ハンドレンジ</h1>
+
+    <div class="segmented range-tabs" id="tabs">
       <button type="button" class="seg-btn active" data-view="range">レンジ表</button>
       <button type="button" class="seg-btn" data-view="quiz">クイズ</button>
     </div>
 
     <!-- レンジ表 -->
     <section id="view-range">
-      <div class="range-matrix" id="matrix" aria-label="13×13 ハンドレンジ表"></div>
+      <div class="matrix-card">
+        <div class="range-matrix" id="matrix" aria-label="13×13 ハンドレンジ表"></div>
+      </div>
       <div class="range-legend" id="legend"></div>
 
-      <div class="card mt-12" id="selected">
+      <div class="card selected-card" id="selected">
         <div class="sel-hand">—</div>
         <div class="hint">セルをタップすると分類を確認できます</div>
       </div>
 
-      <button type="button" class="btn btn-orange btn-block mt-12" id="start-from-range">クイズを始める</button>
+      <button type="button" class="btn btn-tint btn-lg btn-block mt-12" id="start-from-range">クイズを始める</button>
     </section>
 
     <!-- クイズ -->
     <section id="view-quiz" hidden>
       <div class="label">問題数（全169ハンドからランダム）</div>
-      <div class="seg" id="count">
+      <div class="segmented" id="count">
         <button type="button" class="seg-btn active" data-count="10">10問</button>
         <button type="button" class="seg-btn" data-count="20">20問</button>
         <button type="button" class="seg-btn" data-count="0">全問</button>
@@ -64,12 +71,13 @@
       <div class="quiz-feedback" id="feedback" aria-live="polite" hidden></div>
 
       <div class="row mt-12">
-        <button type="button" class="btn btn-dark" id="start-quiz">開始</button>
-        <button type="button" class="btn btn-blue" id="next-question" disabled>次の問題 →</button>
+        <button type="button" class="btn btn-lg" id="start-quiz">開始</button>
+        <button type="button" class="btn btn-tint btn-lg" id="next-question" disabled>次の問題</button>
       </div>
     </section>
   </main>
 
+  <script src="/assets/fluid.js"></script>
   <script src="/range/files/range-data.js"></script>
   <script src="/range/files/range.js"></script>
 </body>