/* Updated ranking.css - top5 centered, tabs, responsive */

.ranking-controls { display:flex; margin: auto;align-items: center;justify-content: center; gap:8px; margin-bottom:18px; }
.tab-btn { background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted); padding:8px 12px; border-radius:8px; cursor:pointer; }
.tab-btn.active { border-color:var(--accent-2); color:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,0.5); }

.top5-wrapper { display:flex; gap:18px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.top5-card {
  width:180px; min-height:140px; border-radius:12px; padding:12px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  position:relative; transition: transform .12s ease;
}
.top5-card:hover { transform: translateY(-6px); }
.top5-pos { position:absolute; top:8px; right:10px; font-weight:900; color:var(--accent-2); }
.top5-avatar { width:72px; height:72px; border-radius:50%; background:linear-gradient(180deg,#000,#111); margin-bottom:10px; display:flex; align-items:center; justify-content:center; }
.top5-name { font-weight:800; font-family:Orbitron; color:var(--accent); margin-bottom:8px; text-align:center; }
.top5-points { background:rgba(0,0,0,0.6); padding:6px 10px; border-radius:8px; font-weight:900; color:#fff; }

.ranking-list-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:12px; }
.ranking-table { width:100%; border-collapse:collapse; margin-top:6px; }
.ranking-table th, .ranking-table td { padding:12px 10px; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--muted); }
.ranking-table tbody tr:hover { background: linear-gradient(90deg, rgba(0,234,255,0.02), rgba(255,213,100,0.02)); transform: none; }

.ranking-pos-small { width:48px; font-weight:800; font-family:Orbitron; color:var(--accent-2); }

/* Year Top10 area spacing placeholder */
#year-top10 { margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Responsive */
@media(max-width:980px){
  .top5-wrapper { gap:12px; }
  .top5-card { width:140px; min-height:120px; }
}
@media(max-width:560px){
  .top5-wrapper { flex-direction:column; align-items:center; }
  .ranking-list-controls { flex-direction:column; align-items:flex-start; gap:8px; }
}


/* Cleaned and organized css for Ranking widget and page
   - Ensures widget displays top5 compactly using .ranking-row styles
   - Styles top5 cards when used on full page
   - Responsive and consistent spacing
*/

/* Base panel */
.ranking-widget.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  padding: 14px;
  border-radius: 12px;
  box-shadow: var(--shadow-weak);
}

/* Header */
.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.ranking-header .section-title { margin: 0; font-size: 1.15rem; }
#ranking-widget-month { font-size: 0.85rem; color: var(--muted); display:block; margin-top:4px; }

/* Compact list used in widget */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

/* Each row shows position, username+points, and medal */
.ranking-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.01);
  transition: transform .12s ease, background .12s ease;
}
.ranking-row:hover { transform: translateY(-3px); background: rgba(255,255,255,0.02); }

/* position bubble */
.ranking-pos {
  min-width: 38px;
  height: 38px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-family: Orbitron, sans-serif;
  color: var(--accent-2);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.5);
}

/* user info block: name and points aligned right */
.ranking-user {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ranking-name { font-weight:700; color: var(--accent); }
.ranking-points {
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
  border-radius: 8px;
  font-weight:900;
  color: #fff;
  min-width: 70px;
  text-align: center;
}

/* medal small area */
.ranking-medal { width: 36px; text-align:center; font-size:1.1rem; }

/* Footer timestamp */
.ranking-footer { margin-top: 8px; font-size:0.9rem; color: var(--muted); }

/* Full-page Top5 cards (centered) */
.top5-wrapper {
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:flex-end;
  flex-wrap:wrap;
  margin: 18px 0;
}
.top5-card {
  width:170px;
  min-height:140px;
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04));
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  position:relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.top5-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.7); }
.top5-pos { position:absolute; top:8px; right:10px; font-weight:900; color:var(--accent-2); }
.top5-avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; margin-bottom:10px; box-shadow: inset 0 -4px 12px rgba(0,0,0,0.4); }
.top5-name { font-weight:800; font-family:Orbitron; color:var(--accent); margin-bottom:8px; text-align:center; }
.top5-points { background: rgba(0,0,0,0.6); padding:6px 10px; border-radius:8px; font-weight:900; color:#fff; }

/* table layout */
.ranking-table {
  width:50%;
  margin: auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-collapse:collapse;
  margin-top: 12px;
}
.ranking-table th, .ranking-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--muted);
}
.ranking-table tbody tr:hover { background: rgba(0,234,255,0.02); transform:none; }

/* controls */
.ranking-list-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }

/* small helpers */
.ranking-pos-small { width:48px; font-weight:800; font-family:Orbitron; color:var(--accent-2); }

/* responsive */
@media (max-width: 900px) {
  .top5-wrapper { gap:12px; }
  .top5-card { width:140px; min-height:120px; }
  .ranking-row { padding:8px; gap:8px; }
  .ranking-pos { min-width:34px; height:34px; }
}
@media (max-width: 560px) {
  .top5-wrapper { flex-direction:column; align-items:center; }
  .ranking-list { gap:8px; }
  .ranking-list-controls { flex-direction:column; align-items:flex-start; }
}