/* ============================================================
   DESCRIÇÕES DOS PRODUTOS no sistema visual (12/10/2026)
   O HTML das descrições fica no painel da CentralCart (gravado pela API) e
   aparece no diálogo do produto e na página do produto, dentro do
   .centralcart-content. Cada descrição é um .dsc com a COR do produto em
   --dsc-cor (a cor que cada uma já tinha: o ciano da TAG 67, o roxo dos
   boosters...). O resto vem dos tokens --ln-*: funciona no escuro e no
   claro, e mudar o visual das descrições é mudar este arquivo.

   Leve de olhar (regra do dono, 12/10/2026): cada cartão é a PEÇA do
   sistema (fundo sólido + borda escura de 2px), sem a moldura de dentro —
   o diálogo em volta já tem a dele; o ícone é o quadradinho cheio na cor
   do produto, com o símbolo branco, como era. As CORES são as das descrições originais (pedido do
   dono, 12/10/2026: a paleta não muda): o cartão #30313A e o texto branco
   (tokens --ln-loja-modal-*, no tokens.css).

   O inventário do Minecraft (.sgmc…) e os outros widgets que algumas
   descrições trazem no próprio <style> ficam como estão: imitam o jogo de
   propósito. Só a caixa do aviso "Passe o mouse nos itens" (.sgmc-d) ganha a
   cara do aviso do sistema (no fim do arquivo); o ícone dele fica como era.
   ============================================================ */

.dsc {
  --dsc-cor: var(--ln-brand-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ln-text-fg); /* o branco das descrições originais */
  font-size: 0.9375rem;
  line-height: 1.6;
}
.dsc p { margin: 0; }
.dsc strong { color: var(--ln-text-fg); font-weight: 700; }

/* A pilha de cartões de dentro (ex.: os kits do VIP). */
.dsc-pilha { display: flex; flex-direction: column; gap: 12px; }

/* O CARTÃO: a peça do sistema, sem moldura. Os filhos ficam com 10px
   entre si; o título dá um respiro um pouco maior. */
.dsc-cartao {
  padding: 16px 18px;
  background: var(--ln-loja-modal-peca); /* o #30313A das descrições originais */
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-card);
}
/* (com o .dsc na frente: precisa vencer o ".dsc p { margin: 0 }" acima) */
.dsc .dsc-cartao > * { margin: 0; }
.dsc .dsc-cartao > * + * { margin-top: 10px; }
.dsc .dsc-cartao > .dsc-titulo + * { margin-top: 12px; }
/* Texto solto direto no cartão (um <span> sem parágrafo) ocupa a linha,
   pra receber o espaço como os outros blocos. */
.dsc .dsc-cartao > span { display: block; }

/* O título do cartão: escrita normal (sem caixa alta — pedido do dono,
   12/10/2026), na cor do produto, no peso que as descrições já usavam. */
.dsc-titulo {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--dsc-cor);
}
/* O subtítulo dentro do cartão (ex.: "Kit diário:"). */
.dsc-subtitulo { font-weight: 700; color: var(--dsc-cor); }

/* A LISTA com ícone: cada linha é o ícone + o texto, alinhados na 1ª linha
   (o ícone tem a altura de uma linha de texto: 24px). */
.dsc-lista { display: flex; flex-direction: column; gap: 8px; }
.dsc-item { display: flex; align-items: flex-start; gap: 10px; }
.dsc-item > :last-child { flex: 1; min-width: 0; }
.dsc-icone {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ln-radius-sm);
  /* As cores de antes (pedido do dono, 12/10/2026): o quadradinho cheio na
     cor do produto, com o símbolo branco. */
  background: var(--dsc-ic, var(--dsc-cor));
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

/* Texto com a cor do jogo (a tag SUPER em verde, o +50% em verde-limão...):
   a cor vem em --dsc-tx no próprio elemento. */
.dsc-cor { color: var(--dsc-tx); }
.dsc strong.dsc-cor { color: var(--dsc-tx); }
.dsc-apagado { color: var(--ln-text-muted); }
.dsc-legenda { font-size: 0.8125rem; color: var(--ln-text-muted); }
.dsc-rodape { font-size: 0.875rem; color: var(--ln-text-muted); }
.dsc-link {
  color: var(--ln-brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dsc-link:hover { color: var(--ln-text-fg); }

/* A NOTA ("💡 Dica: ..."): o aviso do sistema — a faixa de 3px à esquerda,
   depois da borda, na cor da nota (--dsc-tx) ou do produto. */
.dsc-nota {
  position: relative;
  padding: 10px 12px 10px 17px;
  background: color-mix(in srgb, var(--dsc-tx, var(--dsc-cor)) 10%, var(--ln-loja-modal-peca));
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
}
.dsc-nota::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 3px;
  border-radius: 1px;
  background: var(--dsc-tx, var(--dsc-cor));
}

/* IMAGENS e VÍDEO: a borda escura da peça, o raio do slot. */
.dsc-imagem {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
}
.dsc-bloco > .dsc-imagem { margin-top: 6px; }
.dsc-bloco + .dsc-bloco { margin-top: 12px; }
.dsc-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-card);
}
.dsc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ETIQUETAS (o que vem junto numa chave de brinde): o selo do sistema. */
.dsc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dsc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--ln-text-fg) 6%, var(--ln-loja-modal-peca));
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
  font-size: 0.875rem;
}

/* AMOSTRAS DE COR (as cores de um brilho), numa linha que quebra. */
.dsc-cores { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dsc-cores-item { display: inline-flex; align-items: center; gap: 6px; }
.dsc-amostra {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ln-outline);
  border-radius: 3px;
  background: var(--dsc-tx);
}

/* NO TEMA CLARO as cores do jogo (ciano, verde-limão...) somem no fundo
   branco: escurecem até ficar legíveis, sem perder o tom. */
:root[data-theme="light"] .dsc-titulo,
:root[data-theme="light"] .dsc-subtitulo { color: color-mix(in srgb, var(--dsc-cor) 55%, #0f172a); }
:root[data-theme="light"] .dsc-icone { background: color-mix(in srgb, var(--dsc-ic, var(--dsc-cor)) 80%, #0f172a); }
:root[data-theme="light"] .dsc-cor,
:root[data-theme="light"] .dsc strong.dsc-cor { color: color-mix(in srgb, var(--dsc-tx) 55%, #0f172a); }

/* O AVISO "Passe o mouse nos itens" do inventário (.sgmc-d, desenhado no
   <style> da própria descrição) com a cara do aviso do sistema: a peça, o
   ícone num slot liso âmbar. Os !important respondem aos !important do
   <style> de lá (a letra branca dele sumia no tema claro). */
/* Entre os cartões (ex.: VIP), o espaço é o gap do .dsc: margem zero. DENTRO
   de um cartão (ex.: Créditos, Chaves), 12px depois do título e antes do
   inventário — a caixa do inventário traz margem inline e não recebe o
   espaço do cartão (o aviso ficava grudado nela; o dono viu, 12/10/2026). */
.dsc .dsc-cartao > .sgmc-d { margin: 12px 0 !important; }
.dsc .dsc-cartao > .sgmc-d:last-child { margin-bottom: 0 !important; }
.dsc .sgmc-d {
  margin: 0 !important;
  padding: 10px 14px 10px 12px;
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-card);
  background: color-mix(in srgb, var(--ln-loja-destaque) 12%, var(--ln-loja-modal));
}
/* (o ícone dele — o quadrado laranja com a setinha branca — fica como era) */
.dsc .sgmc-d > p { color: var(--ln-text-fg) !important; }
.dsc .sgmc-d strong { color: var(--ln-loja-destaque-texto) !important; }