/* =====================================================================
   MAGIC THE MINAS — folha de estilo 1.6
   =====================================================================

   POR QUE ESTE ARQUIVO NASCEU EM VEZ DE EU ESCREVER NO mtm-1.5.css
   ----------------------------------------------------------------
   O bug da tela do mercador ("abre já aberta e o FECHAR não fecha") não
   estava no PHP nem no JavaScript: estava no CACHE.

   O /sw.js guarda o mtm-1.5.css e procurava o arquivo com
   `cache.match(req, { ignoreSearch: true })`. O `ignoreSearch: true`
   manda IGNORAR o `?v=1.6.0` do endereço — ou seja, o número de versão
   que existe justamente para aposentar o arquivo velho era jogado fora
   na hora de procurar. Resultado: o navegador continuava lendo o CSS de
   antes da 1.6, que ainda não tinha a regra que esconde a lupa. Sem essa
   regra, o atributo `hidden` do HTML não vence o `display: grid` do CSS,
   e a caixa da carta fica na tela para sempre.

   O sw.js foi corrigido (ver o arquivo). Mas quem já tem o cache velho
   no aparelho só recebe a correção no carregamento seguinte. Um arquivo
   NOVO, com nome que nunca existiu, não está em cache nenhum — ele chega
   inteiro já na primeira vez. Por isso tudo o que é 1.6 mora aqui.

   E por isso, também, as classes daqui têm nomes próprios (lupa16,
   zig16, col16): se um dia esta folha não carregar, nada quebra — a
   lupa continua fechada, porque quem a fecha agora é o `style` que vem
   escrito no HTML, e não uma regra de CSS.

   O QUE TEM AQUI DENTRO
   ---------------------
     1. A LUPA DA CARTA ....... a carta grande no meio da tela
     2. O ZIGUEZAGUE .......... a porta de entrada, mascote e quadros
     3. A COLEÇÃO EM BLOCOS ... a coleção dividida como a do deck
     4. REMENDOS .............. o que conserta a folha velha
   ===================================================================== */


/* =====================================================================
   1. A LUPA DA CARTA
   =====================================================================
   Uma carta de Magic é feita para ser LIDA. A miniatura de 158px da
   banca serve para reconhecer, nunca para ler: o texto de regras — que é
   o que decide se aquela carta serve no seu deck — não cabe ali.

   A lupa é a carta no tamanho de leitura, no meio da tela, e ao LADO
   dela a ficha: nome, nome em português, linha de tipo, custo de mana,
   raridade, coleção, poder/resistência, o texto e o preço. À direita
   ficam as ações — comprar, quando é a barraca; a quantidade, quando é a
   coleção.
   ===================================================================== */

.lupa16 {
  position: fixed;
  inset: 0;
  z-index: 300;                 /* acima do cabeçalho (96) e do menu */
  display: none;                /* base; quem manda de verdade é o style
                                   inline escrito no HTML — ver o porquê
                                   no cabeçalho deste arquivo */
  align-items: center;
  justify-content: center;
  padding: clamp(.5rem, 2vw, 1.5rem);
  background: rgba(6, 12, 11, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lupa16-caixa {
  position: relative;
  width: min(100%, 980px);
  max-height: calc(100vh - 1.6rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(.9rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, var(--painel-2), var(--painel) 60%);
  border: 1px solid var(--borda-viva);
  border-top: 3px solid var(--ouro);
  border-radius: var(--raio);
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .95);
  overflow-y: auto;
  animation: lupa16-entra .26s cubic-bezier(.2, .9, .3, 1.15);
}

@media (min-width: 780px) {
  .lupa16-caixa {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    align-items: start;
  }
}

@keyframes lupa16-entra {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lupa16-caixa { animation: none; }
}

/* ---- a arte ---- */
.lupa16-arte {
  justify-self: center;
  width: min(330px, 72vw);
  border-radius: 14px;
  overflow: hidden;
  background: var(--fundo);
  aspect-ratio: 488 / 680;
  box-shadow: 0 0 0 2px var(--ouro), 0 26px 60px -20px rgba(0, 0, 0, .95);
}
.lupa16-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- a ficha, ao lado da arte ---- */
.lupa16-info { min-width: 0; display: flex; flex-direction: column; gap: .55rem; }

.lupa16-nome {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.15;
  margin: 0;
  padding-right: 2.2rem;        /* o X mora nesse canto */
}
.lupa16-ptbr {
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--menta);
  margin: -.25rem 0 0;
}
.lupa16-tipo {
  font-size: .88rem;
  color: var(--texto-fraco);
  margin: 0;
}
.lupa16-mana { display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; }

.lupa16-texto {
  white-space: pre-wrap;
  font-size: .92rem;
  line-height: 1.55;
  background: rgba(14, 26, 24, .8);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--menta);
  border-radius: var(--raio-p);
  padding: .7rem .85rem;
  max-height: 32vh;
  overflow-y: auto;
}

