/* ============================================================
   TwelveSky2 Unleashed — ranking.css  (clean rebuild)
   ============================================================ */

.ranking-page { min-height: 100vh; display: flex; flex-direction: column; }

.rnk-bg {
  position: fixed; inset: 0;
  background-image: url('../assets/rankingpage.png');
  background-size: cover; background-position: center; z-index: 0;
}
.rnk-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.52) 28%, rgba(0,0,0,0.82) 100%);
}

/* ── Layout ─────────────────────────────────────────────── */
.rnk-wrap {
  position: relative; z-index: 2;
  max-width: 860px; margin: 0 auto; width: 100%;
  padding: 86px 20px 80px;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

/* ── Title ──────────────────────────────────────────────── */
.rnk-title-wrap {
  width: 100%; max-width: 760px;
  display: flex; justify-content: center;
  /* overlaps slightly into card for seamless look */
  margin-bottom: -1px;
  position: relative; z-index: 3;
}
.rnk-title-img {
  width: 100%; max-width: 700px;
  object-fit: contain; display: block;
  filter: drop-shadow(0 6px 32px rgba(0,0,0,0.95))
          drop-shadow(0 0 40px rgba(100,160,255,0.15));
}

/* ── Card ───────────────────────────────────────────────── */
.rnk-card {
  width: 100%;
  background: rgba(4,3,1,0.90);
  border: 1px solid rgba(201,162,39,0.20);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(201,162,39,0.05) inset,
    0 30px 80px rgba(0,0,0,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Table ──────────────────────────────────────────────── */
.rnk-table { width: 100%; border-collapse: collapse; }

.rnk-table thead tr {
  border-bottom: 1px solid rgba(201,162,39,0.14);
  background: rgba(201,162,39,0.04);
}

.rnk-table th {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(201,162,39,0.4); padding: 14px 22px;
  font-weight: 600;
}
.th-rank { width: 64px; text-align: center; }
.th-name { }
.th-clan { width: 160px; }
.th-cp   { width: 280px; text-align: right; }

/* ── Row ────────────────────────────────────────────────── */
.rnk-row {
  border-bottom: 1px solid rgba(255,255,255,0.035);
  transition: background 0.15s;
  animation: rowIn var(--delay, 0s) both;
  animation-name: rowIn;
  animation-duration: 0.35s;
  animation-delay: var(--delay, 0s);
  animation-fill-mode: both;
  animation-timing-function: ease;
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rnk-row:last-child { border-bottom: none; }
.rnk-row:hover { background: rgba(201,162,39,0.035); }

/* Subtle left border accent per clan */
.rnk-row--dragon { border-left: 2px solid rgba(255,110,0,0.40); }
.rnk-row--snake  { border-left: 2px solid rgba(60,180,60,0.40); }
.rnk-row--tiger  { border-left: 2px solid rgba(201,162,39,0.40); }
.rnk-row--unknown { border-left: 2px solid rgba(120,120,120,0.2); }

/* Top 3 very subtle row tint */
.rnk-row--top1 { background: rgba(255,215,0,0.025); }
.rnk-row--top2 { background: rgba(192,192,192,0.018); }
.rnk-row--top3 { background: rgba(205,133,63,0.018); }

.rnk-table td { padding: 13px 22px; vertical-align: middle; }

/* ── Rank number ────────────────────────────────────────── */
.td-rank { text-align: center; }

.rnk-num {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem; font-weight: 700;
  color: rgba(232,220,200,0.22);
  letter-spacing: 0.08em;
}
.rnk-num--1 {
  color: #c9a227;
  text-shadow: 0 0 14px rgba(201,162,39,0.5);
}
.rnk-num--2 { color: rgba(192,192,192,0.65); }
.rnk-num--3 { color: rgba(205,133,63,0.65); }

/* ── Warrior name ───────────────────────────────────────── */
.td-name { }

.rnk-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(232,220,200,0.70);
}
.rnk-name--1 {
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(201,162,39,0.25);
  font-weight: 700;
}
.rnk-name--2 { color: rgba(220,220,220,0.85); }
.rnk-name--3 { color: rgba(210,150,80,0.85); }

/* ── Clan ───────────────────────────────────────────────── */
.td-clan { }
.rnk-clan { display: flex; align-items: center; gap: 9px; }

.rnk-clan-icon {
  width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
  filter: brightness(0.85) drop-shadow(0 0 3px rgba(0,0,0,0.8));
  opacity: 0.9;
}

.rnk-clan-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.rnk-clan-label--dragon { color: rgba(255,110,0,0.75); }
.rnk-clan-label--snake  { color: rgba(60,190,60,0.75); }
.rnk-clan-label--tiger  { color: rgba(201,162,39,0.75); }
.rnk-clan-label--unknown { color: rgba(150,150,150,0.5); }

/* ── CP ─────────────────────────────────────────────────── */
.td-cp { text-align: right; }
.rnk-cp { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

.rnk-bar-track {
  width: 90px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.06); overflow: hidden; flex-shrink: 0;
}
.rnk-bar-fill {
  height: 100%; border-radius: 2px; transition: width 1s ease;
}
.rnk-bar-fill--dragon { background: linear-gradient(to right,rgba(180,60,0,0.6),rgba(255,110,0,0.9)); }
.rnk-bar-fill--snake  { background: linear-gradient(to right,rgba(20,120,20,0.6),rgba(60,190,60,0.9)); }
.rnk-bar-fill--tiger  { background: linear-gradient(to right,rgba(120,90,0,0.6),rgba(201,162,39,0.9)); }
.rnk-bar-fill--unknown { background: rgba(100,100,100,0.5); }

.rnk-cp-num {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem; font-weight: 700;
  min-width: 64px; text-align: right;
  color: rgba(232,220,200,0.55);
}
.rnk-cp-num--1 {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(201,162,39,0.35);
}
.rnk-cp-num--2 { color: rgba(200,200,200,0.75); }
.rnk-cp-num--3 { color: rgba(205,133,63,0.75); }

.rnk-empty {
  text-align: center; padding: 52px !important;
  font-family: 'IM Fell English', serif; font-style: italic;
  color: rgba(232,220,200,0.2); font-size: 0.9rem;
}

/* ── Pagination ─────────────────────────────────────────── */
.rnk-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 20px;
  border-top: 1px solid rgba(201,162,39,0.08);
  flex-wrap: wrap;
}
.rnk-pg {
  min-width: 32px; height: 32px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 600;
  color: rgba(232,220,200,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.15s; padding: 0 8px;
}
.rnk-pg:hover { border-color: rgba(201,162,39,0.35); color: var(--gold); }
.rnk-pg.active {
  background: rgba(201,162,39,0.12);
  border-color: rgba(201,162,39,0.45);
  color: var(--gold-light);
}
.rnk-dots { color: rgba(232,220,200,0.15); font-size: 0.7rem; padding: 0 2px; }
.rnk-pg-info {
  font-family: 'Cinzel', serif; font-size: 0.55rem;
  letter-spacing: 0.16em; color: rgba(201,162,39,0.25);
  margin-left: 8px; text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .rnk-wrap { padding: 86px 8px 60px; }
  .rnk-table th, .rnk-table td { padding: 11px 12px; }
  .th-clan, .td-clan { display: none; }
  .rnk-bar-track { width: 50px; }
  .rnk-cp-num { min-width: 48px; font-size: 0.75rem; }
}