:root {
    --gold: #f5c842;
    --gold-light: #ffe27a;
    --gold-dark: #b8860b;
    --silver: #c0c8d8;
    --bronze: #cd7f32;
    --blue-accent: #4a9eff;
    --text-light: #f0e8d0;
    --text-dim: #ffffff;
    --bg-panel: rgba(10, 18, 40, 0.72);
  }
 
.background006 {
  width: 100%;
  height: 100vh;
  background-image: url('../images/ranking/backgroundpvp.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 60px;
  margin-top: -120px;
}

 
  /* ?? SECTION ?? */
  .ranking-section {
    position: relative;
    width: 1340px;
    min-height: 820px;
    overflow: hidden;
    border-radius: 8px;
  }
 
  /* background */
  .bg-layer {
    position: absolute; inset: 0;
    background: url('../images/ranking/backgroundpvp.png') center/cover no-repeat;
  }
  .bg-overlay {
    position: absolute; inset: 0;
  }
 
  /* ?? CHARACTER ?? */
  .character {
    position: absolute;
    bottom: 0; left: 120px;
    height: 92%;
    z-index: 10;
    filter: drop-shadow(0 0 28px rgba(173, 187, 204, 0));
    pointer-events: none;
    animation: charFloat 4s ease-in-out infinite;
  }
  @keyframes charFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
 
  /* player hud */
  .player-hud {
    position: absolute;
    top: 38%; left: 16px;
    transform: translateY(-50%);
    z-index: 11;
    background: rgba(8,18,45,0.82);
    border: 1px solid rgba(74,158,255,0.4);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 140px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 20px rgba(74,158,255,0.15);
  }
  .hud-name {
    display: flex; align-items: center; gap: 6px;
    color: #fff; font-size: 13px; font-weight: 700;
    margin-bottom: 8px;
  }
  .hud-name .dot { width:8px; height:8px; border-radius:50%; background:#4a9eff; }
  .hud-name .badge {
    font-size:9px; background:rgba(74,158,255,0.25);
    border:1px solid #4a9eff; color:#4a9eff;
    padding:1px 5px; border-radius:3px;
  }
  .hud-row {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-light); font-size: 11px;
    font-family: sans-serif;
    margin-bottom: 5px;
  }
  .hud-row .icon { font-size: 13px; width:16px; text-align:center; }
 
  /* ?? CONTENT WRAPPER ?? */
  .content {
    position: relative; z-index: 5;
    display: flex; flex-direction: column;
    align-items: center;
    padding: 70px 24px 28px;
  }
 
  /* ?? SCROLL BANNER ?? */
  .banner-wrap {
    position: relative;
    width: 520px; height: 120px;
    margin-bottom: 20px;
    display: flex; align-items: flex-start; justify-content: center;
    animation: fadeDown 0.6s ease both;
  }
  .banner-wrap img.scroll {
    width: 100%; height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5));
  }
  .banner-title {
    position: absolute;
    top: 50px; left: 50%; transform: translateX(-50%);
    color: #4a3010;
    font-family: 'Cinzel Decorative', serif;
    font-size: 30px; font-weight: 900;
    letter-spacing: 2px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  }
 
  /* ?? TABS ?? */
  .tabs {
    display: flex; gap: 4px;
    margin-bottom: 26px;
    animation: fadeDown 0.7s ease both;
  }
  .tab {
    padding: 6px 22px;
    border-radius: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
    cursor: pointer; border: none;
    transition: all 0.2s;
  }
  .tab.active {
    background: linear-gradient(135deg, #4a9eff, #2060cc);
    color: #fff;
    box-shadow: 0 2px 12px rgba(74,158,255,0.45);
  }
  .tab:not(.active) {
    background: rgba(255,255,255,0.12);
    color: #b0c4e0;
    border: 1px solid rgba(255,255,255,0.15);
  }
  .tab:hover:not(.active) { background: rgba(255,255,255,0.2); }
 
  /* ?? TOP 3 PODIUM ?? */
  .podium {
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    gap: 50px; margin-bottom: 5px;
    animation: fadeUp 0.7s ease both 0.1s;
    max-width: 1200px;
    min-width: 1200px;
    left: 33px;
  }
 
  .podium-card {
    position: relative;
    width: 200px;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer;
    transition: transform 0.25s;
  }
  .podium-card:hover { transform: translateY(-6px); }
 
  /* banner flag bg */
  .card-banner {
    position: relative;
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
    width: 300px;
  }
  .card-banner img.flag {
    width: 100%; height: auto;
    object-fit: contain;
    display: block;
  }
 
  /* rank number on top of banner ? overlaid via absolute */
  .card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 63px;

  }
 
  .card-rank-label {
    font-size: 24px; font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
  .rank-1 .card-rank-label { color: #b0c8f8; }
  .rank-2 .card-rank-label { color: var(--gold-light); }
  .rank-3 .card-rank-label { color: #e0aa7a; }
 
  .card-crown { font-size: 20px; margin-bottom: 4px; }
 
  .card-name {
    font-size: 26px; font-weight: 700;
    color: #fff; text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    margin-bottom: 2px;
  }
  .card-level {
    font-family: sans-serif;
    font-size: 16px; color: #fff8eb;
    margin-bottom: 14px;
    text-shadow: 0 2px 4px rgba(255, 180, 19, 0.9);
  }
 
  .card-stat-label {
    font-family: sans-serif;
    font-size: 12px; color: #fff8eb;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(255, 180, 19, 0.9);
  }
  .card-stat-bar-wrap {
    width: 120px; height: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 2px; overflow: hidden;
    margin-bottom: 2px;
  }
  .card-stat-bar {
    height: 100%; border-radius: 2px;
    transition: width 1s ease;
  }
  .rank-1 .card-stat-bar { background: linear-gradient(90deg,#60a0ff,#a0c8ff); }
  .rank-2 .card-stat-bar { background: linear-gradient(90deg,var(--gold-dark),var(--gold-light)); }
  .rank-3 .card-stat-bar { background: linear-gradient(90deg,#a06030,var(--bronze)); }
 
  .card-stat-val {
    font-family: sans-serif; font-size: 9px;
    color: rgba(255,255,255,0.55); margin-bottom: 8px;
  }
 
  .card-elo-label {
    font-family: sans-serif; font-size: 9px;
    color: var(--text-dim); letter-spacing: 0.3px;
    margin-bottom: 1px;
  }
  .card-elo {
    font-size: 26px; font-weight: 900;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  }
  .rank-1 .card-elo { color: #b0d0ff; }
  .rank-2 .card-elo { color: var(--gold-light); }
  .rank-3 .card-elo { color: #e0aa7a; }
 
  /* middle card (rank 2 / gold) is taller */
  .rank-2 .card-banner img.flag { transform: scale(1.08); transform-origin: top center; }
  .rank-2 { margin-bottom: 12px; }
 
  /* ?? LIST TABLE ?? */
  .rank-table {
    width: 660px;
    background: rgba(220, 210, 185, 0.82);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    animation: fadeUp 0.8s ease both 0.2s;
    margin-bottom: 16px;
  }
  .rank-row {
    display: grid;
    grid-template-columns: 48px 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(160,140,100,0.25);
    transition: background 0.15s;
  }
  .rank-row:last-child { border-bottom: none; }
  .rank-row:hover { background: rgba(255,255,255,0.18); }
 
  .rank-row .pos {
    font-size: 14px; font-weight: 700;
    color: #6a5020;
    display: flex; align-items: center; gap: 4px;
  }
  .pos img.flag-icon {
    position: relative;
    left: -23px;
    width: 30px; height: auto;
    z-index: -1;
    object-fit: contain;
  }
  .rank-row .pos .star { font-size: 10px; color: var(--gold-dark); }
  .rank-row .cell {
    font-family: sans-serif; font-size: 12px;
    color: #4a3a18; text-align: center;
  }
  .rank-row .cell.empty { color: #a09060; letter-spacing: 2px; }
 
  /* ?? PAGINATION ?? */
  .pagination {
    display: flex; gap: 6px; align-items: center;
    animation: fadeUp 0.9s ease both 0.3s;
  }
  .page-btn {
    width: 28px; height: 28px;
    border-radius: 4px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; border: none;
    font-family: 'Cinzel', serif;
    transition: all 0.2s;
  }
  .page-btn.active {
    background: linear-gradient(135deg,#5a4a2a,#3a2a0a);
    color: var(--gold-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .page-btn:not(.active) {
    background: rgba(80,65,40,0.5);
    color: #c0a060;
    border: 1px solid rgba(180,150,80,0.3);
  }
  .page-btn:hover:not(.active) { background: rgba(80,65,40,0.8); }
 
  /* ?? BRASÃO top right ?? */
  .brasao-badge {
    position: absolute;
    top: 16px; right: 24px;
    z-index: 10;
    width: 72px; height: auto;
    filter: drop-shadow(0 0 14px rgba(200,160,0,0.5));
    animation: pulseGlow 3s ease-in-out infinite;
  }
  @keyframes pulseGlow {
    0%,100% { filter: drop-shadow(0 0 14px rgba(200,160,0,0.5)); }
    50%      { filter: drop-shadow(0 0 24px rgba(200,160,0,0.85)); }
  }
 
  /* ?? SPARKLES ?? */
  .sparkles {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden; z-index: 2;
  }
  .spark {
    position: absolute;
    width: 3px; height: 3px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle var(--dur) ease-in-out var(--del) infinite;
  }
  @keyframes sparkle {
    0%   { opacity:0; transform:scale(0.5); }
    50%  { opacity:0.85; transform:scale(1.4); }
    100% { opacity:0; transform:scale(0.5); }
  }
 
  @keyframes fadeDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
  }