fix: 30 UX improvements — make backgammon fully playable

Game Controller (backgammon-game.js) rewrite:
- Fix selection: click same piece to deselect, click another to swap
- Bar enforcement: must enter from bar first with clear message
- Auto-pass when no moves remain for unused dice
- Bot waiting status message visible during thinking
- Opening roll shows clear "your turn" status with dice values
- Pass button action for truly stuck positions
- Smart move validation with proper die tracking
- Individual bot move logging
- Source validation: only select pieces that have moves

UI (backgammon-ui.js) rewrite:
- setSelected directly applies DOM classes (no render cycle needed)
- Status text system: guides player ("Select piece", "Choose target")
- Movable checkers highlighted with golden ring when it's your turn
- Dice remaining indicator text below dice
- Pass/skip button shown when stuck
- Active player gold border highlight
- Tap feedback animation
- Hover preview on valid targets
- New game button in result overlay
- Valid target points show dashed circle indicator

CSS additions:
- .bg-point--clickable with gold ring on top checker
- .bg-point--hover-preview green tint
- .bg-move-flash animation
- .bg-status, .bg-pass-btn, .bg-dice-remaining styles
- .bg-new-game-btn in overlay
- Valid point dashed circle indicator
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/backgammon.css

@@ -162,6 +162,17 @@
 .bg-point--valid {
     background: var(--bg-valid);
     border-radius: 4px;
+    cursor: pointer;
+}
+
+.bg-point--valid::after {
+    content: '';
+    position: absolute;
+    inset: 20%;
+    border: 2px dashed rgba(76,175,80,0.7);
+    border-radius: 50%;
+    z-index: 5;
+    pointer-events: none;
 }
 
 .bg-point--selected {
@@ -169,11 +180,90 @@
     border-radius: 4px;
 }
 
+.bg-point--clickable {
+    cursor: pointer;
+}
+
+.bg-point--clickable .bg-checker:last-child {
+    box-shadow: 0 0 0 2px rgba(255,200,50,0.4), 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.bg-point--hover-preview {
+    background: rgba(76,175,80,0.3);
+}
+
 .bg-point--hit {
     background: var(--bg-hit);
     border-radius: 4px;
 }
 
+.bg-move-flash {
+    animation: bg-move-flash-anim 0.4s ease;
+}
+
+@keyframes bg-move-flash-anim {
+    0% { background: rgba(255,255,255,0.3); }
+    100% { background: transparent; }
+}
+
+.bg-tap-flash {
+    animation: bg-tap-flash-anim 0.2s ease;
+}
+
+@keyframes bg-tap-flash-anim {
+    0% { transform: scale(0.95); }
+    100% { transform: scale(1); }
+}
+
+/* Status text */
+.bg-status {
+    text-align: center;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-1, #fff);
+    min-height: 24px;
+}
+
+/* Pass button */
+.bg-pass-btn {
+    padding: 10px 20px;
+    background: rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 8px;
+    color: var(--text-2, #ccc);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.bg-pass-btn:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+/* Dice remaining text */
+.bg-dice-remaining {
+    font-size: 12px;
+    color: var(--text-3, #888);
+    text-align: center;
+    padding: 4px 0;
+}
+
+/* New game button in overlay */
+.bg-new-game-btn {
+    margin-top: 16px;
+    padding: 12px 24px;
+    background: linear-gradient(135deg, #e7a832, #d4922a);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 0 3px 10px rgba(231,168,50,0.4);
+}
+
 /* Point number labels (optional, shown on hover or always) */
 .bg-point-label {
     position: absolute;