/* conquistas.css — a página das conquistas, no idioma do ranking (rk-base.css). As cores das raridades são as
 * mesmas do aviso no jogo (a paleta da addon do menu). Uma família por cartão, com a trilha dos níveis. */
.cq{--r-comum:#9595ad;--r-incomum:#2ecc71;--r-rara:#4a9eff;--r-epica:#a77bff;--r-lendaria:#ffc344;--r-mitica:#ff6b5e;--r-falta:#4c4c5c}
.cq .r-comum{--cor:var(--r-comum)}.cq .r-incomum{--cor:var(--r-incomum)}.cq .r-rara{--cor:var(--r-rara)}
.cq .r-epica{--cor:var(--r-epica)}.cq .r-lendaria{--cor:var(--r-lendaria)}.cq .r-mitica{--cor:var(--r-mitica)}
.cq .r-falta{--cor:var(--r-falta)}

.cq-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.cq-topo h1{font-size:2.5rem;overflow-wrap:anywhere}
.cq-topo .rk-sub a{color:var(--accent);margin-left:.4rem}
.cq-trava{margin-top:.6rem;max-width:62ch;font-size:.86rem;color:var(--muted2);padding-left:.7rem;border-left:2px solid var(--accent)}
.cq-filtro{flex-wrap:wrap;max-width:100%}
.cq-filtro button{height:32px;padding:0 .8rem;border-radius:7px;font-size:.84rem;font-weight:500;color:var(--mudo);white-space:nowrap}
.cq-filtro button:hover{color:var(--text)}
.cq-filtro button.on{color:var(--accent);background:rgba(245,166,35,.1);font-weight:600}

.cq-legenda{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.6rem 0 .5rem;font-size:.82rem;color:var(--texto2)}
.cq-legenda span{display:inline-flex;align-items:center;gap:.45rem}
.cq-legenda i{width:9px;height:9px;border-radius:2px;background:var(--cor)}
.cq-leg-falta i{background:var(--r-falta)}

.cq-cat{margin-top:2.4rem}
.cq-cat h2{display:flex;align-items:center;gap:.7rem;font-size:1.1rem;font-weight:600;margin-bottom:1rem}
.cq-cat h2::after{content:'';flex:1;height:1px;background:var(--border)}
.cq-cat h2 span{font-family:var(--mono);font-size:.8rem;color:var(--mudo);font-weight:500}
/* Os cartões da mesma fileira com a mesma altura (ele: "os card fica de tamanho diferente"): o quadro do
   meio estica e a trilha fica sempre colada embaixo, tenha a família 1 ou 2 linhas de níveis. */
.cq-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:.8rem;align-items:stretch}

/* O cartão da família: o ícone e o nome uma vez só, o nível escolhido no meio, a trilha embaixo. */
.cq-fam{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:1.05rem 1.1rem 1.1rem;border-radius:14px;min-width:0;
    background:linear-gradient(160deg,color-mix(in srgb,var(--cor) 8%,transparent),transparent 55%),var(--bg2);border:1px solid var(--border)}
.cq-ic,.cq-fam-nome small{transition:background-color .2s ease,color .2s ease}
.cq-fam.tem{border-color:color-mix(in srgb,var(--cor) 38%,var(--border))}
.cq-fam-cab{display:grid;grid-template-columns:56px minmax(0,1fr);gap:.85rem;align-items:center}
.cq-fam-nome{min-width:0}
.cq-fam-nome b{display:block;font-weight:700;font-size:1.02rem;line-height:1.25;overflow-wrap:anywhere}
.cq-fam-nome small{display:block;margin-top:.15rem;font-family:var(--mono);font-size:.72rem;color:var(--cor);letter-spacing:.02em}

.cq-icw{position:relative;width:56px;height:56px;display:block}
.cq-icw:has(.cq-ic:not(.sem)){filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cor) 45%,transparent))}
.cq-ic{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;color:var(--cor);
    background:color-mix(in srgb,var(--cor) 13%,transparent);border:1px solid color-mix(in srgb,var(--cor) 28%,transparent)}
.cq-ic.sem svg{width:24px;height:24px}
/* O desenho branco vira máscara: a cor e o brilho são os da raridade. */
.cq-ic:not(.sem){border:0;border-radius:0;background:var(--cor);-webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat}

.cq-det{flex:1;padding:.7rem .8rem;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid color-mix(in srgb,var(--cor) 18%,var(--border));
    transition:border-color .2s ease}
.cq-det p{font-size:.86rem;color:var(--texto2);line-height:1.45}
.cq-meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin-top:.45rem;font-size:.75rem;color:var(--mudo)}
.cq-rar{color:var(--cor);font-weight:600}
.cq-premio{color:var(--texto2)}
.cq-quando{display:block;margin-top:.35rem;font-size:.73rem;color:var(--cor)}
.cq-quando:empty{display:none}
.cq-fam.unica .cq-rar{display:none}

/* A trilha: um segmento por nível, ligados como uma barra só, cada um na cor da sua raridade. */
.cq-trilha{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px}
.cq-trilha li{min-width:0}
.cq-nvl{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .15rem .4rem;border-radius:7px;
    background:transparent;border:1px solid transparent;color:var(--texto2);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.cq-nvl::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--cor)}
.cq-nvl-r{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--cor)}
.cq-nvl-m{font-family:var(--mono);font-size:.68rem;color:var(--mudo);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cq-nvl.on{background:color-mix(in srgb,var(--cor) 11%,transparent);border-color:color-mix(in srgb,var(--cor) 40%,transparent)}
.cq-nvl:focus-visible{outline:2px solid var(--cor);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.cq-nvl:not(.on):hover{background:rgba(255,255,255,.04)}}

/* Na página do jogador: o que ele não pegou fica cinza, o que pegou fica aceso. */
.de-jogador .cq-nvl:not(.pegou){--cor:var(--r-falta)}
.de-jogador .cq-nvl:not(.pegou) .cq-nvl-r{color:var(--mudo)}
.de-jogador .cq-nvl.pegou::after{content:'';position:absolute;top:8px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--cor)}
.de-jogador .cq-det.falta{--cor:var(--r-falta)}
.cq-fam.r-falta{background:var(--bg2)}
.cq-fam.r-falta .cq-icw{filter:none;opacity:.55}
.cq-fam.r-falta .cq-fam-nome b{color:var(--mudo)}
.cq-fam.r-falta .cq-det,.cq-fam.r-falta .cq-trilha{opacity:.6}
.cq-fam.r-falta .cq-fam-nome small{color:var(--mudo)}

@media (max-width:760px){
    .cq-topo h1{font-size:1.875rem}
    .cq-filtro{overflow-x:auto;flex-wrap:nowrap}
    .cq-fam{padding:.95rem .9rem 1rem}
    .cq-fam-cab{grid-template-columns:48px minmax(0,1fr)}
    .cq-icw,.cq-ic{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.cq-nvl,.cq-det,.cq-ic,.cq-fam-nome small{transition:none}}