/* ================= RANKED LIST ================= */

.ranked-list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
  margin-bottom: 8px;
}

.ranked-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  position: relative;
}

.ranked-item:last-child { border-bottom: none; }
.ranked-item:hover { background: #f8f9fb; }
.ranked-item:active { background: #eef1f4; }

.ranked-number {
  width: 28px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: #8a94a6;
  text-align: center;
}

.ranked-item:nth-child(1) .ranked-number { color: #f5a623; }
.ranked-item:nth-child(2) .ranked-number { color: #9aa5b1; }
.ranked-item:nth-child(3) .ranked-number { color: #cd7f32; }

.ranked-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef1f4;
}

.ranked-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ranked-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranked-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6c757d;
}

.ranked-category { white-space: nowrap; }

.ranked-category::after {
  content: "•";
  margin-left: 8px;
  color: #cbd2d9;
}

.ranked-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #24cd77;
  flex-shrink: 0;
}

.ranked-stat svg {
  width: 13px;
  height: 13px;
  fill: #24cd77;
}

.ranked-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 8px;
  background: #24cd77;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}

.ranked-btn:hover { background: #1db954; }

/* Shimmer */
.ranked-list.loading .ranked-item { pointer-events: none; }

.ranked-item.loading .ranked-number,
.ranked-item.loading .ranked-icon,
.ranked-item.loading .ranked-name,
.ranked-item.loading .ranked-category,
.ranked-item.loading .ranked-stat {
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f5f9 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  color: transparent;
  border-radius: 6px;
}

.ranked-item.loading .ranked-number { width: 20px; height: 14px; }
.ranked-item.loading .ranked-name { height: 14px; width: 70%; }
.ranked-item.loading .ranked-category { height: 12px; width: 90px; }
.ranked-item.loading .ranked-stat { height: 14px; width: 55px; }
.ranked-item.loading .ranked-btn { display: none; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Mobile */
@media (max-width: 768px) {
  .ranked-item { padding: 10px 12px; gap: 10px; }
  .ranked-number { width: 22px; font-size: 14px; }
  .ranked-icon { width: 42px; height: 42px; border-radius: 10px; }
  .ranked-name { font-size: 13px; }
  .ranked-meta { font-size: 11px; }
  .ranked-btn { padding: 5px 10px; font-size: 11px; }
  .ranked-stat { font-size: 11px; }
}