/* as especificações: pares curtos, em duas colunas, sem virar tabela */
.lupa16-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
  gap: .4rem;
  margin: 0;
}
.lupa16-ficha {
  background: var(--painel-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: .38rem .5rem;
  min-width: 0;
}
.lupa16-ficha dt {
  font: 600 .62rem/1.2 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0 0 .12rem;
}
.lupa16-ficha dd {
  margin: 0;
  font-size: .84rem;
  overflow-wrap: anywhere;
}
.lupa16-ficha.raro   dd { color: var(--ouro); }
.lupa16-ficha.mitico dd { color: var(--salmao); }

/* o preço e as ações */
.lupa16-preco {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .15rem;
}
.lupa16-preco b { font: 700 1.5rem/1 var(--cond); }
.lupa16-preco .rot {
  font: 600 .64rem/1 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* A ação principal ocupa o espaço; o FECHAR fica do tamanho dele, ao
   lado. Dois botões da mesma largura, um embaixo do outro, fazem o mago
   ler duas vezes para saber qual é qual. */
.lupa16-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .6rem;
}
.lupa16-acoes form { margin: 0; flex: 1 1 200px; }
.lupa16-acoes form .btn { width: 100%; }
.lupa16-acoes > .btn { flex: 0 0 auto; }
.lupa16-aviso {
  flex: 1 1 100%;
  margin: 0;
  font-size: .82rem;
  color: var(--salmao);
}

/* o X do canto: fecha, e é a primeira coisa que o teclado encontra */
.lupa16-x {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borda-viva);
  background: var(--painel-2);
  color: var(--texto);
  font: 400 1.2rem/1 var(--sans);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.lupa16-x:hover { background: var(--vermelho); color: #0E1A18; }
.lupa16-x:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }

/* a ficha guardada dentro do quadrinho da carta: o PHP já a desenha
   pronta, o JavaScript só a clona para dentro da lupa. Nada de montar
   HTML com texto solto — o que o servidor escreveu é o que aparece. */
.lupa-ficha[hidden] { display: none !important; }

/* o quadrinho que abre a lupa */
.abre-lupa { cursor: zoom-in; }


/* =====================================================================
   2. O ZIGUEZAGUE DA PORTA DE ENTRADA
   =====================================================================
   Antes o mascote ficava na MESMA LINHA do quadro, um ao lado do outro,
   os dois centrados: uma fileira reta de seis. Não era ziguezague — era
   uma tabela de duas colunas.

   Agora cada passo tem duas fileiras dentro dele:

        [        ] [ QUADRO ]         [ QUADRO ] [        ]
        [ MAGO ↗ ] [        ]         [        ] [ ↖ MAGO ]

   O quadro em cima, o mascote embaixo, cada um de um lado — a diagonal
   que você pediu. E como o lado troca a cada passo, a página desce em
   ziguezague de verdade.

   A pose do cajado acompanha o lado e é decidida no index.php: mascote à
   esquerda usa `diag-dir` (aponta para cima e para a direita), mascote à
   direita usa `diag-esq`. Ele nunca aponta para fora do quadro.
   ===================================================================== */

.zig16 {
  display: grid;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin: .6rem 0 var(--respiro);
}

.zig16-passo {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  position: relative;
}

.zig16-quadro {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--borda-viva);
  border-top: 3px solid var(--ouro);
  border-radius: var(--raio);
  padding: 1rem 1.15rem 1.05rem;
  box-shadow: var(--sombra);
}
.zig16-quadro h3 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  margin: 0 0 .4rem;
  padding-right: 2.6rem;        /* espaço do número */
}
.zig16-quadro p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.56;
  max-width: 56ch;              /* linha curta lê melhor */
}

