/* solo-ranking.css — cross-round ranking panel embedded in the SOLO overlay.
 * Only used when the overlay runs with ?brain=go&ranking=1 (the Go single-brain
 * carries solo_ranking + ranking_config). All selectors are namespaced under
 * .solo-ranking / .srk-* so nothing leaks onto the timer card. Goes BEYOND Rust
 * (whose solo overlay had no ranking).
 *
 * Loaded after solo.css, so the .root override below wins: stack the ranking
 * BELOW the card. With the card alone (ranking hidden) a 1-child column renders
 * identically to the original row — no visual change when the panel is off. */
.root {
  flex-direction: column;
}

.solo-ranking {
  --accent-rgb: 3, 220, 235;
  width: 660px;
  max-width: 100%;
  margin: 12px 0 0 0;
  font-family: 'Montserrat', 'Noto Sans Thai', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.solo-ranking-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--accent-rgb));
  text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.45);
  margin: 0 4px 8px;
}

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

.srk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}

/* The active idol (cast slot 1) — highlighted wherever it ranks. */
.srk-idol {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.75), 0 4px 18px rgba(var(--accent-rgb), 0.35);
}

/* Eliminated casts sink to the bottom, greyed with an OUT badge. */
.srk-out {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.srk-rank {
  width: 26px;
  flex: 0 0 26px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  color: rgb(var(--accent-rgb));
}
.srk-top1 .srk-rank { color: #ffd700; }
.srk-top2 .srk-rank { color: #e8e8e8; }
.srk-top3 .srk-rank { color: #cd7f32; }

.srk-av {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
}
.srk-av-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

.srk-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srk-score {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 16px;
  color: rgb(var(--accent-rgb));
}

.srk-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: #b91c1c;
  color: #fff;
}