fix: improve rank badge and crown positioning to avoid overlaps

src/views/LiveView.vue

@@ -350,33 +350,50 @@ watch(
 /* Rank / Crown */
 .rank { 
   position: absolute; 
-  top: 8px; 
-  right: 12px; 
+  top: 10px; 
+  left: 10px; 
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-weight: 900; 
-  font-size: 20px; 
-  color: rgba(15,23,42,.35); 
+  font-size: 16px; 
+  color: #ffffff; 
+  background: rgba(15,23,42,.75);
+  border-radius: 8px;
   letter-spacing: .04em;
-  z-index: 1;
+  z-index: 2;
+  box-shadow: 0 2px 4px rgba(0,0,0,.1);
 }
 .rank.bh-badge { 
-  font-size: 12px; 
-  background: rgba(15,23,42,.06); 
-  padding: 2px 6px; 
+  font-size: 11px; 
+  background: rgba(15,23,42,.08); 
+  padding: 4px 8px; 
   border-radius: 6px; 
   color: #4b5563; 
-  top: 10px;
-  right: 10px;
+  width: auto;
+  height: auto;
+  font-weight: 700;
+  box-shadow: none;
 }
 .crown { 
   position: absolute; 
-  top: 8px; 
-  right: 40px; 
-  font-size: 18px; 
-  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
+  top: 10px; 
+  right: 10px; 
+  font-size: 22px; 
+  filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
+  z-index: 2;
 }
 
 /* Head */
-.head { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; }
+.head { 
+  display: grid; 
+  grid-template-columns: 40px minmax(0,1fr); 
+  align-items: center; 
+  gap: 10px; 
+  margin-top: 32px;
+}
 .logo { width: 40px; height: 40px; border-radius: 10px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; border: 1px solid #E7ECF3; }
 .logo img { width: 100%; height: 100%; object-fit: contain; }
 .logo__fallback { width: 60%; height: 60%; border-radius: 6px; background: #e5e7eb; }