/* o número do passo, no canto — dá ritmo à descida */
.zig16-num {
  position: absolute;
  top: .5rem;
  right: .7rem;
  font: 700 1.5rem/1 var(--cond);
  color: var(--ouro);
  opacity: .38;
  letter-spacing: .04em;
}

.zig16-mago { display: grid; place-items: center; }
.zig16-mago img {
  width: min(190px, 46vw);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .75));
}

@media (min-width: 760px) {
  /* As duas colunas não são iguais de propósito: quem lê é o quadro, e
     texto em coluna estreita cansa. O mago ocupa a coluna magra — ele
     precisa de espaço para ser visto, não para ser lido. A ordem das
     larguras inverte junto com o lado, senão o quadro cairia na coluna
     estreita nos passos espelhados. */
  .zig16-passo {
    grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
    column-gap: clamp(.8rem, 2vw, 1.8rem);
    row-gap: 0;
    align-items: start;
  }
  .zig16-passo.espelho { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); }

  /* PADRÃO — quadro em cima à direita, mago embaixo à esquerda */
  .zig16-passo .zig16-quadro { grid-column: 2; grid-row: 1; }
  .zig16-passo .zig16-mago   { grid-column: 1; grid-row: 2; }

  /* ESPELHADO — quadro em cima à esquerda, mago embaixo à direita */
  .zig16-passo.espelho .zig16-quadro { grid-column: 1; grid-row: 1; }
  .zig16-passo.espelho .zig16-mago   { grid-column: 2; grid-row: 2; }

  /* O mago sobe para dentro da altura do quadro. Sem isto ele desceria a
     linha inteira e a diagonal viraria uma escada com degrau de meio
     metro — muito buraco preto entre um passo e o outro. */
  .zig16-mago {
    margin-top: clamp(-6rem, -5vw, -3rem);
    align-self: start;
  }
  .zig16-mago img { width: min(230px, 100%); }

  /* O bico do quadro apontando para baixo, na direção do mago. É o mesmo
     desenho do balão de fala do mercador: um quadradinho girado 45°, com
     duas bordas, encostado na beirada. */
  .zig16-quadro::after {
    content: '';
    position: absolute;
    bottom: -9px;
    width: 16px;
    height: 16px;
    background: var(--painel);
    border-left: 1px solid var(--borda-viva);
    border-bottom: 1px solid var(--borda-viva);
    transform: rotate(45deg);
  }
  .zig16-passo .zig16-quadro::after         { left: 26px; }
  .zig16-passo.espelho .zig16-quadro::after { left: auto; right: 26px; }
}

/* No celular não existe "lado": vira uma coluna só, quadro e depois o
   mago, menor. A diagonal ali não caberia sem espremer o texto — mas o
   mago ainda encosta no lado de onde viria, para o ziguezague não sumir
   por completo na tela pequena. */
@media (max-width: 759px) {
  .zig16-mago img { width: 132px; }
  .zig16-quadro p { max-width: none; }
  .zig16-mago { justify-self: start; padding-left: 1.4rem; }
  .zig16-passo.espelho .zig16-mago { justify-self: end; padding-left: 0; padding-right: 1.4rem; }
}


