Additional animation work and AI strategy enhancements and logging for performance analytics.

client/style.css

@@ -285,6 +285,23 @@ input::placeholder {
     color: #1a472a;
 }
 
+/* Pulsing glow for Next Hole button */
+#next-round-btn:not(.hidden) {
+    animation: glow-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes glow-pulse {
+    0%, 100% {
+        box-shadow: 0 0 5px rgba(244, 164, 96, 0.4),
+                    0 0 10px rgba(244, 164, 96, 0.2);
+    }
+    50% {
+        box-shadow: 0 0 15px rgba(244, 164, 96, 0.8),
+                    0 0 30px rgba(244, 164, 96, 0.4),
+                    0 0 45px rgba(244, 164, 96, 0.2);
+    }
+}
+
 .btn-secondary {
     background: #fff;
     color: #1a472a;
@@ -314,6 +331,14 @@ input::placeholder {
     box-shadow: none;
 }
 
+/* Waiting state for non-host next hole button */
+#next-round-btn.waiting {
+    animation: none;
+    background: rgba(244, 164, 96, 0.4);
+    color: rgba(255, 255, 255, 0.8);
+    box-shadow: none;
+}
+
 .divider {
     text-align: center;
     margin: 30px 0;
@@ -462,9 +487,9 @@ input::placeholder {
 
 /* Game Screen */
 .game-header {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
     align-items: center;
-    justify-content: space-between;
     padding: 10px 20px;
     background: rgba(0,0,0,0.35);
     font-size: 0.9rem;
@@ -473,29 +498,30 @@ input::placeholder {
     box-sizing: border-box;
 }
 
+.header-col {
+    display: flex;
+    align-items: center;
+}
+
+.header-col-left {
+    justify-content: flex-start;
+    gap: 12px;
+}
+
+.header-col-center {
+    justify-content: center;
+}
+
+.header-col-right {
+    justify-content: flex-end;
+    gap: 8px;
+}
+
 .game-header .round-info {
     font-weight: 600;
     white-space: nowrap;
 }
 
-.game-header-center {
-    display: flex;
-    align-items: center;
-    gap: 40px;
-}
-
-.game-header .turn-info {
-    font-weight: 600;
-    color: #f4a460;
-    white-space: nowrap;
-}
-
-.game-header .header-buttons {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
 #leave-game-btn {
     padding: 6px 12px;
     font-size: 0.8rem;
@@ -521,7 +547,6 @@ input::placeholder {
 .active-rules-bar {
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 6px;
     font-size: 0.85rem;
 }
@@ -550,6 +575,11 @@ input::placeholder {
     font-weight: 600;
 }
 
+.active-rules-bar .rule-tag.standard {
+    background: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.7);
+}
+
 /* Card Styles */
 .card {
     width: clamp(65px, 5.5vw, 100px);
@@ -1027,15 +1057,15 @@ input::placeholder {
     box-shadow: 0 0 0 2px #f4a460;
 }
 
-/* Toast Notification */
-/* Header status area */
-.header-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 200px;
+/* Round winner highlight */
+.opponent-area.round-winner h4,
+.player-area.round-winner h4 {
+    background: rgba(200, 255, 50, 0.7);
+    box-shadow: 0 0 15px rgba(200, 255, 50, 0.9), 0 0 30px rgba(200, 255, 50, 0.5);
+    color: #0a2a10;
 }
 
+/* Status message in header */
 .status-message {
     padding: 6px 16px;
     border-radius: 4px;