Make the dealer table usable on a phone

Two things were broken on a narrow screen. The seat ring is drawn on a radius
measured from the table wrap, so at phone width the left- and right-most seats
hung off the edge of the viewport — at a ten-handed table two players were
simply not on screen. And tapping a seat opened an editor far enough down the
page that it looked like nothing had happened.

The ring is now inset by half a puck on phones, which keeps every seat on
screen, and the pucks are narrower there so neighbours stop overlapping where
the ring flattens out at the top and bottom. The seat editor becomes a bottom
sheet that slides up over the table: grip, Done button, tap the same seat again
to dismiss, table still visible above it. Its controls grow to thumb size, and
every field goes to 16px — below that iOS zooms the page on focus and the
dealer has to pinch back out mid-hand.

Header actions become full-width tap targets, and the page padding tightens to
give the table the width it needs. Nothing above 700px changes.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -38,7 +38,11 @@
 
         <aside id="holdemSidebar">
             <section id="seatEditorPanel" class="sidebarPanel seatEditorPanel">
-                <h2 id="seatEditorTitle">Select a seat</h2>
+                <div class="seatSheetGrip" aria-hidden="true"></div>
+                <div class="seatEditorHeader">
+                    <h2 id="seatEditorTitle">Select a seat</h2>
+                    <button id="closeSeatEditorBtn" class="seatSheetClose" aria-label="Done editing this seat">Done</button>
+                </div>
                 <div id="seatEditorBody">
                     <p class="fieldHint">Click a seat at the table to edit their name, cards, chips and anything else.</p>
                 </div>