/* Loja — moedas, decorações de avatar e cor do nick (nametag). */

.loja-moeda-botao { display: flex; align-items: center; gap: 6px; }
.loja-moeda-icone { font-size: 15px; }

.loja-secao { margin-bottom: 28px; }
.loja-secao h3 { color: #9dc2ff; font-size: 15px; margin-bottom: 12px; }
.loja-busca-input {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 14px;
  padding: 10px 14px; border: 1px solid #2d4470; border-radius: 8px;
  background: #0d1424; color: #f4f6ff; font-size: 14px;
}
.loja-busca-input::placeholder { color: #7b849c; }

.loja-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) {
  .loja-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .loja-grade { grid-template-columns: repeat(2, 1fr); }
}

/* Menu principal da loja: Nametags / Decorações de perfil / Roleta. */
.loja-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 8px; }
@media (max-width: 720px) {
  .loja-menu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .loja-menu { grid-template-columns: 1fr; }
}

.loja-sub-voltar { margin-bottom: 18px; border: 0; padding: 0; color: #7db4ff; background: transparent; cursor: pointer; font-size: 13px; }
.loja-sub-voltar:hover { text-decoration: underline; }

/* Pré-visualização (nametag ou decoração sobre o avatar). */
.loja-preview {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border: 1px solid #20293f; border-radius: 14px; padding: 20px;
  background: #0d1526; margin-bottom: 20px;
}
.loja-preview-titulo { color: #7d859c; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.loja-preview-cor-texto,
#loja-preview-cor-texto { font-size: 22px; font-weight: bold; }
.loja-preview-avatar-box { position: relative; width: 96px; height: 96px; display: inline-block; }
.loja-preview-avatar-img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #1c2c4a; }
.loja-preview-decoracao-img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: contain; pointer-events: none; }
.loja-preview-nome { color: #c9ccda; font-size: 13px; }

/* Cards de item (cor ou decoração). */
.loja-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid #20293f; border-radius: 14px; padding: 14px;
  background: #111a2e; text-align: center; cursor: pointer;
}
.loja-item:hover { border-color: #3b82f6; }
.loja-item.equipado { border-color: #4c8cff; box-shadow: 0 0 0 1px #4c8cff inset; }

.loja-preco-botao { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.loja-preco-botao:disabled { opacity: 0.45; cursor: default; }

/* Decoração fica parada por padrão; anima só com o mouse em cima (o CDN da
   Discord só anima em .png/APNG — trocamos por opacidade pra não recarregar
   a imagem toda vez, evitando piscar). */
.loja-item-imgbox { position: relative; width: 64px; height: 64px; display: inline-block; }
.loja-item-img { position: absolute; inset: 0; width: 64px; height: 64px; object-fit: contain; }
.loja-item-img-parada { opacity: 1; transition: opacity 0.15s ease; }
.loja-item-img-animada { opacity: 0; transition: opacity 0.15s ease; }
.loja-item:hover .loja-item-img-parada { opacity: 0; }
.loja-item:hover .loja-item-img-animada { opacity: 1; }
.loja-item-nome { font-size: 12px; color: #c9ccda; }
.loja-cor-amostra-box { position: relative; display: inline-block; width: 32px; height: 32px; }
.loja-cor-amostra { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #2d4470; display: inline-block; }
.loja-fonte-amostra { display: grid; place-items: center; min-height: 32px; font-size: 20px; color: #f4f6ff; }

/* Selo "Em uso" sobre a miniatura de quem está equipado no momento. */
.loja-badge-equipado {
  position: absolute; top: -8px; right: -10px; z-index: 1;
  background: #2f6fe0; color: #f4f6ff; font-size: 9px; font-weight: bold;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

.loja-paginacao { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.loja-paginacao-info { color: #aeb2c7; font-size: 13px; }
.loja-paginacao button:disabled { opacity: 0.4; cursor: default; }

/* Roleta da sorte. */
.loja-roleta-area { position: relative; width: 260px; height: 260px; margin: 12px auto 20px; }
.loja-roleta-ponteiro {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 20px solid #f4f6ff; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.loja-roleta-roda {
  width: 260px; height: 260px; border-radius: 50%;
  border: 4px solid #2d4470; box-shadow: 0 0 0 2px #0d1526 inset, 0 8px 24px rgba(0,0,0,0.4);
  position: relative;
  background: conic-gradient(from 0deg,
    #ffd36a 0% 15%,
    #7ddea3 15% 25%,
    #ff8a8a 25% 45%,
    #c9a6ff 45% 55%,
    #ff8a8a 55% 75%,
    #7ddea3 75% 85%,
    #ffd36a 85% 100%
  );
  transform: rotate(0deg);
}
.loja-roleta-cubo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #111a2e; border: 3px solid #2d4470;
}
.loja-roleta-label {
  position: absolute; top: 50%; left: 50%;
  font-size: 13px; font-weight: bold; color: #111a2e;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  pointer-events: none; white-space: nowrap;
}

.loja-roleta-legenda { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.loja-roleta-legenda li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c9ccda; }
.loja-roleta-cor { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex-shrink: 0; }

.loja-roleta-aposta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.loja-roleta-valor { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: bold; min-width: 90px; justify-content: center; }
.loja-roleta-girar-btn { display: block; width: 100%; max-width: 260px; margin: 0 auto; padding: 12px; font-size: 15px; }
.loja-roleta-girar-btn:disabled { opacity: 0.5; cursor: default; }
.loja-roleta-allin-btn { display: block; width: 100%; max-width: 260px; margin: 8px auto 0; padding: 10px;
  font-size: 14px; border-color: #ff8a8a; color: #ffb3b3; }
.loja-roleta-allin-btn:disabled { opacity: 0.45; cursor: default; }
.loja-roleta-resultado { text-align: center; margin-top: 14px; font-size: 14px; min-height: 20px; color: #85e0ae; }
.loja-roleta-resultado.perda { color: #ff8a8a; }

/* Cor de nick animada — cicla o matiz continuamente. */
.nick-arco-iris {
  background-image: linear-gradient(90deg, #ff5b5b, #ffd36a, #7ddea3, #5b9dff, #c9a6ff, #ff5b5b);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  /* !important: cabeçalho (#auth-nome), ranking e placares definem cor fixa
     com prioridade maior e apagavam o gradiente. */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: loja-arco-iris 4s linear infinite;
}

/* Fontes do nick (loja). Só famílias de sistema/genéricas: fontes externas
   não carregam dentro da Activity do Discord. */
.nick-fonte-negrito { font-weight: 900 !important; }
.nick-fonte-italico { font-style: italic !important; }
.nick-fonte-mono { font-family: "Courier New", Consolas, monospace !important; }
.nick-fonte-serifa { font-family: Georgia, "Times New Roman", serif !important; }
.nick-fonte-cursiva { font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive !important; }
.nick-fonte-impacto { font-family: Impact, "Arial Black", sans-serif !important; letter-spacing: .02em; }
.nick-fonte-versalete { font-variant: small-caps !important; letter-spacing: .05em; }
.nick-fonte-espacada { letter-spacing: .18em !important; text-transform: uppercase; }
@keyframes loja-arco-iris {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}