test 1

gameboard.css

@@ -1,17 +1,68 @@
-    .header {
-      /* layout header */
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 6px 10px;
-      width: 100%;
-      box-sizing: border-box;
+body {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(135deg, #8a2be2 0%, #cc2b89 50%, #ff8a3d 100%);
+  background-attachment: fixed;
+  background-size: cover;
+  font-family: "Poppins", sans-serif;
+}
 
-      /* glass style */
-      background: rgba(255, 255, 255, 0.25);
-      backdrop-filter: blur(14px);
-      border-top: 2px solid rgba(255, 255, 255, 0.4);
-      border-bottom: 2px solid rgba(255, 255, 255, 0.4);
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  width: 100%;
+  
 
-      /* nested element styling */
-    }
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(14px);
+  
+  border-top: 2px solid rgba(255, 255, 255, 0.4);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
+
+  box-sizing: border-box;
+}
+
+
+.back-btn {
+  background: none;
+  border: none;
+  font-size: 26px;
+  cursor: pointer;
+  color: #1a1a1a;
+  padding-left: 6px;
+}
+
+
+.right-info {
+  display: flex;
+  gap: 10px;
+}
+
+
+.pill {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  padding: 4px 10px;
+  border-radius: 20px;
+
+  background: rgba(173, 216, 255, 0.45); 
+  backdrop-filter: blur(10px);
+
+  border: 1.8px solid rgba(255, 255, 255, 0.8);
+  
+  font-size: 16px;
+  color: #002a60;
+
+  box-shadow: 
+     0 2px 4px rgba(0,0,0,0.15),
+     inset 0 0 4px rgba(255,255,255,0.5);
+}
+
+
+.icon {
+  font-size: 18px;
+}