/* UTILIDADES DA LOJA (03/10, SQL 0281): Cor do Nome, as bolinhas de cor na Loja, os botões da
   Segunda Build no painel do herói e o nome do Pet. game.js: lojaCartoesUtilidadesHtml,
   renderBuildsDoHeroi, nomeDoPetHtml. */

/* As 6 cores do nome. Fortes o bastante para ler em fundo escuro, sem brilho piscando. */
.nome-cor-ouro{--nome-cor:#ffcf4a}
.nome-cor-rubi{--nome-cor:#ff5d6c}
.nome-cor-esmeralda{--nome-cor:#4fe08a}
.nome-cor-safira{--nome-cor:#5aa8ff}
.nome-cor-ametista{--nome-cor:#c58bff}
.nome-cor-gelo{--nome-cor:#9ff0ff}
span.nome-cor{color:var(--nome-cor);text-shadow:0 0 6px color-mix(in srgb,var(--nome-cor) 35%,transparent)}

/* Bolinhas da Cor do Nome no cartão da Loja: cheia = sua; contorno = à venda; anel = em uso. */
.util-cores{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0}
.util-cor{display:grid;place-items:center;width:26px;height:26px;min-height:0;padding:0;border:1px solid #5d4c2a;border-radius:50%;background:#0f0c07;cursor:var(--cur-mao,pointer)}
.util-cor i{display:block;width:14px;height:14px;border-radius:50%;background:var(--nome-cor);opacity:.35}
.util-cor.tem i{opacity:1}
.util-cor.escolhida{border:2px dashed var(--nome-cor)}
.util-cor.ativa{border:2px solid #fff1c9;box-shadow:0 0 0 2px var(--nome-cor)}
.util-cor:focus-visible{outline:2px solid #fff1c9;outline-offset:2px}

/* Segunda Build: a mesma caixa do "Reorganizar build", com os dois botões. */
.stat-build-card{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:12px 14px;border:1px solid #3e4a63;border-radius:9px;background:linear-gradient(145deg,#171c27,#181a20)}
.stat-build-card.hidden{display:none}
.stat-build-card span,.stat-build-card strong,.stat-build-card small{display:block}
.stat-build-card span{color:#7fa3d8;font-size:calc(8px * var(--text-scale, 1));font-weight:900;letter-spacing:.8px}
.stat-build-card strong{margin:3px 0;color:#dfe6f3;font-size:calc(12px * var(--text-scale, 1))}
.stat-build-card>div>small{color:#8a909c;font-size:calc(8.5px * var(--text-scale, 1))}
.stat-build-botoes{display:flex;gap:8px;flex:0 0 auto}
.stat-build-botoes button{min-width:86px;min-height:44px;border:1px solid #4b6290;background:#1d2a45;color:#dce8ff;font-size:calc(9px * var(--text-scale, 1));font-weight:900}
.stat-build-botoes button.ativa{border-color:#7fb0ff;background:#2b4a85;color:#fff}
.stat-build-botoes button small{color:#bcd3ff;font-size:calc(7px * var(--text-scale, 1))}
@media(max-width:760px){
  .stat-build-card{align-items:stretch;flex-direction:column}
  .stat-build-botoes button{flex:1 1 0}
}

/* Nome do Pet: o nome dado em cima, a espécie pequena ao lado. */
.pet-especie{font-size:.55em;font-weight:600;opacity:.7;white-space:nowrap}
#merchantView .pa-nome{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
#merchantView .pa-nome h3{min-width:0}
.pet-renomear{min-height:32px;padding:4px 10px;border:1px solid #6b5426;border-radius:6px;background:#211a0d;color:#ffe2a3;font-size:calc(10px * var(--text-scale, 1));font-weight:800;letter-spacing:.4px}
/* A build em uso fica acesa (o botão está desligado só porque já é ela). */
.stat-build-botoes button.ativa:disabled{opacity:1;cursor:var(--cur-seta,default);filter:none}
/* No chat o nome é um botão (abre a ficha): a mesma cor. */
.col-chat-autor.nome-cor{color:var(--nome-cor)}

/* A COR PRÓPRIA DE CADA TEMA DO PASSE (07/10, SQL 1003, escolha do autor "Cor própria"): só vem do Premium
   do tema. O nome vira um degradê nas cores do golpe do tema (COL_VFX_TEMAS.paleta: cor, claro, faísca),
   parado (sem animação, o brilho do set já deu lag). --nome-cor fica para a sombra e a bolinha. */
.nome-cor-tema_thanatos{--nome-cor:#a088eb;--nome-cor-grad:linear-gradient(90deg,#a088eb,#c8b6ff 50%,#aaf0e1)}
.nome-cor-tema_poseidon{--nome-cor:#74cbe2;--nome-cor-grad:linear-gradient(90deg,#74cbe2,#c8f5fa 50%,#e8c070)}
.nome-cor-tema_hypnos{--nome-cor:#c89ae6;--nome-cor-grad:linear-gradient(90deg,#c89ae6,#f0d7ff 50%,#ebc878)}
.nome-cor-tema_lord_hades{--nome-cor:#9b94da;--nome-cor-grad:linear-gradient(90deg,#9b94da,#dadae8 50%,#a59bff)}
.nome-cor-tema_dragon_lord{--nome-cor:#e19a6d;--nome-cor-grad:linear-gradient(90deg,#e19a6d,#ffd2a0 50%,#ffaa50)}
.nome-cor-tema_firelord{--nome-cor:#f4925e;--nome-cor-grad:linear-gradient(90deg,#f4925e,#ffd782 50%,#ffbe50)}
.nome-cor-tema_darkness_dragon{--nome-cor:#b07cee;--nome-cor-grad:linear-gradient(90deg,#b07cee,#e1beff 50%,#cd5fff)}
.nome-cor-tema_fire_fenix{--nome-cor:#ffa165;--nome-cor-grad:linear-gradient(90deg,#ffa165,#ffe696 50%,#ffc85a)}
.nome-cor-tema_pegasus_celeste{--nome-cor:#9abff4;--nome-cor-grad:linear-gradient(90deg,#9abff4,#e8ecfa 50%,#f0d796)}
.nome-cor-tema_infernus{--nome-cor:#ee6d5a;--nome-cor-grad:linear-gradient(90deg,#ee6d5a,#ffaa78 50%,#ff6e28)}
.nome-cor-tema_arcanjo{--nome-cor:#a9d6fb;--nome-cor-grad:linear-gradient(90deg,#a9d6fb,#f5faff 50%,#ffecaa)}
.nome-cor-tema_solaris{--nome-cor:#fbc774;--nome-cor-grad:linear-gradient(90deg,#fbc774,#fff5d2 50%,#ffdc6e)}
.nome-cor-tema_lunaris{--nome-cor:#b0bcee;--nome-cor-grad:linear-gradient(90deg,#b0bcee,#e2e7ff 50%,#c8d7ff)}
.nome-cor-tema_arachne{--nome-cor:#c88bc8;--nome-cor-grad:linear-gradient(90deg,#c88bc8,#eccde4 50%,#c89673)}
.nome-cor-tema_kronos{--nome-cor:#dfb88b;--nome-cor-grad:linear-gradient(90deg,#dfb88b,#fae2b6 50%,#ffd282)}
.nome-cor-tema_heracles{--nome-cor:#e9bf8b;--nome-cor-grad:linear-gradient(90deg,#e9bf8b,#faecce 50%,#ffc878)}
span.nome-cor.nome-cor-tema{background:var(--nome-cor-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--nome-cor) 45%,transparent))}
.util-cor.nome-cor-tema i,.passe-cor.nome-cor-tema{background:var(--nome-cor-grad)}