More host UI refinements, intuitive UI enhancements during gameplay.

README.md

@@ -30,32 +30,17 @@ uvicorn main:app --reload --host 0.0.0.0 --port 8000
 
 Open `http://localhost:8000` in your browser.
 
-## Game Rules
+## How to Play
 
-See [server/RULES.md](server/RULES.md) for complete rules documentation.
+**6-Card Golf** is a card game where you try to get the **lowest score** across multiple rounds (holes).
 
-### Basic Scoring
+- Each player has 6 cards in a 2×3 grid (most start face-down)
+- On your turn: **draw** a card, then **swap** it with one of yours or **discard** it
+- **Column pairs** (same rank top & bottom) score **0 points** — very powerful!
+- When any player reveals all 6 cards, everyone else gets one final turn
+- Lowest total score after all rounds wins
 
-| Card | Points |
+**For detailed rules, card values, and house rule explanations, see the in-game Rules page or [server/RULES.md](server/RULES.md).**
-|------|--------|
-| Ace | 1 |
-| 2 | **-2** |
-| 3-10 | Face value |
-| Jack, Queen | 10 |
-| King | **0** |
-| Joker | -2 *(optional)* |
-
-**Column pairs** (same rank in a column) score **0 points**.
-
-### Turn Structure
-
-1. Draw from deck OR take from discard pile
-2. **If from deck:** Swap with a card OR discard and flip a face-down card
-3. **If from discard:** Must swap (cannot re-discard)
-
-### Ending
-
-When a player reveals all 6 cards, others get one final turn. Lowest score wins.
 
 ## AI Personalities
 
@@ -72,26 +57,14 @@ When a player reveals all 6 cards, others get one final turn. Lowest score wins.
 
 ## House Rules
 
-### Point Modifiers
+The game supports 15+ optional house rules including:
-- `super_kings` - Kings worth -2 (instead of 0)
-- `ten_penny` - 10s worth 1 (instead of 10)
-- `lucky_swing` - Single Joker worth -5
-- `eagle_eye` - Paired Jokers score -8
 
-### Bonuses & Penalties
+- **Flip Modes** - Standard, Speed Golf (must flip after discard), Suspense (optional flip near endgame)
-- `knock_bonus` - First to go out gets -5
+- **Point Modifiers** - Super Kings (-2), Ten Penny (10=1), Lucky Swing Joker (-5)
-- `underdog_bonus` - Lowest scorer gets -3
+- **Bonuses & Penalties** - Knock bonus/penalty, Underdog bonus, Tied Shame, Blackjack (21→0)
-- `knock_penalty` - +10 if you go out but aren't lowest
+- **Joker Variants** - Standard, Eagle Eye (paired Jokers = -8)
-- `tied_shame` - +5 penalty for tied scores
-- `blackjack` - Score of exactly 21 becomes 0
 
-### Gameplay Options
+See the in-game Rules page or [server/RULES.md](server/RULES.md) for complete explanations.
-- `flip_mode` - What happens when discarding from deck:
-  - `never` - Standard (no flip)
-  - `always` - Speed Golf (must flip after discard)
-  - `endgame` - Suspense (optional flip when any player has ≤1 face-down card)
-- `use_jokers` - Add Jokers to deck
-- `eagle_eye` - Paired Jokers score -8 instead of canceling
 
 ## Development
 

client/app.js

