/* ranking.html — site-wide ArenaElite leaderboard, Discord-login users only. */

.ranking-main {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 36px 16px 48px;
}

#rankingContent {
  width: 100%;
  max-width: 720px;
}

.ranking-explain {
  text-align: center;
  margin-bottom: 20px;
}

.my-log-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.my-log-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.my-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.my-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--card-border);
}

.my-log-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.my-log-delta {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--accent);
  min-width: 30px;
}

.my-log-reason {
  flex: 1;
  color: var(--text);
  overflow-wrap: anywhere;
}

.my-log-time {
  flex-shrink: 0;
  color: var(--muted);
  white-space: nowrap;
}

.my-progress-card {
  align-items: center;
  gap: 18px;
  background: var(--card-bg);
  border: 2px solid var(--frame-color, var(--accent));
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px var(--frame-glow, transparent);
}

/* Same pulsing halo as a Champion row in the list (.ranking-row--champion
   above), for when the viewer's own progress card is the one at tier 1. */
.my-progress-card--champion {
  position: relative;
}

.my-progress-card--champion::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 22px 5px var(--frame-glow, transparent);
  pointer-events: none;
  animation: ranking-champion-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .my-progress-card--champion::after { animation: none; opacity: 0.75; }
}

.my-progress-badge {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.my-progress-info {
  flex: 1;
  min-width: 0;
}

.my-progress-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.my-progress-points {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.my-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--card-border);
  overflow: hidden;
  margin-bottom: 6px;
}

.my-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.my-progress-remaining {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.badge-guild-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
}

.badge-guild-legends {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

/* หนิกเสือ — same blue as ICONYX's badge elsewhere in the app. */
.badge-guild-nik-suea {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
}

/* เสือหนิก — a redder orange than the owner's amber-gold badge
   (.badge-first-pick, #fbbf24/#f5a623) so they read as clearly different. */
.badge-guild-suea-nik {
  background: linear-gradient(135deg, #ea580c, #f97316);
}

/* Site-wide Discord admin role — distinct from any guild badge so it never
   gets mistaken for "last guild touched" (see js/ranking.js's roleBadge). */
.badge-admin-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
  background: linear-gradient(135deg, #9333ea, #f97316);
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--frame-color, var(--card-border));
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: var(--shadow);
}

.ranking-row--owner {
  border-color: #f5a623;
  box-shadow: 0 0 0 1px #f5a623, 0 8px 24px rgba(245, 166, 35, 0.18);
}

/* Viewer's own row gets an extra ring + glow on top of the plain tier
   border every row now has (js/ranking.js's TIER_FRAME/frameStyle), so it
   still stands out from everyone else's same-colored tier frame. */
.ranking-row--mine {
  box-shadow: 0 0 0 1px var(--frame-color, var(--accent)), 0 8px 20px var(--frame-glow, transparent);
}

/* Champion (tier 1) — stays gold like Gold (tier 7) rather than a different
   hue (gold "reads as more premium"), so the standout treatment here is a
   soft pulsing halo instead: a ::after glow layer, kept separate from the
   row's actual border/box-shadow so it never fights with .ranking-row--mine
   above when someone's own row happens to be Champion too. inset:-3px sits
   just outside the row's edges rather than over its content. */
.ranking-row--champion::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 18px 4px var(--frame-glow, transparent);
  pointer-events: none;
  animation: ranking-champion-pulse 2.4s ease-in-out infinite;
}

/* Owner gets the same pulsing halo, own amber tone — hardcoded rather than
   var(--frame-glow) since js/ranking.js's renderRow deliberately never sets
   that variable on the owner's row (their border is already the fixed
   amber above, not a TIER_FRAME color). */
.ranking-row--owner::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 18px 4px rgba(245, 166, 35, 0.45);
  pointer-events: none;
  animation: ranking-champion-pulse 2.4s ease-in-out infinite;
}

@keyframes ranking-champion-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-row--champion::after,
  .ranking-row--owner::after {
    animation: none;
    opacity: 0.75;
  }
}

/* Whoever picked a collection favorite (see js/ranking.js's renderRow and
   js/mascot.js's selectCharacter) gets it floating beside their row — visible to everyone,
   not just themselves. Needs real margin space outside the 720px-wide
   content column, so it's wide-screen only. Capped at 76px: it's centered
   on its own ~62px-tall row card, so it can overhang by up to half the 10px
   list gap on each side (~7px) before touching the next row's card — 62 +
   2×7 ≈ 76px is the largest that stays clear even when every row in a long
   list has a pick set right next to another.  */
.ranking-row-side-char {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 16px;
  width: 76px;
  height: 76px;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 900px) {
  .ranking-row-side-char { display: none; }
}

/* Separates the top-N rows from the viewer's own pinned row when it falls
   outside that cut (see js/ranking.js's RANKING_TOP_N). */
.ranking-divider {
  text-align: center;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
  padding: 2px 0;
}

.ranking-place {
  flex: 0 0 34px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}

.ranking-badge {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.ranking-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ranking-tier {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-page);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 2px 10px;
}

.ranking-points {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}

/* Rank-movement indicator — see js/ranking.js's rankDeltaHtml. Muted colors
   on purpose (not a bold red/green scoreboard pop): it's a quiet "since you
   last checked" nudge, not a competitive stat to flex. Renders nothing at
   all (js/ranking.js returns "") when there's no prior visit to compare
   against, so the column just isn't there rather than showing a placeholder. */
.ranking-rank-delta {
  flex-shrink: 0;
  width: 14px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.ranking-rank-delta--up {
  color: #4ade80;
}

.ranking-rank-delta--down {
  color: #fb7185;
}

.ranking-rank-delta--same {
  color: var(--muted);
  opacity: 0.6;
}

/* The rank mascot (bottom-right floating picker) and its popover/collection
   grid now live site-wide in css/mascot.css + js/mascot.js, not here. */