/* Cosméticos de perfil (docs/contratos/cosmeticos.md). Camadas desenhadas por
   perfil-cosmeticos.js a partir do catálogo; nada aqui vem do usuário além de
   duas cores #RRGGBB já validadas no servidor e no cliente.

   Níveis (atributo data-cos-nivel no elemento):
     completo  perfil aberto, um por vez: animação contínua permitida, pausa
               quando a aba some e com prefers-reduced-motion.
     cartao    perfil compacto: só a entrada anima, uma vez.
     mini      lista, chat, painel: estático (regra "nenhuma animação contínua").
   Animação só em transform e opacity, exceto o gradiente do nome no completo. */

:root {
  --cos-ouro: #F2C14E;
}

/* ---------------------------------------------------------------- avatar */
.avatar.cos-av { position: relative; overflow: visible !important; }
/* o retrato de pixel do tema espacial fica por baixo da moldura */
.avatar.cos-av > .ui-retrato { position: relative; z-index: 0; }
.cos-av-efeito, .cos-av-moldura {
  position: absolute; pointer-events: none; border-radius: 50%;
}
.cos-av-efeito { inset: -10%; z-index: 1;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
          mask: radial-gradient(circle, transparent 60%, #000 62%); }
.cos-av-moldura { z-index: 2; }
.cos-av-moldura.cos-m-anel {
  inset: -7%;
  border: 3px solid var(--cos-u1, var(--cos-i1, #EFE9DA));
  box-shadow: 0 0 0 2px var(--cos-u2, var(--cos-i2, #2455A4));
}
.cos-av-moldura.cos-m-imagem {
  inset: -24%; border-radius: 0;
  background: var(--cos-img) center / contain no-repeat;
  image-rendering: pixelated;
}
/* avatar pequeno: moldura de imagem fica menor para não engolir a linha */
.avatar.pequeno .cos-av-moldura.cos-m-imagem { inset: -18%; }
.avatar.pequeno .cos-av-moldura.cos-m-anel { border-width: 2px; box-shadow: 0 0 0 1px var(--cos-u2, var(--cos-i2, #2455A4)); }

.cos-e-brilho { box-shadow: 0 0 10px 3px var(--cos-i1, #7B6CF0); background: radial-gradient(circle, transparent 55%, var(--cos-i1, #7B6CF0) 100%); opacity: .8; }
.cos-e-fogo { background: conic-gradient(from 0deg, var(--cos-i1, #FF7A2A), var(--cos-i2, #FFD15C), var(--cos-i1, #FF7A2A), #C44818, var(--cos-i1, #FF7A2A)); filter: blur(1px); }
.cos-e-eletrico { background: repeating-conic-gradient(var(--cos-i1, #49E1FF) 0 8deg, transparent 8deg 22deg); filter: drop-shadow(0 0 3px var(--cos-i1, #49E1FF)); }
.cos-e-gelo { background: conic-gradient(var(--cos-i1, #9FDCF5), var(--cos-i2, #E6F7FF), var(--cos-i1, #9FDCF5), #6FB7E0, var(--cos-i1, #9FDCF5)); opacity: .9; }
.cos-e-magia { background: radial-gradient(circle, transparent 58%, var(--cos-i1, #B39BFF) 70%, transparent 75%); }
.cos-e-magia::before, .cos-e-magia::after {
  content: ''; position: absolute; width: 14%; height: 14%; border-radius: 50%;
  background: var(--cos-i2, #FFD15C); box-shadow: 0 0 6px var(--cos-i2, #FFD15C);
}
.cos-e-magia::before { top: 0; left: 43%; }
.cos-e-magia::after { bottom: 0; left: 43%; background: var(--cos-i1, #B39BFF); }
.cos-e-rgb { background: conic-gradient(#FF3D7F, #FFD15C, #3DFF8B, #49E1FF, #7B6CF0, #FF3D7F); }

/* animação do avatar: só no perfil aberto */
[data-cos-nivel="completo"] .cos-e-fogo,
[data-cos-nivel="completo"] .cos-e-eletrico,
[data-cos-nivel="completo"] .cos-e-rgb,
[data-cos-nivel="completo"] .cos-e-magia,
[data-cos-nivel="completo"] .cos-e-gelo { animation: cos-gira 6s linear infinite; }
[data-cos-nivel="completo"] .cos-e-eletrico { animation: cos-gira 1.6s steps(8) infinite; }
[data-cos-nivel="completo"] .cos-e-fogo { animation: cos-gira 3s linear infinite, cos-tremula 0.9s ease-in-out infinite alternate; }
[data-cos-nivel="completo"] .cos-e-brilho { animation: cos-respira 2.4s ease-in-out infinite alternate; }
[data-cos-nivel="completo"] .cos-m-imagem.cos-gira { animation: cos-gira 24s linear infinite; }
[data-cos-nivel="cartao"] .cos-av-efeito, [data-cos-nivel="cartao"] .cos-av-moldura { animation: cos-aparece .5s ease-out 1; }

@keyframes cos-gira { to { transform: rotate(360deg); } }
@keyframes cos-tremula { from { opacity: .75; } to { opacity: 1; } }
@keyframes cos-respira { from { opacity: .45; } to { opacity: .95; } }
@keyframes cos-aparece { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- insígnias */
.cos-insignias { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 6px; }
.cos-amostra .cos-insignia { width: 32px; height: 32px; }
.cos-insignia {
  width: 20px; height: 20px; display: inline-block;
  background: var(--cos-img) center / contain no-repeat; image-rendering: pixelated;
}
[data-cos-nivel="mini"] .cos-insignia { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- fundo (banner) */
.cos-fundo { position: relative; overflow: hidden; isolation: isolate; }
.cos-f-solido { background: var(--cos-u1, var(--cos-i1, #2455A4)) !important; }
.cos-f-gradiente {
  background: linear-gradient(120deg, var(--cos-u1, var(--cos-i1)), var(--cos-u2, var(--cos-i2, var(--cos-i1))), var(--cos-i3, var(--cos-i1))) !important;
  background-size: 200% 200% !important;
}
.cos-f-imagem { background: var(--cos-img) center / cover no-repeat !important; image-rendering: pixelated; }
.cos-f-grade {
  background-color: var(--cos-i1, #0B0F2A) !important;
  background-image:
    linear-gradient(transparent 0 calc(100% - 1px), color-mix(in srgb, var(--cos-u1, var(--cos-i2, #FF3DD1)) 75%, transparent) 0),
    linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, var(--cos-u1, var(--cos-i2, #FF3DD1)) 75%, transparent) 0) !important;
  background-size: 18px 18px !important;
  background-repeat: repeat !important; background-position: 0 0 !important;
}
/* véu: o nome e o avatar ficam legíveis em qualquer fundo */
.cos-fundo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(3, 13, 29, .55));
}
[data-cos-nivel="completo"] .cos-f-gradiente.cos-animado { animation: cos-desliza 14s linear infinite alternate; }

.cos-particulas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cos-particulas i { position: absolute; display: block; opacity: 0; }
.cos-p-estrelas i { width: 2px; height: 2px; background: #FFFDF0; }
.cos-p-chuva i { width: 1px; height: 10px; background: rgba(159, 220, 245, .7); }
.cos-p-vagalumes i { width: 3px; height: 3px; border-radius: 50%; background: #E8FF8A; box-shadow: 0 0 5px #E8FF8A; }
.cos-p-morcegos i { width: 6px; height: 3px; background: #1A0F1F; clip-path: polygon(0 0, 30% 60%, 50% 20%, 70% 60%, 100% 0, 50% 100%); }
.cos-p-faiscas i { width: 3px; height: 3px; background: var(--cos-i1, #FFD15C); box-shadow: 0 0 4px var(--cos-i2, #FF7A2A); }
/* partículas só existem no perfil aberto (o JS nem cria nos outros níveis) */
[data-cos-nivel="completo"] .cos-p-estrelas i { animation: cos-pisca 3s ease-in-out infinite; }
[data-cos-nivel="completo"] .cos-p-vagalumes i { animation: cos-flutua 6s ease-in-out infinite; }
[data-cos-nivel="completo"] .cos-p-chuva i { animation: cos-cai 1.1s linear infinite; }
[data-cos-nivel="completo"] .cos-p-morcegos i { animation: cos-voa 7s linear infinite; }
[data-cos-nivel="completo"] .cos-p-faiscas i { animation: cos-sobe 4s ease-out infinite; }
@keyframes cos-pisca { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes cos-flutua { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -22px); } }
@keyframes cos-cai { from { opacity: .8; transform: translate(0, -20px); } to { opacity: .8; transform: translate(-6px, 140px); } }
@keyframes cos-voa { from { opacity: .9; transform: translate(-30px, 0); } to { opacity: .9; transform: translate(420px, -30px); } }
@keyframes cos-sobe { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(6px, -60px); } }

/* ---------------------------------------------------------------- cartão */
/* Sem `position` aqui: o cartão do perfil compacto é `fixed` (style.css) e
   `relative` o jogava para o fim da página, fora da tela (5.2.1). Quem recebe
   os cantos e a borda já é posicionado: .perfil-pessoa (fixed), .perfil-dlg-id
   e .cos-previa-cartao (relative). */
.cos-cartao:where(:not(.perfil-pessoa)) { position: relative; }
.cos-c-vidro {
  background: color-mix(in srgb, #0E1230 78%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(239, 233, 218, .18), var(--sombra, 0 10px 30px rgba(0, 0, 0, .4));
}
.cos-c-borda { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; padding: 2px;
  background: conic-gradient(from var(--cos-ang, 0deg), var(--cos-u1, var(--cos-i1)), var(--cos-u2, var(--cos-i2)), var(--cos-u1, var(--cos-i1)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.cos-c-canto { position: absolute; width: 32px; height: 32px; z-index: 3; pointer-events: none;
  background: var(--cos-img) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.cos-c-canto.c2 { right: 4px; top: 4px; transform: scaleX(-1); }
.cos-c-canto.c1 { left: 4px; top: 4px; }
.cos-c-canto.c3 { left: 4px; bottom: 4px; transform: scaleY(-1); }
.cos-c-canto.c4 { right: 4px; bottom: 4px; transform: scale(-1, -1); }
.cos-c-particulas { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
[data-cos-nivel="completo"] .cos-c-borda.cos-animado { animation: cos-borda 8s linear infinite; }
@property --cos-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cos-borda { to { --cos-ang: 360deg; } }
[data-cos-nivel="cartao"].cos-cartao { animation: cos-aparece .35s ease-out 1; }

/* aba escondida: nada roda */
html.aba-oculta [data-cos-nivel] *, html.aba-oculta [data-cos-nivel] { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  [data-cos-nivel] *, [data-cos-nivel] { animation: none !important; }
  .cos-particulas { display: none; }
}

/* ---------------------------------------------------------------- editor */
.cos-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 12px; }
.cos-editor-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cos-editor-cats button[aria-pressed="true"] { background: var(--azul); color: var(--creme); }
.cos-editor-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.cos-item { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border-radius: 10px;
  background: var(--painel-2); border: 2px solid transparent; font-size: 12px; text-align: center; min-height: 96px; }
.cos-item[aria-pressed="true"] { border-color: var(--azul-claro, #3A72CE); }
.cos-item[aria-disabled="true"] { opacity: .55; }
.cos-item .cos-amostra { width: 56px; height: 40px; border-radius: 8px; display: grid; place-items: center; overflow: visible; }
.cos-raridade { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.cos-r-comum { color: #B7B0A3; } .cos-r-raro { color: #49E1FF; } .cos-r-epico { color: #B39BFF; } .cos-r-lendario { color: #F2C14E; }
.cos-selo { position: absolute; top: 4px; right: 4px; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: rgba(3, 13, 29, .8); }
.cos-selo-turbo { color: #FFD66B; box-shadow: inset 0 0 0 1px rgba(255, 214, 107, .45); }
.cos-previa { display: grid; gap: 10px; align-content: start; }
.cos-previa-cartao { position: relative; border-radius: 12px; overflow: hidden; background: #0E1230; border: 1px solid var(--borda-forte, #2a3150); }
.cos-previa-banner { height: 92px; }
.cos-previa-corpo { padding: 0 14px 14px; }
.cos-previa-corpo .avatar { margin-top: -38px; border: 4px solid #0E1230; box-sizing: content-box; }
.cos-previa-nome { margin: 8px 0 0; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.cos-previa-linha { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--painel-2); font-size: 13px; }
.cos-previa-rotulo { font-size: 11px; color: var(--texto-fraco); margin: 0; }
.cos-editor-rodape { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.cos-cores { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .cos-editor { grid-template-columns: 1fr; } }
/* insígnias logo abaixo de um nome em bloco (perfil completo e compacto) */
h2 + .cos-insignias, .cos-previa-nome + .cos-insignias { display: flex; margin: 4px 0 0; }

/* ================================================================ aba Perfil (perfil-config.js)
   Duas colunas: edição à esquerda, prévia fixa à direita. Barra única de salvar
   presa embaixo. Sub-abas Identidade / Visual do perfil. */
.perfil-cfg { display: flex; flex-direction: column; min-height: 100%; }
.perfil-cfg-escondido { display: none !important; }
.perfil-cfg-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.perfil-cfg-cabeca .config-secao-dica { max-width: 46ch; }
.perfil-cfg-abas { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--painel-2); border: 1px solid var(--borda, #2a3150); }
.perfil-cfg-abas [role="tab"] { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-fraco); font-weight: 600; box-shadow: none; }
.perfil-cfg-abas [role="tab"][aria-selected="true"] { background: var(--azul); color: var(--creme); }
.perfil-cfg-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; flex: 1; }
.perfil-cfg-coluna { min-width: 0; display: grid; gap: 12px; }
.perfil-cfg-coluna > [role="tabpanel"] { display: grid; gap: 12px; }
.perfil-cfg-coluna > [role="tabpanel"][hidden] { display: none; }
.perfil-cfg-cartao { padding: 14px 16px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--borda, #2a3150); display: grid; gap: 8px; min-width: 0; }
.perfil-cfg-cartao .dica { margin: 0; }
.perfil-cfg-cartao input[type="text"], .perfil-cfg-cartao textarea { width: 100%; box-sizing: border-box; }
.perfil-cfg-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neon, #49E1FF); }
.perfil-cfg-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perfil-cfg-cartao .admin-rosto { display: flex; gap: 14px; align-items: center; }
.perfil-cfg-cartao .perfil-dlg-contador { margin: 0; text-align: right; }
#perfil-cfg-fundo-proprio .perfil-editor-banner { height: 56px; border-radius: 8px; }
.perfil-editor-outra { display: inline-flex; align-items: center; gap: 8px; }
.perfil-cfg-previa { position: sticky; top: 0; display: grid; gap: 10px; }
.perfil-cfg-rodape {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 16px; padding: 12px 0 4px; border-top: 1px solid var(--borda, #2a3150);
  /* fundo sólido: o campo de baixo não aparece por trás dos botões */
  background: var(--fundo-1, #0B1026);
  box-shadow: 0 -12px 16px -12px rgba(3, 13, 29, .9);
}
.perfil-cfg-rodape #perfil-cfg-estado { margin-right: auto; font-size: 13px; color: var(--texto-fraco); min-width: 0; }
.perfil-cfg-rodape.pendente #perfil-cfg-estado { color: var(--ambar, #F0B429); }

/* editor de cosméticos dentro da aba */
#perfil-cfg-cosmeticos .cos-bloco { padding: 14px 16px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--borda, #2a3150); display: grid; gap: 8px; }
.cos-editor.cos-editor-sem-previa { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.cos-editor-cats { flex-wrap: wrap; gap: 6px; }
.cos-editor-cats button { flex: none; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: none; }
.cos-editor-grade { max-height: 360px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.cos-rodape-embutido { margin-top: 4px; }
.cos-rodape-embutido #cos-aplicar, .cos-rodape-embutido #cos-cancelar, .cos-rodape-embutido #cos-estado { display: none; }
.cos-rodape-embutido #cos-padrao { min-height: 32px; font-size: 13px; }

@media (max-width: 860px) {
  .perfil-cfg-grade { grid-template-columns: minmax(0, 1fr); }
  .perfil-cfg-previa { position: static; order: -1; }
  /* aviso numa linha só, botões dividindo a largura */
  .perfil-cfg-rodape { flex-wrap: wrap; }
  .perfil-cfg-rodape #perfil-cfg-estado { flex: 1 0 100%; margin: 0; }
  .perfil-cfg-rodape button { flex: 1; }
}

/* cartão da pessoa (#418): a moldura passa por cima do banner e da borda do
   avatar, sem margem; o ponto de status fica no canto do avatar */
.cp-avatar > .avatar.cos-av:has(.cos-m-imagem) { box-shadow: none; }


/* Item não adquirido: dá para ver na prévia, com selo de bloqueado. */
.cos-item.cos-bloqueado { opacity: .78; }

/* cartão da pessoa: o banner e o avatar sobreposto ficam em style.css (#418) */
/* painel da conta (embaixo): a moldura passa da caixa de 32px */
.eu-avatar-caixa .avatar.cos-av { overflow: visible; }

/* ---------------------------------------------------------------- placa de identificação */
/* Faixa atrás do nome numa linha de lista (membros, canal de voz, painel da conta).
   A arte fica à direita e some para a esquerda (máscara), onde estão foto e nome;
   o véu escuro garante o contraste do texto. Parada; o gradiente animado só corre
   com o mouse em cima da linha. */
/* z-index -1 dentro do isolate: fica sobre o fundo da linha e sob o conteúdo, sem
   mexer no position dos filhos (o .eu tem ações posicionadas) nem cortar a moldura. */
.cos-com-placa { position: relative; isolation: isolate; }
.cos-placa {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .55) 35%, #000 70%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .55) 35%, #000 70%);
}
.cos-placa::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(3, 13, 29, .55), rgba(3, 13, 29, .12) 60%, transparent);
}
.cos-pl-imagem { background: var(--cos-img) 100% 60% / cover no-repeat; }
.cos-pl-imagem.cos-pixel { image-rendering: pixelated; }
.cos-pl-gradiente {
  background: linear-gradient(100deg, var(--cos-i1), var(--cos-i2, var(--cos-i1)), var(--cos-i3, var(--cos-i2, var(--cos-i1))));
  background-size: 220% 100%; background-position: 0% 50%;
}
.cos-com-placa:hover > .cos-pl-gradiente.cos-animado { animation: cos-placa-desliza 3.5s ease-in-out infinite alternate; }
@keyframes cos-placa-desliza { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.cos-pl-grade {
  background-color: var(--cos-i1, #0B0F2A);
  background-image:
    linear-gradient(transparent 0 calc(100% - 1px), color-mix(in srgb, var(--cos-i2, #7B6CF0) 70%, transparent) 0),
    linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, var(--cos-i2, #7B6CF0) 70%, transparent) 0);
  background-size: 12px 12px;
}
/* a linha com placa ganha o texto claro mesmo sem hover */
.membro.cos-com-placa, .membro-comunidade.cos-com-placa { color: var(--texto, #EFE9DA); }
.membro-comunidade.cos-com-placa:hover:not(:disabled) > .cos-placa,
.membro.cos-com-placa:hover > .cos-placa { filter: brightness(1.15); }
/* amostra no editor: uma linha em miniatura */
.cos-amostra-placa { position: relative; display: flex; align-items: center; gap: 4px; width: 56px; height: 24px; padding: 0 3px; border-radius: 6px; background: var(--painel-2, #1A1D22); }
.cos-amostra-placa .avatar.pequeno { width: 16px; height: 16px; font-size: 7px; }
.cos-amostra-placa > i { display: block; flex: 1; height: 4px; border-radius: 2px; background: rgba(239, 233, 218, .55); }