@@ -189,6 +189,7 @@ class GolfGame {
         this.leaveGameBtn = document.getElementById('leave-game-btn');
         this.activeRulesBar = document.getElementById('active-rules-bar');
         this.activeRulesList = document.getElementById('active-rules-list');
+        this.finalTurnBadge = document.getElementById('final-turn-badge');
     }
 
     bindEvents() {
@@ -1261,10 +1262,22 @@ class GolfGame {
         if (rules.length === 0) {
             // Show "Standard Rules" when no variants selected
             this.activeRulesList.innerHTML = '<span class="rule-tag standard">Standard</span>';
-        } else {
+        } else if (rules.length <= 2) {
+            // Show all rules if 2 or fewer
             this.activeRulesList.innerHTML = rules
                 .map(rule => `<span class="rule-tag">${rule}</span>`)
                 .join('');
+        } else {
+            // Show first 2 rules + "+N more" with tooltip
+            const displayed = rules.slice(0, 2);
+            const hidden = rules.slice(2);
+            const moreCount = hidden.length;
+            const tooltip = hidden.join(', ');
+
+            this.activeRulesList.innerHTML = displayed
+                .map(rule => `<span class="rule-tag">${rule}</span>`)
+                .join('') +
+                `<span class="rule-tag rule-more" title="${tooltip}">+${moreCount} more</span>`;
         }
         this.activeRulesBar.classList.remove('hidden');
     }
@@ -1351,20 +1364,24 @@ class GolfGame {
     updateStatusFromGameState() {
         if (!this.gameState) {
             this.setStatus('');
+            this.finalTurnBadge.classList.add('hidden');
             return;
         }
 
         const isFinalTurn = this.gameState.phase === 'final_turn';
         const currentPlayer = this.gameState.players.find(p => p.id === this.gameState.current_player_id);
 
+        // Show/hide final turn badge separately
+        if (isFinalTurn) {
+            this.finalTurnBadge.classList.remove('hidden');
+        } else {
+            this.finalTurnBadge.classList.add('hidden');
+        }
+
         if (currentPlayer && currentPlayer.id !== this.playerId) {
-            const prefix = isFinalTurn ? '⚡ Final turn: ' : '';
+            this.setStatus(`${currentPlayer.name}'s turn`);
-            this.setStatus(`${prefix}${currentPlayer.name}'s turn`);
         } else if (this.isMyTurn()) {
-            const message = isFinalTurn
+            this.setStatus('Your turn - draw a card', 'your-turn');
-                ? '⚡ Final turn! Draw a card'
-                : 'Your turn - draw a card';
-            this.setStatus(message, 'your-turn');
         } else {
             this.setStatus('');
         }
@@ -1467,6 +1484,14 @@ class GolfGame {
         this.currentRoundSpan.textContent = this.gameState.current_round;
         this.totalRoundsSpan.textContent = this.gameState.total_rounds;
 
+        // Show/hide final turn badge
+        const isFinalTurn = this.gameState.phase === 'final_turn';
+        if (isFinalTurn) {
+            this.finalTurnBadge.classList.remove('hidden');
+        } else {
+            this.finalTurnBadge.classList.add('hidden');
+        }
+
         // Update status message (handled by specific actions, but set default here)
         const currentPlayer = this.gameState.players.find(p => p.id === this.gameState.current_player_id);
         if (currentPlayer && currentPlayer.id !== this.playerId) {
@@ -1487,9 +1512,14 @@ class GolfGame {
             // Update player name in header (truncate if needed)
             const displayName = me.name.length > 12 ? me.name.substring(0, 11) + '…' : me.name;
             const checkmark = me.all_face_up ? ' ✓' : '';
-            const crownEmoji = isRoundWinner ? ' 👑' : '';
+            // Remove old crown if exists
-            // Set text content before the score span
+            const existingCrown = this.playerHeader.querySelector('.winner-crown');
-            this.playerHeader.childNodes[0].textContent = displayName + checkmark + crownEmoji;
+            if (existingCrown) existingCrown.remove();
+            // Set content - crown goes at the start
+            this.playerHeader.firstChild.textContent = displayName + checkmark;
+            if (isRoundWinner) {
+                this.playerHeader.insertAdjacentHTML('afterbegin', '<span class="winner-crown">👑</span>');
+            }
         }
 
         // Update discard pile (skip if holding a drawn card)
@@ -1554,10 +1584,10 @@ class GolfGame {
 
             const displayName = player.name.length > 12 ? player.name.substring(0, 11) + '…' : player.name;
             const showingScore = this.calculateShowingScore(player.cards);
-            const crownEmoji = isRoundWinner ? ' 👑' : '';
+            const crownHtml = isRoundWinner ? '<span class="winner-crown">👑</span>' : '';
 
             div.innerHTML = `
-                <h4>${displayName}${player.all_face_up ? ' ✓' : ''}${crownEmoji}<span class="opponent-showing">${showingScore}</span></h4>
+                <h4>${crownHtml}${displayName}${player.all_face_up ? ' ✓' : ''}<span class="opponent-showing">${showingScore}</span></h4>
                 <div class="card-grid">
                     ${player.cards.map(card => this.renderCard(card, false, false)).join('')}
                 </div>
@@ -1734,6 +1764,14 @@ class GolfGame {
     showScoreboard(scores, isFinal, rankings) {
         this.scoreTable.innerHTML = '';
 
+        // Clear the final turn badge and status message
+        this.finalTurnBadge.classList.add('hidden');
+        if (isFinal) {
+            this.setStatus('Game Over!');
+        } else {
+            this.setStatus('Hole complete');
+        }
+
         // Find round winner(s) - lowest round score (not total)
         const roundScores = scores.map(s => s.score);
         const minRoundScore = Math.min(...roundScores);

client/index.html

@@ -10,9 +10,8 @@
     <div id="app">
         <!-- Lobby Screen -->
         <div id="lobby-screen" class="screen active">
-            <h1>🏌️ Golf</h1>
+            <h1><span class="golfer-swing">🏌️</span><span class="kicked-ball">⚪</span> <span class="golf-title">Golf</span></h1>
-            <p class="subtitle">6-Card Golf Card Game</p>
+            <p class="subtitle">6-Card Golf Card Game <button id="rules-btn" class="btn btn-link">Rules</button></p>
-            <button id="rules-btn" class="btn btn-link">View Rules</button>
 
             <div class="form-group">
                 <label for="player-name">Your Name</label>
@@ -105,7 +104,7 @@
                                         <select id="flip-mode">
                                             <option value="never">Standard - No flip after discarding</option>
                                             <option value="always">Speed Golf - MUST flip a card after discarding</option>
-                                            <option value="endgame">Suspense - MAY flip if anyone has 1 or fewer hidden cards</option>
+                                            <option value="endgame">Endgame - Flip after discard if a player has 1 hidden card left</option>
                                         </select>
                                         <span class="rule-desc">What happens when you draw from deck and discard</span>
                                     </div>
@@ -219,6 +218,7 @@
                         </div>
                         <div class="header-col header-col-center">
                             <div id="status-message" class="status-message"></div>
+                            <div id="final-turn-badge" class="final-turn-badge hidden">⚡ FINAL TURN</div>
                         </div>
                         <div class="header-col header-col-right">
                             <button id="mute-btn" class="mute-btn" title="Toggle sound">🔊</button>
@@ -292,7 +292,6 @@
                 </div>
             </div>
         </div>
-    </div>
 
         <!-- Rules Screen -->
         <div id="rules-screen" class="screen">
@@ -399,8 +398,8 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
                     </div>
 
                     <div class="rules-mode">
-                        <h3>Suspense Mode (Optional Flip Near Endgame)</h3>
+                        <h3>Endgame Mode (Flip When Close to Finishing)</h3>
-                        <p class="mode-summary">Optional flip activates when any player is close to finishing.</p>
+                        <p class="mode-summary">Flip activates when any player has only 1 hidden card remaining.</p>
                         <p><strong>How it works:</strong></p>
                         <ul>
                             <li>Early in the round: Discarding ends your turn (like Standard mode)</li>
@@ -477,12 +476,12 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
                     </div>
 
                     <div class="faq-item">
-                        <h4>Q: In Suspense mode, when exactly can I flip?</h4>
+                        <h4>Q: In Endgame mode, when exactly can I flip?</h4>
                         <p>A: The optional flip activates the moment ANY player (including you) has 1 or fewer face-down cards remaining. From that point until the round ends, whenever you discard from the deck, you'll get the option to flip or skip.</p>
                     </div>
 
                     <div class="faq-item">
-                        <h4>Q: Why would I NOT flip in Suspense mode?</h4>
+                        <h4>Q: Why would I NOT flip in Endgame mode?</h4>
                         <p>A: Maybe you have a hidden card you hope is good, and you don't want to reveal a potential disaster. Or maybe you want to keep your opponents guessing about your score. It's a strategic choice!</p>
                     </div>
                 </section>

client/style.css

@@ -44,6 +44,115 @@ body {
     text-align: center;
 }
 
+/* Golf title - golf ball with dimples and shine */
+.golf-title {
+    font-size: 1.3em;
+    font-weight: 800;
+    letter-spacing: 0.02em;
+    /* Shiny gradient like a golf ball surface */
+    background:
+        /* Dimple pattern - diagonal grid */
+        radial-gradient(circle at 3px 3px, rgba(0,0,0,0.18) 2px, transparent 2px),
+        /* Shiny highlight gradient - whiter */
+        linear-gradient(
+            135deg,
+            #ffffff 0%,
+            #ffffff 25%,
+            #f5f5f2 50%,
+            #ffffff 75%,
+            #f0f0ed 100%
+        );
+    background-size: 10px 10px, 100% 100%;
+    background-position: 0 0, 0 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow:
+        2px 2px 4px rgba(0, 0, 0, 0.2),
+        -1px -1px 0 rgba(255, 255, 255, 0.4);
+    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.15));
+}
+
+/* Golfer swing animation */
+.golfer-swing {
+    display: inline-block;
+    transform: scaleX(-1);
+    animation: golf-swing 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes golf-swing {
+    0% {
+        transform: scaleX(-1) translateX(0) rotate(0deg);
+    }
+    /* Wind up - pull back leg */
+    30% {
+        transform: scaleX(-1) translateX(-8px) rotate(-15deg);
+    }
+    /* Hold briefly */
+    40% {
+        transform: scaleX(-1) translateX(-8px) rotate(-15deg);
+    }
+    /* KICK! */
+    55% {
+        transform: scaleX(-1) translateX(8px) rotate(20deg);
+    }
+    /* Follow through */
+    80% {
+        transform: scaleX(-1) translateX(4px) rotate(12deg);
+    }
+    /* Final pose - freeze */
+    100% {
+        transform: scaleX(-1) translateX(3px) rotate(10deg);
+    }
+}
+
+/* Kicked golf ball - parabolic trajectory */
+.kicked-ball {
+    display: inline-block;
+    font-size: 0.2em;
+    position: relative;
+    opacity: 0;
+    animation: ball-kicked 0.7s linear forwards;
+    animation-delay: 0.72s;
+}
+
+/* Trajectory: y = 0.0124x² - 1.42x (parabola with peak at x=57) */
+@keyframes ball-kicked {
+    0% {
+        transform: translate(-12px, 8px) scale(1);
+        opacity: 1;
+    }
+    15% {
+        transform: translate(8px, -16px) scale(1);
+        opacity: 1;
+    }
+    30% {
+        transform: translate(28px, -31px) scale(1);
+        opacity: 1;
+    }
+    45% {
+        transform: translate(48px, -38px) scale(0.95);
+        opacity: 1;
+    }
+    55% {
+        transform: translate(63px, -38px) scale(0.9);
+        opacity: 1;
+    }
+    70% {
+        transform: translate(83px, -27px) scale(0.85);
+        opacity: 0.9;
+    }
+    85% {
+        transform: translate(103px, -6px) scale(0.75);
+        opacity: 0.6;
+    }
+    100% {
+        transform: translate(118px, 25px) scale(0.65);
+        opacity: 0;
+    }
+}
+
 #lobby-screen .form-group {
     text-align: left;
 }
@@ -510,6 +619,9 @@ input::placeholder {
 
 .header-col-center {
     justify-content: center;
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .header-col-right {
@@ -563,7 +675,7 @@ input::placeholder {
 .active-rules-bar .rules-list {
     display: flex;
     gap: 5px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 .active-rules-bar .rule-tag {
@@ -580,6 +692,18 @@ input::placeholder {
     color: rgba(255, 255, 255, 0.7);
 }
 
+.active-rules-bar .rule-tag.rule-more {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+    cursor: help;
+    border: 1px dashed rgba(255, 255, 255, 0.3);
+}
+
+.active-rules-bar .rule-tag.rule-more:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.9);
+}
+
 /* Card Styles */
 .card {
     width: clamp(65px, 5.5vw, 100px);
@@ -661,6 +785,16 @@ input::placeholder {
     box-shadow: 0 0 0 3px #f4a460;
 }
 
+/* Disable hover effects when not player's turn */
+.not-my-turn .card {
+    cursor: default;
+}
+
+.not-my-turn .card:hover {
+    transform: none;
+    box-shadow: none;
+}
+
 .card.selected,
 .card.clickable.selected {
     box-shadow: 0 0 0 4px #fff, 0 0 12px 4px #f4a460;
@@ -1060,9 +1194,13 @@ input::placeholder {
 /* Round winner highlight */
 .opponent-area.round-winner h4,
 .player-area.round-winner h4 {
-    background: rgba(200, 255, 50, 0.6);
+    background: rgba(180, 255, 80, 0.85);
-    box-shadow: 0 0 8px rgba(200, 255, 50, 0.5);
+    color: #1a1a1a;
-    color: #0a2a10;
+}
+
+.winner-crown {
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+    margin-right: 3px;
 }
 
 /* Status message in header */
@@ -1081,6 +1219,31 @@ input::placeholder {
     color: #1a472a;
 }
 
+/* Final turn badge - separate indicator */
+.final-turn-badge {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    color: #fff;
+    padding: 6px 14px;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+.final-turn-badge.hidden {
+    display: none;
+}
+
+@keyframes pulse-subtle {
+    0%, 100% {
+        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
+    }
+    50% {
+        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
+    }
+}
+
 @keyframes toastIn {
     from { opacity: 0; }
     to { opacity: 1; }
@@ -1670,6 +1833,16 @@ input::placeholder {
     transform: scale(1.02);
 }
 
+/* Disable hover effects when not player's turn */
+.not-my-turn .real-card {
+    cursor: default;
+}
+
+.not-my-turn .real-card:hover {
+    transform: none;
+}
+}
+
 .real-card.selected {
     box-shadow: 0 0 0 4px #fff, 0 0 15px 5px #f4a460;
     transform: scale(1.06);
@@ -2159,14 +2332,26 @@ input::placeholder {
 #rules-screen {
     max-width: 800px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 10px 20px;
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#rules-screen.active {
+    display: block;
+}
+
+#rules-screen h1 {
+    margin-top: 0;
 }
 
 .rules-container {
     background: rgba(0, 0, 0, 0.3);
     border-radius: 12px;
-    padding: 25px 35px;
+    padding: 20px 35px;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 0;
 }
 
 .rules-container h1 {

server/RULES.md

@@ -272,13 +272,13 @@ The `flip_mode` setting controls what happens when you draw from the deck and ch
 |-------|------|----------|
 | `never` | **Standard** | No flip when discarding - your turn ends immediately. This is the classic rule. |
 | `always` | **Speed Golf** | Must flip one face-down card when discarding. Accelerates the game by revealing more information each turn. |
-| `endgame` | **Suspense** | May *optionally* flip if any player has ≤1 face-down card. Creates tension near the end of rounds. |
+| `endgame` | **Endgame** | Flip after discard if any player has 1 hidden card remaining. |
 
 **Standard (never):** When you draw from the deck and choose not to use the card, simply discard it and your turn ends.
 
 **Speed Golf (always):** When you discard from the deck, you must also flip one of your face-down cards. This accelerates the game by revealing more information each turn, leading to faster rounds.
 
-**Suspense (endgame):** When any player has only 1 (or 0) face-down cards remaining, discarding from the deck gives you the *option* to flip a card. This creates tension near the end of rounds - do you reveal more to improve your position, or keep your cards hidden?
+**Endgame:** When any player has only 1 (or 0) face-down cards remaining, discarding from the deck triggers a flip. This accelerates the endgame by revealing more information as rounds approach their conclusion.
 
 | Implementation | File |
 |----------------|------|

server/game.py

@@ -1066,7 +1066,7 @@ class Game:
             if self.options.flip_mode == FlipMode.ALWAYS.value:
                 active_rules.append("Speed Golf")
             elif self.options.flip_mode == FlipMode.ENDGAME.value:
-                active_rules.append("Suspense")
+                active_rules.append("Endgame Flip")
             if self.options.knock_penalty:
                 active_rules.append("Knock Penalty")
             if self.options.use_jokers and not self.options.lucky_swing and not self.options.eagle_eye: