mejoras de UI

client/src/views/Leaderboard.vue

@@ -3,18 +3,17 @@
     <div class="header glass light">
       <div class="header-left">
         <button class="btn-back" @click="goHome" title="Volver al inicio">
-          ← Inicio
+          ← <span class="label">Inicio</span>
         </button>
-        <h1>📈 Leaderboard</h1>
+        <h1><span class="emoji">📈</span> Leaderboard</h1>
       </div>
       <div class="actions">
         <button class="btn-collapse" @click="filtersCollapsed = !filtersCollapsed" :title="filtersCollapsed ? 'Mostrar filtros' : 'Ocultar filtros'">
           <span class="collapse-icon" :class="{ rotated: filtersCollapsed }">▼</span>
           <span class="collapse-text">{{ filtersCollapsed ? 'Mostrar filtros' : 'Ocultar filtros' }}</span>
         </button>
-        <button class="btn" @click="refreshAll" :disabled="loading">{{ loading ? 'Actualizando…' : 'Actualizar' }}</button>
         <button class="btn" @click="downloadJSON" :disabled="loading" title="Descargar datos actuales como JSON">
-          📊 JSON
+          📊 <span class="label">JSON</span>
         </button>
       </div>
     </div>
@@ -924,15 +923,15 @@ function downloadJSON() {
 /* Light theme aligned with other pages (UUID selector, lobby, game) */
 .leaderboard.light { min-height: 100vh; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#0f172a; display:flex; flex-direction:column; }
 
-.glass.light { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(229, 231, 235, 0.9); box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: 16px; }
+.glass.light { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(229, 231, 235, 0.95); box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.75); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: 16px; }
 
-.header { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; margin-bottom: 14px; }
-.header h1 { margin: 0; }
-.header-left { display:flex; align-items:center; gap: 16px; }
-.btn-back { background:#667eea; color:#fff; border:none; border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; transition: all 0.3s ease; font-size: 14px; }
+.header { display:flex; align-items:center; justify-content:space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; }
+.header h1 { margin: 0; font-size: 18px; line-height: 1.2; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.header-left { display:flex; align-items:center; gap: 10px; flex: 1 1 auto; min-width: 200px; }
+.btn-back { background:#667eea; color:#fff; border:none; border-radius:6px; padding:6px 10px; font-weight:600; cursor:pointer; transition: all 0.3s ease; font-size: 12px; }
 .btn-back:hover { background:#5b6bda; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); }
-.actions { display:flex; gap: 8px; }
-.actions .btn { background:#667eea; color:#fff; border:none; border-radius:10px; padding:8px 12px; font-weight:800; cursor:pointer; }
+.actions { display:flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 1 280px; }
+.actions .btn { background:#667eea; color:#fff; border:none; border-radius:6px; padding:4px 8px; font-weight:800; font-size: 11px; cursor:pointer; }
 .actions .btn.toggle { background:#eef2ff; color:#3949ab; border:1px solid #c7d2fe; }
 .actions .btn.toggle.active { background:#3949ab; color:#fff; border-color:#2e3f9a; }
 
@@ -1078,18 +1077,18 @@ function downloadJSON() {
   transition: all 0.3s ease;
 }
 
-.btn-collapse {
+.btn-collapse { 
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 12px;
+  padding: 5px 8px;
   border: none;
-  border-radius: 10px;
+  border-radius: 6px;
   background: #eef2ff;
   color: #3949ab;
   border: 1px solid #c7d2fe;
   font-weight: 800;
-  font-size: 13px;
+  font-size: 11px;
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -1101,10 +1100,7 @@ function downloadJSON() {
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 }
 
-.collapse-icon {
-  transition: transform 0.3s ease;
-  font-size: 12px;
-}
+.collapse-icon { transition: transform 0.3s ease; font-size: 11px; }
 
 .collapse-icon.rotated {
   transform: rotate(-90deg);
@@ -1138,6 +1134,11 @@ function downloadJSON() {
 }
 
 @media (max-width: 768px) {
+  .header { padding: 6px 8px; margin-bottom: 8px; }
+  .header h1 { font-size: 16px; }
+  .btn-back { padding: 5px 8px; font-size: 11px; border-radius: 6px; }
+  .actions { gap: 6px; }
+  .actions .btn { padding: 4px 6px; font-size: 10px; border-radius: 5px; }
   .search-controls {
     flex-direction: column;
     align-items: stretch;
@@ -1155,18 +1156,35 @@ function downloadJSON() {
 }
 
 @media (max-width: 640px) {
+  .header { gap: 6px; }
+  .header-left { min-width: 140px; }
+  .actions { justify-content: flex-start; }
   .btn-collapse .collapse-text {
     display: none;
   }
   
   .btn-collapse {
-    padding: 8px;
-    min-width: 40px;
+    padding: 4px 6px;
+    min-width: 34px;
     justify-content: center;
+    font-size: 10px;
+    border-radius: 5px;
   }
 }
 
 @media (max-width: 480px) {
+  .header h1 { font-size: 14px; }
+  .btn-back { padding: 4px 6px; font-size: 10px; }
+  .actions { gap: 4px; }
+  .actions .btn { padding: 3px 5px; font-size: 9px; border-radius: 4px; }
+  .btn-collapse { padding: 3px 5px; min-width: 30px; font-size: 9px; border-radius: 4px; }
+  /* Ultra-compact: single-line header on very small screens */
+  .header { flex-wrap: nowrap; padding: 4px 6px; }
+  .header-left { flex: 0 1 auto; }
+  .btn-back .label { display: none; }
+  .actions .btn .label { display: none; }
+  .header h1 { font-size: 13px; }
+  .header h1 .emoji { display: none; }
   .player-chips {
     gap: 8px;
   }