/* ---------- CARDS DOS JOGADORES (home) — formato da referência LDF, cor pela patente ---------- */
.cj-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cj-busca {
    display: flex; align-items: center; gap: 8px; min-width: 240px; max-width: 100%;
    padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text-dim);
}
.cj-busca input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 14px; }
.cj-carrossel { position: relative; display: flex; align-items: center; gap: 10px; }
.cj-track {
    flex: 1; display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    /* overflow-x:auto também corta na vertical: folga pro card subir no hover e a sombra aparecer
       inteira, compensada com margem negativa pra não mudar o layout. */
    padding: 22px 18px 48px; margin: -14px -14px -34px; scroll-padding: 0 18px;
    scrollbar-width: none;
}
.cj-track::-webkit-scrollbar { display: none; }
.cj-seta { flex-shrink: 0; }
.cj-vazio { color: var(--text-dim); font-size: 14px; padding: 40px 0; margin: 0 auto; }

/* Cores por patente: claro/escuro da moldura e da face, brilho e cor do texto. */
.cj-tile {
    --cj-a: #b9a4ff; --cj-b: #6d3fe0; --cj-c: #2c1266; --cj-glow: 139, 92, 246; --cj-texto: #fff; --cj-texto-suave: rgba(255, 255, 255, 0.72);
    --cj-linha: rgba(255, 255, 255, 0.28);
    --cj-chip: rgba(0, 0, 0, 0.30); --cj-chip-borda: rgba(255, 255, 255, 0.20); --cj-chip-forte: rgba(0, 0, 0, 0.42);
}
.cj-tile.cj-bot { --cj-a: #c9b8ff; --cj-b: #7c4ff0; --cj-c: #2a1163; --cj-glow: 139, 92, 246; }
.cj-tile.cj-bronze { --cj-a: #f0c08f; --cj-b: #b06a35; --cj-c: #4a2610; --cj-glow: 205, 127, 50; }
.cj-tile.cj-prata {
    --cj-a: #ffffff; --cj-b: #b9c0c9; --cj-c: #5d6570; --cj-glow: 200, 206, 214;
    --cj-texto: #15191f; --cj-texto-suave: rgba(21, 25, 31, 0.68); --cj-linha: rgba(21, 25, 31, 0.22);
    --cj-chip: rgba(255, 255, 255, 0.50); --cj-chip-borda: rgba(255, 255, 255, 0.75); --cj-chip-forte: rgba(255, 255, 255, 0.72);
}
.cj-tile.cj-ouro {
    --cj-a: #fff2bf; --cj-b: #e3b549; --cj-c: #7a5512; --cj-glow: 242, 193, 78;
    --cj-texto: #2b1d00; --cj-texto-suave: rgba(43, 29, 0, 0.7); --cj-linha: rgba(43, 29, 0, 0.22);
    --cj-chip: rgba(255, 248, 220, 0.45); --cj-chip-borda: rgba(255, 250, 230, 0.75); --cj-chip-forte: rgba(255, 248, 225, 0.70);
}
.cj-tile.cj-diamante { --cj-a: #c8f6ff; --cj-b: #3fb6e8; --cj-c: #0b3f73; --cj-glow: 90, 209, 240; }
.cj-tile.cj-lenda { --cj-a: #ff9a9d; --cj-b: #e3252d; --cj-c: #4d0408; --cj-glow: 229, 52, 58; }

.cj-tile {
    position: relative; flex: 0 0 auto; width: 244px; scroll-snap-align: start;
    padding: 26px 22px 22px; border-radius: 22px; border: 1px solid var(--border);
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(var(--cj-glow), 0.16), transparent 70%),
        var(--bg-card);
    color: inherit; text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cj-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--cj-glow), 0.45);
    box-shadow: 0 16px 30px -16px rgba(var(--cj-glow), 0.55);
}

/* Posição no ranking: selo na cor da patente, preso no canto do escudo. */
.cj-posicao {
    position: absolute; top: 34px; right: 26px; z-index: 3;
    min-width: 38px; padding: 5px 9px; border-radius: 999px; text-align: center;
    font-size: 13px; font-weight: 900; letter-spacing: 0.3px; color: #fff;
    background: linear-gradient(135deg, rgba(var(--cj-glow), 0.95), rgba(0, 0, 0, 0.55));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Escudo: a camada externa é a moldura (degradê metálico) e a face fica 3px pra dentro, com o
   mesmo recorte — dá a borda dupla dos cards FUT. */
.cj-card {
    --cj-recorte: polygon(9% 3%, 30% 0, 50% 4%, 70% 0, 91% 3%, 100% 13%, 100% 74%, 50% 100%, 0 74%, 0 13%);
    position: relative; padding: 3px;
    clip-path: var(--cj-recorte);
    background: linear-gradient(160deg, var(--cj-a) 0%, var(--cj-b) 45%, var(--cj-c) 100%);
    filter: drop-shadow(0 12px 22px rgba(var(--cj-glow), 0.35));
}
.cj-face {
    position: relative; overflow: hidden;
    clip-path: var(--cj-recorte);
    padding: 30px 20px 50px;
    color: var(--cj-texto);
    display: flex; flex-direction: column; align-items: center;
    background:
        radial-gradient(130% 70% at 85% -10%, rgba(255, 255, 255, 0.55), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 9px),
        linear-gradient(165deg, var(--cj-b) 0%, var(--cj-c) 100%);
}
.cj-face > * { position: relative; z-index: 1; flex-shrink: 0; }

/* Logo da BLHAX de fundo, bem apagada: cinza, máscara radial (some o fundo quadrado da imagem)
   e mistura com a cor da patente. */
.cj-face .cj-logo-fundo {
    position: absolute; z-index: 0; left: 50%; top: 50%; width: 270px; height: 270px;
    transform: translate(-50%, -50%) rotate(-8deg);
    background: url("/img/logo.png") center / contain no-repeat;
    filter: grayscale(1) contrast(1.4) brightness(1.15);
    mix-blend-mode: soft-light; opacity: 0.32;
    -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 62%);
    mask-image: radial-gradient(circle at center, #000 30%, transparent 62%);
    pointer-events: none;
}

/* Reflexo que atravessa o card no hover. */
.cj-face::after {
    content: ""; position: absolute; inset: -40% -60%; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
    transform: translateX(-60%); transition: transform 0.9s ease;
}
.cj-tile:hover .cj-face::after { transform: translateX(60%); }

.cj-topo { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cj-ovr { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0 0 4px; }

/* Plaquetas (como na referência): cada informação num bloco translúcido com borda fina. */
.cj-chip {
    background: var(--cj-chip); border: 1px solid var(--cj-chip-borda);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 8px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cj-ovr strong {
    display: flex; flex-direction: column; align-items: center; min-width: 50px;
    padding: 4px 8px 3px; border-radius: 12px; line-height: 1;
    font-size: 27px; font-weight: 900; letter-spacing: -0.5px;
}
.cj-sigla { font-size: 9px; font-weight: 900; letter-spacing: 1.2px; margin-top: 2px; color: var(--cj-texto-suave); }
.cj-emblema { padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 1.35; }
.cj-avatar-wrap {
    width: 98px; height: 98px; border-radius: 50%; padding: 3px;
    background: conic-gradient(from 210deg, var(--cj-a), var(--cj-b), var(--cj-c), var(--cj-a));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.cj-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: rgba(0, 0, 0, 0.35); }

.cj-patente {
    margin-top: 8px; padding: 2px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 900; letter-spacing: 0.3px;
    background: var(--cj-chip-forte);
}
.cj-nome {
    width: 100%; margin-top: 5px; padding: 4px 8px; border-radius: 10px; text-align: center;
    font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cj-nome.cj-nome-m { font-size: 13px; letter-spacing: 0.2px; }
.cj-nome.cj-nome-p { font-size: 11.5px; letter-spacing: 0; }
.cj-nome.cj-nome-xp { font-size: 10px; letter-spacing: 0; }

.cj-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; margin-top: 7px; padding: 0 22px; }
.cj-attr {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3px 0 2px; border-radius: 8px; line-height: 1;
}
.cj-attr strong { font-size: 16px; font-weight: 900; }
.cj-attr span { margin-top: 1px; font-size: 8.5px; font-weight: 900; letter-spacing: 0.8px; color: var(--cj-texto-suave); }
.cj-attr.cj-destaque { background: var(--cj-chip-forte); }

.cj-marca { margin-top: 9px; font-size: 16px; font-weight: 900; letter-spacing: 1px; opacity: 0.8; }

@media (max-width: 640px) {
    .cj-header { align-items: stretch; }
    .cj-busca { min-width: 0; width: 100%; }
    .cj-seta { display: none; }
    .cj-tile { width: 226px; padding: 22px 16px 18px; }
    .cj-face { padding: 26px 16px 46px; }
    .cj-ovr strong { font-size: 25px; }
    .cj-avatar-wrap { width: 88px; height: 88px; }
}

/* Card do jogador do Clube VIP: moldura dourada por fora da cor da patente + faixa "VIP". */
.cj-tile.cj-vip { border-color: rgba(255, 201, 59, 0.55); background: radial-gradient(90% 55% at 50% 0%, rgba(255, 201, 59, 0.18), transparent 70%), var(--bg-card); }
.cj-tile.cj-vip .cj-card { background: linear-gradient(160deg, #fff3b8 0%, #ffc93b 30%, var(--cj-b) 60%, #b07800 100%); filter: drop-shadow(0 12px 22px rgba(255, 201, 59, 0.38)); }
.cj-avatar-wrap { position: relative; }
.cj-coroa.selo-vip { position: absolute; top: -13px; left: 50%; z-index: 2; width: 30px; height: 30px; margin: 0; border-radius: 9px; transform: translateX(-50%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 201, 59, 0.55); }
.cj-coroa.selo-vip svg { width: 19px; height: 19px; }
.cj-coroa.selo-vip:hover { transform: translateX(-50%) scale(1.1); }