/* ==========================================================================
   BREAD & BROADSWORD — REALM RANKING & ALLIANCE STANDINGS STYLES
   50 Players / Alliances Per Page with Jump-to-Player & Distinct Highlight
   ========================================================================== */

.ranking-window {
  width: 1240px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--parchment-base, #eee3c8);
  color: var(--parchment-text, #2a1b10);
  border: 2px solid #845e2a;
}

.ranking-main-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.ranking-window-body {
  padding: 16px 20px 22px 20px;
  background: #e6d6b8 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" opacity="0.03"><rect width="80" height="80" fill="%23000"/></svg>');
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   TOP COMMAND & TAB BAR
   ========================================================================== */
.rank-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #28170c 0%, #160c06 100%);
  border: 2px solid #967038;
  border-radius: 5px;
  padding: 10px 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 220, 150, 0.2);
  gap: 14px;
  flex-wrap: wrap;
}

/* Mode Switcher Tabs: Players vs Alliances */
.rank-tabs-group {
  display: flex;
  gap: 8px;
}

.rank-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid #6b4c24;
  color: #dfcbab;
  font-family: inherit;
  font-size: var(--fs-md, 14px);
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.4px;
}

.rank-tab-btn:hover {
  background: rgba(184, 134, 45, 0.25);
  border-color: #d4a753;
  color: #ffffff;
}

