/* Explain: Styles for team evolution levels: Bronze, Silver, Gold, and Diamond (Fire) with unique visual effects. */
/* Identidade visual dos níveis de evolução das equipes da Liga PDB:
   Bronze (Iniciante), Prata (Profissional), Ouro (Elite) e Fogo (Lendário).
   Aplicada em selos, barras de progresso, cartões de nível e no ranking público. */

/* ---------- Selos de nível ---------- */
.evo-badge.is-bronze,
.rank-level.is-bronze {
    border-color: #CD7F32;
    color: #E8B27A;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.30), rgba(120, 72, 30, 0.14));
    box-shadow: 0 0 16px rgba(205, 127, 50, 0.35), inset 0 1px 0 rgba(255, 225, 190, 0.30);
}

.evo-badge.is-prata,
.rank-level.is-prata {
    border-color: #C9D2DA;
    color: #F3F7FB;
    background: linear-gradient(135deg, rgba(201, 210, 218, 0.32), rgba(150, 160, 170, 0.14));
    box-shadow: 0 0 16px rgba(201, 210, 218, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.evo-badge.is-ouro,
.rank-level.is-ouro {
    border-color: #FFB020;
    color: #FFD77A;
    background: linear-gradient(135deg, rgba(255, 176, 32, 0.32), rgba(160, 110, 10, 0.14));
    box-shadow: 0 0 18px rgba(255, 176, 32, 0.42), inset 0 1px 0 rgba(255, 240, 200, 0.50);
}

.evo-badge.is-diamante,
.rank-level.is-diamante {
    border-color: #FF7A00;
    color: #FFE08A;
    background: linear-gradient(135deg, rgba(255, 59, 0, 0.36), rgba(255, 138, 0, 0.30), rgba(255, 210, 74, 0.26));
    box-shadow: 0 0 20px rgba(255, 90, 0, 0.55), inset 0 1px 0 rgba(255, 240, 200, 0.45);
    animation: pdbFireGlow 2.4s ease-in-out infinite;
}

@keyframes pdbFireGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 90, 0, 0.45), inset 0 1px 0 rgba(255, 240, 200, 0.40); }
    50% { box-shadow: 0 0 32px rgba(255, 50, 0, 0.85), inset 0 1px 0 rgba(255, 240, 200, 0.60); }
}

/* ---------- Barras de progresso ---------- */
.evo-progress-bar.is-bronze,
.rank-progress-bar.is-bronze {
    background: linear-gradient(90deg, #8C4A18, #CD7F32, #E8B27A);
}

.evo-progress-bar.is-prata,
.rank-progress-bar.is-prata {
    background: linear-gradient(90deg, #8A9299, #C9D2DA, #F3F7FB);
}

.evo-progress-bar.is-ouro,
.rank-progress-bar.is-ouro {
    background: linear-gradient(90deg, #B5780A, #FFB020, #FFD77A);
}

.evo-progress-bar.is-diamante,
.rank-progress-bar.is-diamante {
    background: linear-gradient(90deg, #FF3B00, #FF8A00, #FFD24A, #FF8A00);
    background-size: 200% 100%;
    animation: pdbFireFlow 2.2s linear infinite;
}

@keyframes pdbFireFlow {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}

/* ---------- Cartões da tabela de níveis ---------- */
.level-card.level-bronze {
    border-color: rgba(205, 127, 50, 0.55);
    background: linear-gradient(160deg, rgba(205, 127, 50, 0.14), rgba(255, 255, 255, 0.02));
}

.level-card.level-prata {
    border-color: rgba(201, 210, 218, 0.55);
    background: linear-gradient(160deg, rgba(201, 210, 218, 0.14), rgba(255, 255, 255, 0.02));
}

.level-card.level-ouro {
    border-color: rgba(255, 176, 32, 0.55);
    background: linear-gradient(160deg, rgba(255, 176, 32, 0.15), rgba(255, 255, 255, 0.02));
}

.level-card.level-diamante {
    position: relative;
    overflow: hidden;
    border-color: #FF7A00;
    background: linear-gradient(160deg, rgba(255, 59, 0, 0.18), rgba(40, 20, 10, 0.25));
    box-shadow: 0 0 34px rgba(255, 90, 0, 0.35);
}

.level-card.level-diamante::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 125%, rgba(255, 210, 74, 0.40), transparent 58%),
        radial-gradient(circle at 50% 135%, rgba(255, 59, 0, 0.50), transparent 52%);
    animation: pdbFlame 3s ease-in-out infinite;
    content: "";
}

@keyframes pdbFlame {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-6px) scale(1.06); opacity: 1; }
}

/* ---------- Ícones de nível com brilho metálico ---------- */
.level-card.level-bronze .level-icon { background: linear-gradient(135deg, rgba(205, 127, 50, 0.25), rgba(120, 72, 30, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 225, 190, 0.25); }
.level-card.level-prata .level-icon { background: linear-gradient(135deg, rgba(201, 210, 218, 0.25), rgba(150, 160, 170, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40); }
.level-card.level-ouro .level-icon { background: linear-gradient(135deg, rgba(255, 176, 32, 0.26), rgba(160, 110, 10, 0.12)); box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.40); }
.level-card.level-diamante .level-icon { position: relative; z-index: 1; background: linear-gradient(135deg, rgba(255, 59, 0, 0.35), rgba(255, 210, 74, 0.30)); box-shadow: 0 0 18px rgba(255, 90, 0, 0.55); }

.level-card.level-diamante .level-tier,
.level-card.level-diamante .level-name,
.level-card.level-diamante .level-range,
.level-card.level-diamante .level-desc { position: relative; z-index: 1; }