/* ==========================================================================
   Magic the Minas · símbolos de mana em imagem  ·  versão 1.4
   Carregado depois do app.css, no topo.php. Não mexe em nenhum .php.

   ITEM 5.6 — UM CAMINHO SÓ
   ------------------------
   Antes conviviam TRÊS caminhos para a mesma coisa:

     pip-imagem.css  →  /img/mana/W.png
     simbolos.php    →  /assets/img/mana/W22.png
     deck.php        →  /assets/img/W.png        (esse nem existe no servidor,
                                                  e por isso a curva de cor
                                                  caía sempre na letra)

   Agora tudo mora em /assets/img/mana/, que é onde o simbolos.php já
   apontava e onde os arquivos de fato estão. A pasta /img/mana/ vira
   sobra e pode ser apagada do servidor.

   Cuidado que vale lembrar: como este arquivo zera a borda e o fundo do
   .pip (background:none), se o PNG não estiver no lugar o símbolo não
   vira bolinha — ele simplesmente SOME. Por isso o caminho único importa.

   São DUAS famílias de bolinha no site, por isso duas partes aqui:
     .pip   → identidade de cor do deck   (painel, decks, deck, cartas)
     .mana  → custo de mana da carta      (coleção, deck, conferência da lista)
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1) .pip — identidade de cor  ·  painel.php, decks.php, deck.php, cartas.php
   --------------------------------------------------------------------------- */
.pip{
  display:inline-block;
  width:15px;                    /* a imagem precisa de mais espaço que a bolinha */
  height:15px;
  vertical-align:-3px;           /* alinha com a linha de texto */
  margin-right:2px;

  /* apaga o círculo desenhado por CSS */
  background:none no-repeat center/contain;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.pip-W{background-image:url('/assets/img/mana/W.png')}   /* branco   · sol      */
.pip-U{background-image:url('/assets/img/mana/U.png')}   /* azul     · gota     */
.pip-B{background-image:url('/assets/img/mana/B.png')}   /* preto    · caveira  */
.pip-R{background-image:url('/assets/img/mana/R.png')}   /* vermelho · fogo     */
.pip-G{background-image:url('/assets/img/mana/G.png')}   /* verde    · árvore   */

/* Incolor não tem símbolo entre os cinco. Sem esta linha ele sumiria,
   porque o background:none lá em cima apaga a cor que vinha do app.css.
   Fica a bolinha — mas com a MESMA altura das outras, senão a linha
   desalinha (era o que o item 5.6 pedia no fim). */
.pip-C{
  background-color:var(--mana-c);
  border-radius:50%;
}


/* ---------------------------------------------------------------------------
   2) .mana — custo da carta ({2}{U}{B})
      colecao.php · deck.php · deck-novo.php (conferência da lista)

      Só as cinco cores viram imagem. Genérico ({2}, {X}), incolor ({C}),
      virar ({T}) e híbrido continuam a bolinha cinza com a letra dentro —
      não existe imagem para eles no pacote. O importante é que a bolinha
      tenha o mesmo tamanho do PNG, para a linha do deck não dançar.
   --------------------------------------------------------------------------- */
.mana-w,.mana-u,.mana-b,.mana-r,.mana-g{
  background:none no-repeat center/contain;
  font-size:0;                   /* some com a letra que fica dentro do círculo */
}

.mana-w{background-image:url('/assets/img/mana/W.png')}
.mana-u{background-image:url('/assets/img/mana/U.png')}
.mana-b{background-image:url('/assets/img/mana/B.png')}
.mana-r{background-image:url('/assets/img/mana/R.png')}
.mana-g{background-image:url('/assets/img/mana/G.png')}

/* Híbrido e genérico: bolinha, mesma altura, letra legível. */
.mana-wu,.mana-ub,.mana-br,.mana-rg,.mana-gw,
.mana-wb,.mana-ur,.mana-bg,.mana-rw,.mana-gu,
.mana-x,.mana-y,.mana-z,.mana-t,.mana-q,.mana-c,.mana-s{
  width:17px; height:17px;
  vertical-align:middle;
}

/* Em tela de alta densidade (celular novo, notebook retina) o navegador
   pega o arquivo grande sozinho — os dois existem na mesma pasta. */
@media (min-resolution: 2dppx) {
  .pip-W{background-image:url('/assets/img/mana/W256.png')}
  .pip-U{background-image:url('/assets/img/mana/U256.png')}
  .pip-B{background-image:url('/assets/img/mana/B256.png')}
  .pip-R{background-image:url('/assets/img/mana/R256.png')}
  .pip-G{background-image:url('/assets/img/mana/G256.png')}
}


/* ---------------------------------------------------------------------------
   A ÁRVORE FINAL DE IMAGENS DE MANA NO SERVIDOR
   (é esta, e só esta — o resto pode sair)

     public_html/assets/img/mana/W.png     U.png     B.png     R.png     G.png
     public_html/assets/img/mana/W22.png   U22.png   B22.png   R22.png   G22.png
     public_html/assets/img/mana/W256.png  U256.png  B256.png  R256.png  G256.png

     22  → ícone do menu (simbolos.php)
     sem sufixo → uso geral: .pip, .mana, curva de cor do deck
     256 → tela de alta densidade e qualquer coisa grande que venha depois
   --------------------------------------------------------------------------- */