/* ===== Rankings page ===== */

:root {
  --rk-bg: #0f0f0f;
  --rk-panel: #121212;
  --rk-border: #2a2a2a;
  --rk-border-soft: #222;
  --rk-text: #ffffff;
  --rk-muted: rgba(255,255,255,.72);
}

html, body {
  background: var(--rk-bg);
  color: var(--rk-text);
}

/* si le layout a un conteneur .page comme tes autres pages */
.page {
  color: var(--rk-text);
}

/* Titres / sous-texte */
.header .title,
.header .sub,
.block h2 {
  color: var(--rk-text);
}

.muted {
  color: var(--rk-muted) !important;
}

/* Contrôles */
.controls label {
  color: var(--rk-muted);
}

.controls select {
  color: var(--rk-text);
  background: #0f0f0f;
  border: 1px solid #333;
}

/* Panel / block */
.block {
  color: var(--rk-text);
}

/* Table */
table.rank {
  color: var(--rk-text);
}

table.rank th {
  color: var(--rk-muted);
}

table.rank td {
  color: var(--rk-text);
  border-bottom: 1px solid var(--rk-border-soft);
}

.rownum {
  color: var(--rk-muted);
}

.pill {
  color: var(--rk-muted);
  border: 1px solid #333;
}

/* Liens (si tu ajoutes des liens vers page joueur plus tard) */
a {
  color: var(--rk-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  opacity: .9;
}

/* Bonus : lignes plus lisibles au survol */
table.rank tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

    .block { margin: 18px 0; padding: 14px;   }
    .block h2 { margin: 0 0 12px 0; font-size: 18px; }
    .controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom: 10px; }
    .controls label { font-size: 1.2rem; opacity: .9; }
    .controls select { padding: 6px 8px; border-radius: 8px; border: 1px solid #333; background:#0f0f0f; color:#fff; }
    table.rank { width:100%; border-collapse: collapse; }
    table.rank th, table.rank td { padding: 8px 10px; border-bottom: 1px solid #222; font-size: 14px; }
    table.rank th { text-align:left; opacity:.85; font-weight:600; }
    .muted { opacity:.7; }
    .pill { padding: 3px 8px; border:1px solid #333; border-radius: 999px; font-size: 12px; }
    .rownum { width: 46px; opacity:.7; }
    .num { text-align:right; font-variant-numeric: tabular-nums; }

/* Rankings page — make tables look like year page */
.rankings-page{
  position: relative;
}

/* TOC line */
.rk-toc{
  text-align: center;
}
.rk-toc-link{
  color: inherit;
  text-decoration: none;
  padding: 0 2px;
}
.rk-toc-link:hover{
  text-decoration: underline;
}

/* blocks spacing */
.rk-block{
  margin-top: 18px;
}

/* controls like year */
.rk-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content: center;
  margin: 10px 0 12px;
}

/* bigger selects */
.rankings-page select{
  font-size: 1.15rem;
  padding: 8px 10px;
  border-radius: 10px;
}

/* table wrapper width similar to year */
.rk-table-center{
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

/* ensure “table” style feels like player/year */
.rk-table{
  width: 100%;
}

/* row number alignment */
.rk-table .rownum{
  width: 48px;
  opacity: .7;
}

/* hover like year */
.rk-table tbody tr:hover td{
  background: rgba(255,255,255,.06);
}

/* player cell layout with avatar */
.rk-player-link,
.rk-player-nolink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none !important;
  white-space: nowrap;
}

.rk-player-link:hover{
  text-decoration: underline !important;
}

.rk-avatar{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  flex: 0 0 auto;
  background-color:white;
}

.rk-player-name{
  line-height: 1;
    overflow: hidden;
  text-overflow: ellipsis;
text-shadow: 0 0 6px rgba(67,180,206,.8), 0 0 14px rgba(67,180,206,.55);
}

/* keep numeric columns clean */
.rk-table .num{
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* optional: smooth scroll even without JS */
html{
  scroll-behavior: smooth;
}

.winrate-row{
  font-variant-numeric: tabular-nums;
}

table.rank{
  table-layout: fixed;
  width: 100%;
}

.rk-toc{
color:white;
margin-top:3%;
}

h1{
text-align:center;
}

.extra_info{
  white-space: normal;
  font-weight:100;
  text-align:center;
}

/* Sticky controls per block */
.rk-block{
  position: relative;
  overflow: visible; /* important: sticky can break if parent is overflow:hidden */
}

.rk-sticky-head{
  position: sticky;
  top: 0;                 /* ajuste si tu as une navbar fixe */
  z-index: 50;
  background: rgba(15,15,15,.92); /* match ton bg neon */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 12px;
  margin: 0 auto 12px;
  border-radius: 14px;
width: fit-content;
  /* petit liseré pour séparer du contenu quand ça colle */
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
      outline: solid;
      outline-color: rebeccapurple;
}

/* Quand ça colle, évite que le H2 soit collé au select */
.rk-sticky-head h2{
  margin: 0 0 8px 0;
}

/* Pour que les ancres (#blk-...) ne soient pas cachées derrière le sticky */
.rk-block{
  scroll-margin-top: 90px;
}

h2{
text-align:center;
}

.rk-more{
  display:flex;
  justify-content:center;
  margin: 12px 0 4px;
}
.rk-more-btn{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.55);
  text-decoration:none;
}
.rk-more-btn:hover{ filter: brightness(1.1); }

/* ============================
   Rankings – Value column (gold static)
   ============================ */

body.theme-neon .rk-table td.value-col{
  font-family: "NeoNeon", "Tilt Neon", sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;

  color: #ffd36a;

  /* même signature que HOF gold-static */
  text-shadow:
    0 0 4px rgba(255, 240, 200, .9),
    0 0 10px rgba(255, 200, 80, .7),
    0 0 22px rgba(255, 170, 0, .55);

  animation: none !important; /* sécurité */
}

/* ============================
   Rankings – loading + empty state
   ============================ */

.table-clip{
  position: relative; /* pour l’overlay */
}

/* Overlay */
.rk-loading-overlay{
  position: absolute;
  inset: 0;
  display: none;                 /* activé via .is-loading */
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 5;
}

.table-clip.is-loading .rk-loading-overlay{
  display: flex;
}

.rk-spinner{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.20);
  border-top-color: rgba(255,255,255,.85);
  animation: rkspin .85s linear infinite;
  box-shadow: 0 0 10px rgba(67,180,206,.25);
}

@keyframes rkspin{
  to { transform: rotate(360deg); }
}

.rk-loading-text{
  font-size: 1.5rem;
  text-align:center;
     color: rgb(255 0 217);
    text-shadow: none;
}

/* Empty / no data message (dans le block, sous la table) */
.rk-empty{
  display: none; /* activé via JS */
  margin: 10px auto 0;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.45);
  color: rgba(255,255,255,.82);
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.rk-empty-in-table{

}

.rk-empty-row td{
  padding: 18px 14px;
}

.rk-empty-in-table{
  margin: 0 auto;
  width: fit-content;
  text-align: center;
  padding: 12px 14px;
  background: rgba(10,10,14,.35);
  color: rgb(255 0 217);
  text-shadow: none;
}

/* Smaller / secondary text for teamtour perfs */
.rk-ttperf-sub{
  font-size: 0.85em;
  opacity: 0.75;
  line-height: 1.2;
}

/* Tournament name (main line) */
.rk-ttperf-tname{
  font-weight: 500;
  line-height: 1.25;
}

/* Team name under tournament */
.rk-ttperf-team{
  margin-top: 2px;
}

/* Keep tiers compact */
.rk-ttperf-tiers{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rk-ttperf-tournament{
    font-size:1.4rem;
}

/* Tier icons in teamtour perf table */
.rk-ttperf-tiers{
  display: flex;
  align-items: center;
  gap: 6px;
}

.tier-icon{
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
}

.tier-text-fallback{
  font-size: 0.8em;
  opacity: 0.7;
}

/* Tournament glow (robust) */
.rk-ttperf-glow{
  /* default if not set */
  --tcolor: rgba(255,255,255,0.0);

  /* keep it readable */
  text-shadow:
    0 0 6px rgba(0,0,0,0.35),
    0 0 10px var(--tcolor),
    0 0 18px var(--tcolor);
}

.rk-ttperf-glow .rk-ttperf-link{
  color: inherit;
  text-decoration: none;
  /* IMPORTANT: keep glow on the text (some themes override link shadows) */
  text-shadow: inherit;
}

.rk-ttperf-glow .rk-ttperf-link:hover{
  text-decoration: underline;
  text-shadow:
    0 0 6px rgba(0,0,0,0.35),
    0 0 14px var(--tcolor),
    0 0 26px var(--tcolor);
}