.rank-tab-btn.active {
  background: linear-gradient(180deg, #8c2216 0%, #541109 100%);
  border-color: #ffd700;
  color: #fff5d6;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  text-shadow: 0 1px 2px #000;
}

.rank-tab-count {
  font-size: var(--fs-xs, 11.5px);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 7px;
  border-radius: 3px;
  color: #ffdca1;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Player Standing Summary & Jump Button */
.rank-player-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rank-standing-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #8a6530;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: var(--fs-base, 13px);
  color: #e6d5be;
}

.rank-standing-pill strong {
  color: #ffd700;
  font-size: var(--fs-md, 14px);
}

.btn-jump-my-rank {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #b87c18 0%, #784d08 100%);
  border: 1.5px solid #ffd700;
  color: #fff9e6;
  font-family: inherit;
  font-size: var(--fs-base, 13px);
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  transition: all 0.15s ease;
}

.btn-jump-my-rank:hover {
  background: linear-gradient(180deg, #d49222 0%, #94600b 100%);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
  transform: translateY(-1px);
}

/* ==========================================================================
   PAGINATION BAR (TOP & BOTTOM)
   ========================================================================== */
.rank-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5ebd6;
  border: 1.5px solid #b89b6f;
  border-radius: 4px;
  padding: 8px 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.rank-page-info {
  font-size: var(--fs-base, 13px);
  font-weight: 700;
  color: #4a3018;
}

.rank-page-info strong {
  color: #1f1105;
  font-weight: 900;
}

.rank-page-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rank-page-btn {
  background: #fbf5e8;
  border: 1.5px solid #a88756;
  color: #3b2311;
  font-family: inherit;
  font-size: var(--fs-sm, 12.5px);
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.rank-page-btn:hover:not(:disabled) {
  background: #ecd9b8;
  border-color: #785221;
}

.rank-page-btn.active {
  background: linear-gradient(180deg, #3b2210 0%, #211106 100%);
  border-color: #d4a753;
  color: #ffd984;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.rank-page-btn.has-player {
  border-color: #b87c18;
  position: relative;
}

.rank-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   RANKING LEDGER TABLE (50 ROWS PER PAGE)
   ========================================================================== */
.rank-table-container {
  background: #fdf8ed;
  border: 2px solid #967038;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.rank-table thead tr {
  background: linear-gradient(180deg, #2b180c 0%, #190d06 100%);
  color: #ffd88a;
  border-bottom: 2px solid #967038;
}

.rank-table th {
  padding: 10px 14px;
  font-size: var(--fs-sm, 12.5px);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rank-table td {
  padding: 8px 14px;
  font-size: var(--fs-base, 13px);
  color: #2b1a0e;
  border-bottom: 1px solid #e2d3b9;
  vertical-align: middle;
}

.rank-table tbody tr:nth-child(even) {
  background: #f7efe0;
}

.rank-table tbody tr:hover {
  background: #efe0c4;
}

/* Top 3 Podium Styling */
.rank-num-cell {
  font-weight: 900;
  width: 90px;
  font-size: var(--fs-md, 14px);
  color: #4a321a;
}

.rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 900;
  font-size: var(--fs-base, 13px);
}

.rank-medal.gold {
  background: linear-gradient(180deg, #ffe680 0%, #d49b1a 100%);
  border: 1px solid #9c6c08;
  color: #2b1800;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.rank-medal.silver {
  background: linear-gradient(180deg, #f0f4f8 0%, #b8c4d0 100%);
  border: 1px solid #7a8896;
  color: #1c252e;
}

.rank-medal.bronze {
  background: linear-gradient(180deg, #f2c299 0%, #b86f38 100%);
  border: 1px solid #80461b;
  color: #2b1204;
}

/* DISTINCT PLAYER ROW HIGHLIGHT (RANK #68 LORD ALDRIC / PLAYER'S ALLIANCE) */
.rank-table tbody tr.is-current-player {
  background: linear-gradient(90deg, #fff3cc 0%, #fae3a0 50%, #fff3cc 100%) !important;
  border-top: 2px solid #c98818;
  border-bottom: 2px solid #c98818;
  box-shadow: inset 0 0 12px rgba(212, 149, 44, 0.25);
}

.rank-table tbody tr.is-current-player td {
  color: #1c0f04;
  font-weight: 800;
  border-bottom-color: #c98818;
}

@keyframes pulsePlayerRow {
  0%   { box-shadow: inset 0 0 0px rgba(255, 190, 0, 0), 0 0 0px rgba(255, 190, 0, 0); }
  40%  { box-shadow: inset 0 0 24px rgba(212, 130, 15, 0.65), 0 0 14px rgba(212, 130, 15, 0.55); }
  100% { box-shadow: inset 0 0 12px rgba(212, 149, 44, 0.25), 0 0 0px rgba(255, 190, 0, 0); }
}

.rank-table tbody tr.is-current-player.pulse-focus {
  animation: pulsePlayerRow 1.4s ease-out;
}

/* Player Name & Badges */
.rank-player-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-player-name {
  font-weight: 700;
  color: #241408;
  font-size: var(--fs-md, 14px);
}

.rank-you-badge {
  background: linear-gradient(180deg, #992415 0%, #631107 100%);
  border: 1px solid #ffd700;
  color: #fff6db;
  font-size: var(--fs-xs, 11px);
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Alliance Tag Pill */
.rank-alliance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #efe3cc;
  border: 1px solid #bfa478;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: var(--fs-sm, 12.5px);
  font-weight: 700;
  color: #3d2612;
}

.rank-alliance-tag {
  font-weight: 900;
  color: #7d4812;
}

.rank-no-alliance {
  color: #8c7862;
  font-style: italic;
  font-size: var(--fs-sm, 12px);
}

/* Points & Level Columns */
.rank-points-cell {
  font-weight: 800;
  color: #1f1207;
  font-size: var(--fs-md, 14px);
}

.rank-level-cell {
  text-align: center;
}

.rank-level-plain {
  font-size: var(--fs-md, 14px);
  font-weight: 800;
  color: #3b200c;
  display: inline-block;
  min-width: 28px;
  text-align: center;
}

.is-current-player .rank-level-plain {
  color: #3b200c;
  font-weight: 900;
}

.rank-page-current {
  color: #7b5932;
  font-weight: 700;
  margin-left: 4px;
}

.rank-level-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-md, 14px);
  font-weight: 800;
  color: #3b200c;
}

.is-current-player .rank-level-badge {
  color: #3b200c;
  font-weight: 900;
}