.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%), var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background: rgba(255,255,255,.03);
}

.alert{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}

label{
  display:block;
  margin:10px 0 6px;
  color:var(--muted);
  font-size:.95rem;
}

input, textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color:var(--text);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(110,168,254,.55);
  box-shadow: 0 0 0 3px rgba(110,168,254,.16);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}

.btn-primary{
  background: var(--primary-2);
  border-color: rgba(110,168,254,.45);
}

/* Container Principal */
.ranking-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.ranking-header {
    text-align: center;
    margin-bottom: 40px;
}

.ranking-header h1 { color: #fff; font-size: 2.2rem; }
.ranking-header p { color: #8a94a6; }

/* Estilo do Pódio */
.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 50px;
    padding-top: 40px;
}

.podium-item {
    background: #151921;
    border: 1px solid #232a37;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    width: 180px;
    transition: transform 0.3s;
}

.podium-item:hover { transform: translateY(-5px); }

/* Destaques Individuais do Pódio */
.position-1 { width: 220px; height: 260px; border-color: #f1c40f; box-shadow: 0 0 20px rgba(241, 196, 15, 0.1); } /* Ouro */
.position-2 { height: 220px; } /* Prata */
.position-3 { height: 200px; } /* Bronze */

.avatar-wrapper { position: relative; margin-bottom: 15px; }
.podium-avatar { 
    width: 80px; height: 80px; background: #232a37; border-radius: 50%; 
    margin: 0 auto; line-height: 80px; font-size: 2rem; 
}
.position-1 .podium-avatar { border: 3px solid #f1c40f; width: 100px; height: 100px; line-height: 100px; }

.badge {
    position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    background: #3498db; color: #fff; padding: 2px 12px; border-radius: 10px; font-weight: bold;
}
.position-1 .badge { background: #f1c40f; color: #000; }

.podium-info strong { display: block; color: #fff; margin-top: 10px; font-size: 1.1rem; }
.podium-info span { color: #f1c40f; font-weight: bold; }

/* Tabela Geral */
.ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.ranking-table tr { background: #151921; }
.ranking-table th { padding: 15px; color: #8a94a6; text-transform: uppercase; font-size: 0.8rem; }
.ranking-table td { padding: 15px; color: #fff; border-top: 1px solid #232a37; border-bottom: 1px solid #232a37; }

.pos-number { font-weight: bold; color: #8a94a6; width: 80px; text-align: center; }
.player-name { display: flex; align-items: center; gap: 10px; }
.mini-avatar { width: 32px; height: 32px; background: #232a37; border-radius: 50%; text-align: center; line-height: 32px; }
.points-cell { color: #f1c40f !important; font-weight: bold; }
.text-right { text-align: right; }

@media (max-width: 600px) {
    .podium { flex-direction: column; align-items: center; }
    .podium-item { width: 100% !important; height: auto !important; }
}