/**
 * Selo de nível do treinador.
 *
 * A intensidade acompanha o nível, de propósito: os primeiros são discretos
 * (aparecem em toda lista de comentário e não podem poluir a leitura) e a partir
 * de Veterano a coisa começa a brilhar. Mestre Pokémon é o único com borda
 * girando — se todo mundo brilha, ninguém brilha.
 *
 * Cada nível é `.pbadge-{slug}`; o slug vem do PHP (App\Services\PlayerBadge).
 */

.pbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
    position: relative;
    vertical-align: middle;
}
/* Icone SVG: acompanha a cor do nivel (fill=currentColor no proprio svg) e
   nao encolhe dentro de flex apertado. */
.pbadge-ico { width: 11px; height: 11px; flex: 0 0 auto; display: block; }
.pbadge-txt { line-height: 1.5; }

/* ---------- 1-2: discretos ---------- */
.pbadge-novato   { color:#64748b; background:rgba(148,163,184,.15); border-color:rgba(148,163,184,.35); }
.pbadge-aprendiz { color:#475569; background:rgba(226,232,240,.55); border-color:rgba(148,163,184,.5); }
:root[data-theme="dark"] .pbadge-novato,
:root:not([data-theme="light"]) .pbadge-novato   { color:#94a3b8; background:rgba(148,163,184,.12); }
:root[data-theme="dark"] .pbadge-aprendiz,
:root:not([data-theme="light"]) .pbadge-aprendiz { color:#cbd5e1; background:rgba(148,163,184,.18); }

/* ---------- 3-4: azul, borda sólida ---------- */
.pbadge-treinador  { color:#1d4ed8; background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.45); }
.pbadge-competente { color:#1e40af; background:rgba(37,99,235,.18); border-color:rgba(37,99,235,.6);
                     box-shadow:0 0 0 1px rgba(37,99,235,.12); }
:root[data-theme="dark"] .pbadge-treinador,
:root:not([data-theme="light"]) .pbadge-treinador  { color:#93c5fd; }
:root[data-theme="dark"] .pbadge-competente,
:root:not([data-theme="light"]) .pbadge-competente { color:#bfdbfe; }

/* ---------- 5-6: roxo, brilho pulsando ---------- */
.pbadge-veterano { color:#7e22ce; background:rgba(168,85,247,.16); border-color:rgba(168,85,247,.55);
                   animation: pbadge-pulso 3.2s ease-in-out infinite; }
.pbadge-elite    { color:#6b21a8; background:rgba(147,51,234,.2); border-color:rgba(147,51,234,.7);
                   animation: pbadge-pulso 2.4s ease-in-out infinite; }
:root[data-theme="dark"] .pbadge-veterano,
:root:not([data-theme="light"]) .pbadge-veterano { color:#d8b4fe; }
:root[data-theme="dark"] .pbadge-elite,
:root:not([data-theme="light"]) .pbadge-elite    { color:#e9d5ff; }

@keyframes pbadge-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,.0); }
    50%      { box-shadow: 0 0 8px 1px rgba(168,85,247,.45); }
}

/* ---------- 7-8: laranja e vermelho, borda com brilho forte ---------- */
.pbadge-especialista { color:#c2410c; background:rgba(249,115,22,.18); border-color:rgba(249,115,22,.75);
                       animation: pbadge-brasa 2.6s ease-in-out infinite; }
.pbadge-mestre       { color:#b91c1c; background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.8);
                       animation: pbadge-brasa 2s ease-in-out infinite; }
:root[data-theme="dark"] .pbadge-especialista,
:root:not([data-theme="light"]) .pbadge-especialista { color:#fdba74; }
:root[data-theme="dark"] .pbadge-mestre,
:root:not([data-theme="light"]) .pbadge-mestre       { color:#fca5a5; }

@keyframes pbadge-brasa {
    0%, 100% { box-shadow: 0 0 4px 0 rgba(239,68,68,.25); }
    50%      { box-shadow: 0 0 12px 2px rgba(249,115,22,.6); }
}

/* ---------- 9: lendário, dourado com reflexo passando ---------- */
.pbadge-lendario {
    color:#78350f;
    border-color: rgba(245,158,11,.9);
    background: linear-gradient(100deg,
        rgba(252,211,77,.35) 0%, rgba(252,211,77,.35) 40%,
        rgba(255,255,255,.85) 50%,
        rgba(252,211,77,.35) 60%, rgba(252,211,77,.35) 100%);
    background-size: 300% 100%;
    animation: pbadge-reflexo 3.5s linear infinite;
    box-shadow: 0 0 10px rgba(245,158,11,.45);
}
/* O Lendário NÃO troca de cor no escuro: o fundo dele é o mesmo dourado claro
   nos dois temas, e texto creme sobre dourado claro fica ilegível. Fica marrom
   escuro sempre — foi por isso que os outros níveis ganham variante dark e ele
   não. */

@keyframes pbadge-reflexo {
    0%   { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

/* ---------- 10: Mestre Pokémon, borda girando ----------
   Só ele tem a borda em gradiente rotativo. É o topo da escada e precisa ser
   inconfundível a três metros de distância. */
.pbadge-mestre-pokemon {
    color: #fff;
    border-color: transparent;
    background:
        linear-gradient(#1e1b4b, #1e1b4b) padding-box,
        conic-gradient(from var(--pbadge-giro, 0deg),
            #f59e0b, #ef4444, #a855f7, #3b82f6, #22c55e, #f59e0b) border-box;
    border: 2px solid transparent;
    box-shadow: 0 0 12px rgba(168,85,247,.55);
    animation: pbadge-girar 4s linear infinite;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* A propriedade customizada precisa ser registrada pra poder ANIMAR — sem o
   @property o navegador trata --pbadge-giro como texto e o gradiente fica
   parado. Onde não houver suporte, o selo continua colorido, só não gira. */
@property --pbadge-giro {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes pbadge-girar {
    to { --pbadge-giro: 360deg; }
}

/* ---------- cargo da equipe (ADM e cia) ---------- */
.pbadge-staff {
    color:#b91c1c; background:rgba(220,38,38,.15); border-color:rgba(220,38,38,.55);
}
:root[data-theme="dark"] .pbadge-staff,
:root:not([data-theme="light"]) .pbadge-staff { color:#fca5a5; }

/* Quem pediu menos animação no sistema recebe o selo parado — a cor e a borda
   continuam, então o nível segue legível. */
@media (prefers-reduced-motion: reduce) {
    .pbadge { animation: none !important; }
}