/* =====================================================================
   3. A COLEÇÃO EM BLOCOS
   =====================================================================
   A coleção era uma tabela de cem linhas iguais: para achar as suas
   criaturas você lia o tipo de linha em linha. A lista do deck já tinha
   resolvido isso há tempos — blocos por tipo, em colunas — e é essa a
   divisão que a coleção passa a usar.

   A técnica é a MESMA da página do deck (`columns` do CSS, com
   `break-inside: avoid`), de propósito: as duas telas mostram a mesma
   coisa — cartas agrupadas por tipo — e devem se parecer. O que muda é o
   conteúdo da linha: aqui entra a miniatura da carta e o botão de mais e
   menos da coleção.

   Sobre a simetria: as colunas do CSS enchem de cima para baixo e
   fecham na mesma altura; com `break-inside: avoid` nenhum bloco é
   cortado ao meio. O bloco grande demais (quase sempre CRIATURAS) ganha
   permissão de quebrar, senão ele sozinho definiria a altura de todas
   as colunas — o mesmo remendo da página do deck.
   ===================================================================== */

.col16-colunas {
  columns: 1;
  column-gap: .9rem;
}
@media (min-width: 1000px) { .col16-colunas { columns: 2; } }
@media (min-width: 1500px) { .col16-colunas { columns: 3; } }
@media (min-width: 1900px) { .col16-colunas { columns: 4; } }

.col16-bloco {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;        /* o truque que faz o break-inside pegar no Chrome */
  width: 100%;
  margin: 0 0 .7rem;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.col16-bloco.bloco-grande {
  break-inside: auto;
  -webkit-column-break-inside: auto;
  page-break-inside: auto;
  display: block;
}

.col16-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .6rem;
  background: var(--painel-2);
  border-bottom: 1px solid var(--borda);
  font: 600 .72rem/1.3 var(--cond);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro);
}
.col16-cabeca .conta {
  color: var(--texto-fraco);
  letter-spacing: .06em;
}

.col16-lista { list-style: none; margin: 0; padding: .3rem; display: grid; gap: .18rem; }

.col16-linha {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .26rem .3rem;
  border-radius: var(--raio-p);
  min-height: 44px;             /* alvo de toque decente no celular */
}
.col16-linha:hover { background: var(--painel-2); }

.col16-mini {
  width: 38px;
  aspect-ratio: 488 / 680;
  border-radius: 3px;
  overflow: hidden;
  background: var(--fundo);
  border: 1px solid var(--borda);
  padding: 0;
  cursor: zoom-in;
}
.col16-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col16-mini:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }

.col16-nome {
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}
.col16-nome b {
  display: block;
  font: 600 .86rem/1.25 var(--sans);
  overflow-wrap: anywhere;
}
.col16-nome small {
  display: block;
  font-size: .72rem;
  color: var(--texto-fraco);
  overflow-wrap: anywhere;
}
.col16-nome:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }

.col16-mana { display: flex; gap: .1rem; flex-wrap: wrap; margin-top: .14rem; }

.col16-qtd { display: flex; align-items: center; gap: .18rem; }
.col16-qtd .btn { padding: .14rem .42rem; line-height: 1.1; }
.col16-qtd .n {
  min-width: 26px;
  text-align: center;
  font: 700 .95rem/1 var(--cond);
}

.col16-decks { display: flex; gap: .2rem; flex-wrap: wrap; margin-top: .2rem; }
.col16-decks .selo { font-size: .64rem; }

/* a barra de cima da coleção: filtro à esquerda, jeito de ver à direita */
.col16-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .8rem;
}
.col16-topo .crescer { flex: 1 1 180px; }
.col16-jeito { display: flex; gap: .3rem; margin-left: auto; }


/* =====================================================================
   4. REMENDOS DA FOLHA VELHA
   =====================================================================
   Enquanto houver aparelho com o CSS antigo em cache, estas regras
   chegam por aqui — este arquivo é novo e nenhum cache o tem.
   ===================================================================== */

/* A lupa do booster (booster.js) e a antiga da loja: escondida é
   escondida. Sem isto, `hidden` no HTML perde para o `display: grid`. */
.lupa-carta[hidden] { display: none !important; }
[hidden] { display: none !important; }

/* A arte do quadrinho da banca virou botão na 1.6; se a folha velha
   estiver em cache, o botão sai com cara de botão de formulário. */
.banca-item-abrir {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  font: inherit;
  color: inherit;
  background: var(--fundo);
  cursor: zoom-in;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}