/* ==============================================================================
   MAGIC THE MINAS · 1.5 — CABEÇALHO, MENU, LOJA, BAÚ, BOOSTERS E O RESTO
   Substitui o mtm-1.4.css e o mtm-1.3.css (pode apagar os dois do servidor).
   Cores, fontes e medidas vêm das variáveis do app.css.
   Nada aqui usa !important sem motivo: a briga de especificidade é ganha
   no seletor.
   ============================================================================== */

:root {
  /* ---- o cabeçalho cresceu (item 2.1 do pacote 1.4) ------------------
     A logo foi de 48 para 64px e a linha de 68 para 88px. A foto do mago
     acompanhou (38 → 44px) e a folga do SAIR também (28 → 34px), senão o
     botão ficaria colado no nome. */
  --topo-altura: 88px;        /* era 68px */
  --topo-logo:   64px;        /* era 48px */
  --topo-foto:   44px;        /* era 38px */
  --topo-folga-sair: 34px;    /* era 28px */
}

/* a linha única: [logo] [menu] .......... [chip do mago] [SAIR] */
.topo-linha {
  height: var(--topo-altura);
  /* 1.4rem de cada lado: o SAIR passa a respirar dos DOIS lados,
     não só do esquerdo (item 2.5). */
  padding: 0 1.4rem;
  gap: 1.1rem;
  flex-wrap: nowrap;
}

/* a logo nunca fica acima do menu — os dois dividem a mesma linha */
.marca { align-self: center; }
.marca img { height: var(--topo-logo); width: auto; }

/* ------------------------------------------------------------------ o menu */
/* Dentro da topo-linha o menu perde a largura e o respiro que tinha sozinho. */
.topo-linha .menu {
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  /* O espaçamento aperta DENTRO do cabeçalho. Fora dele o menu tem a
     linha inteira e pode respirar; aqui ele divide espaço com a logo de
     64px e com o chip do mago, e cada 0,1rem a mais em onze links vira
     uma aba cortada no fim — que era o que acontecia com a sua conta de
     arquimago, a única que tem IMAGENS e ARQUIMAGO no menu. */
  gap: .3rem .5rem;

  /* ====================================================================
     ATENÇÃO — NÃO PONHA `overflow` DE VOLTA AQUI.
     ====================================================================
     A 1.4 tinha `overflow-x: auto; overflow-y: hidden` nesta regra, para
     as ONZE abas rolarem por dentro em vez de estourar o cabeçalho. Com
     o MENU da 1.5 isso virou um bug grave, e eu só achei porque tirei um
     print da tela: o painel do MENU é `position: absolute` ancorado no
     botão, que mora DENTRO deste elemento — e `overflow-y: hidden`
     RECORTA o painel na altura da barra. Resultado: o menu abria e não
     aparecia nada. As medidas não pegam isso (getBoundingClientRect
     devolve a caixa sem o recorte); só o olho pega.

     Agora são três abas mais o botão: elas cabem sem rolar em qualquer
     tela até 430px (medido). A rolagem volta só abaixo de 620px, na
     regra lá embaixo — e lá o painel é `position: fixed`, que se ancora
     na janela e escapa de qualquer recorte.
     ==================================================================== */
  overflow: visible;
  scrollbar-width: none;
}
.topo-linha .menu::-webkit-scrollbar { display: none; }

/* Abaixo de 620px as abas voltam a rolar por dentro — e aqui é seguro,
   porque nesta faixa o painel do MENU é `position: fixed`. */
@media (max-width: 620px) {
  .topo-linha .menu { overflow-x: auto; overflow-y: hidden; }
}
.topo-linha .menu-grupo { flex-wrap: nowrap; gap: .1rem; }
.topo-linha .menu a {
  white-space: nowrap;
  padding: .35rem .45rem;
  letter-spacing: .05em;
  gap: .3rem;
}
/* 1.5 — O CABEÇALHO EMAGRECEU.
   Na 1.4 havia onze abas em linha, e a 1.4 precisou de dois degraus de
   compressão e de um esmaecido na borda para elas caberem. Agora são
   TRÊS abas mais o botão MENU: sobra espaço em qualquer tela, e nada
   disso é mais necessário. Ficou só o respiro. */
.topo-linha .menu { gap: .3rem .7rem; }
.topo-linha .menu a { padding: .35rem .6rem; letter-spacing: .07em; }
@media (min-width: 1500px) {
  .topo-linha .menu { gap: .3rem .9rem; }
  .topo-linha .menu a { padding: .35rem .7rem; letter-spacing: .08em; }
}

/* ------------------------------------------------------------- chip do mago */
.topo .mago-chip {
  margin-left: auto;
  flex: 0 0 auto;
  gap: .6rem;
}

/* a foto: qualquer imagem que o mago mandar encaixa sem esticar e sem vazar */
.topo .mago-foto {
  width: var(--topo-foto);
  height: var(--topo-foto);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
.topo .mago-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* com o recorte redondo o aviso desce para dentro do círculo */
.topo .mago-foto .badge {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  min-width: 16px;
  height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: .62rem;
  line-height: 14px;
}

.topo .mago-id { line-height: 1.15; min-width: 0; }
.topo .mago-linha {
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

/* a folga que o dono pediu antes do SAIR, e agora também depois dele */
.topo .mago-chip .mago-id + .btn { margin-left: var(--topo-folga-sair); }
.topo .mago-chip > .btn:last-child { margin-right: .25rem; }

/* ==============================================================================
   EMBLEMA DO NÍVEL — a arte que vem depois do nome do mago
   ============================================================================== */
.emblema {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex: none;
}
.emblema-p { width: 24px; height: 24px; }
.emblema-m { width: 40px; height: 40px; }
.emblema-g { width: 64px; height: 64px; }

/* enquanto a arte não sobe, entra o selo com o número */
.emblema-num {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  flex: none;
  border-radius: 50%;
  background: var(--painel-2);
  border: 1px solid var(--borda-viva);
  color: var(--ouro);
  font-family: var(--cond);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.emblema-num.emblema-p { width: 24px; height: 24px; font-size: .72rem; }
.emblema-num.emblema-m { width: 40px; height: 40px; font-size: 1.05rem; }
.emblema-num.emblema-g { width: 64px; height: 64px; font-size: 1.6rem; }

/* o arquimago (21) tem borda de ouro para se distinguir dos vinte */
.emblema-arquimago { filter: drop-shadow(0 0 4px rgba(199,146,70,.55)); }

/* no cabeçalho o emblema fica quieto — quem pulsa é a aba CONQUISTAS */
.topo .emblema,
.topo .emblema-num { animation: none; }

/* ==============================================================================
   MASCOTE INDAWORA
   ============================================================================== */
.mascote {
  display: block;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}
.mascote-painel { height: clamp(130px, 13vw, 200px); }
.mascote-inicio { height: clamp(160px, 16vw, 240px); align-self: center; }

/* no painel ele fica no canto esquerdo, colado no "Salve, fulano" */
.cabeca .mascote-painel + div { margin-right: auto; }

/* na inicial ele fica ao lado dos passos de "Como começar" */
.comeco-linha {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
}
.comeco-linha .passos { flex: 1 1 auto; min-width: 0; }

/* o índice do manual gruda logo abaixo do cabeçalho novo */
.manual-indice { top: calc(var(--topo-altura) + 16px); }

/* ==============================================================================
   TELAS ESTREITAS — o cabeçalho encolhe em dois degraus
   O menu só cai para a segunda linha abaixo de 900px; acima disso a logo
   e o menu continuam na MESMA linha, como o dono pediu.
   ============================================================================== */
@media (max-width: 1100px) {
  :root { --topo-logo: 56px; --topo-altura: 80px; --topo-folga-sair: 22px; }
}
@media (max-width: 900px) {
  :root { --topo-logo: 52px; --topo-altura: 74px; --topo-foto: 40px; }
  .topo-linha {
    height: auto;
    min-height: var(--topo-altura);
    flex-wrap: wrap;
    padding: .5rem 1rem;
    row-gap: .4rem;
  }
  .topo-linha .menu {
    order: 3;
    flex: 1 0 100%;
  }

  /* em celular o mascote só atrapalharia */
  .mascote { display: none; }
  .comeco-linha { display: block; }
}
@media (max-width: 700px) {
  :root { --topo-logo: 42px; --topo-altura: 64px; --topo-foto: 36px; }
}

/* =====================================================================
   CONQUISTAS
   ===================================================================== */

/* O bloco de cima esconde pedaços conforme a conquista escolhida.
   .conq-partes é grid no app.css, então [hidden] precisa de reforço. */
#lib-partes[hidden],
#lib-frase[hidden],
.tela-conq-btn[hidden] { display: none !important; }

/* ------------------------------------------------ frase de sabor ---- */
.casa-frase {
  font: 400 .74rem/1.25 var(--serif);
  color: var(--texto-fraco);
  font-style: italic;
  margin: -.1rem .1rem .15rem;
  overflow-wrap: break-word;
}
.conq-frase {
  font: 400 .95rem/1.35 var(--serif);
  font-style: italic;
  color: var(--menta);
  margin: 0 0 .35rem;
  overflow-wrap: break-word;
}

/* ------------------------------- casas que abrem o bloco de cima ---- */
.casa.abrivel { cursor: pointer; transition: border-color .15s, transform .15s; }
.casa.abrivel:hover { border-color: var(--ouro); transform: translateY(-2px); }
.casa.abrivel:focus-visible {
  outline: 2px solid var(--menta);
  outline-offset: 2px;
}
.casa.selecionada {
  border-color: var(--ouro);
  box-shadow: inset 0 0 0 1px rgba(199,146,70,.45), 0 0 0 2px rgba(199,146,70,.18);
  background: linear-gradient(180deg, rgba(199,146,70,.10), transparent 60%), var(--painel-2);
}
.casa.selecionada .casa-nome { color: var(--ouro); }

/* Bloqueada e aguardando não abrem: nem cursor, nem foco. */
.casa.bloqueada, .casa.aguardando { cursor: default; }

/* ---------------------------------------------------------------------
   ITEM 3.4 — A SILHUETA DAS BLOQUEADAS  (opção (b), que você aprovou)

   A conquista bloqueada continua no quadro, mas apagada: só o contorno,
   o emblema em sombra e o "???" quando ela ainda está em segredo. Some
   por completo tirava do mago a noção de quanto falta; a silhueta dá o
   objetivo sem entregar o conteúdo.
   --------------------------------------------------------------------- */
.casa.bloqueada,
.casa.aguardando {
  border-color: rgba(39,59,55,.55);
  background: rgba(21,35,34,.35);
  box-shadow: none;
}
.casa.bloqueada .selo-emb,
.casa.aguardando .selo-emb {
  border-color: rgba(56,82,76,.45);
  background: rgba(14,26,24,.6);
}
/* a arte vira vulto: cinza, escura e quase transparente */
.casa.bloqueada .selo-emb img,
.casa.aguardando .selo-emb img {
  filter: grayscale(1) brightness(.35) contrast(.8);
  opacity: .38;
}
.casa.bloqueada .selo-emb .num,
.casa.aguardando .selo-emb .num { color: rgba(56,82,76,.7); }

.casa.bloqueada .casa-nome,
.casa.aguardando .casa-nome { color: rgba(138,154,147,.6); font-weight: 500; }
.casa.bloqueada .casa-pe,
.casa.aguardando .casa-pe { color: rgba(138,154,147,.45); }

/* bloqueada não tem frase de sabor — o PHP nem imprime, isto é o cinto */
.casa.bloqueada .casa-frase { display: none; }

/* o cadeado, discreto */
.casa.bloqueada::after {
  content: '🔒';
  position: absolute; top: .55rem; right: .6rem;
  font-size: .78rem; opacity: .4; filter: grayscale(1);
}
/* a que está só esperando o prazo ganha ampulheta, não cadeado */
.casa.aguardando::after {
  content: '⏳';
  position: absolute; top: .55rem; right: .6rem;
  font-size: .78rem; opacity: .5; filter: grayscale(1);
}

/* -------------------------------------------------- sua trilha ------ */
.sua-trilha {
  display: flex; align-items: flex-start; gap: .8rem;
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid var(--borda);
}
.sua-trilha-emb { flex: 0 0 auto; display: inline-flex; align-items: center; }
.sua-trilha-txt { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.sua-trilha-rotulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--ouro);
}
.sua-trilha-nome { font-family: var(--serif); font-size: 1rem; }
.sua-trilha-desc {
  font-size: .85rem; color: var(--texto-fraco); overflow-wrap: break-word;
}
.sua-trilha-prog {
  font-family: var(--cond); font-variant-numeric: tabular-nums;
  font-size: .85rem; letter-spacing: .06em; color: var(--menta);
}

/* ---------------------------------------------------------------------
   ITEM 3.3 — "O QUE FEZ" NO CELULAR
   Antes a coluna sumia (display:none) e a informação ia embora. Agora
   ela EMPILHA: no celular a tabela vira uma lista de blocos, e a frase
   aparece em linha menor logo abaixo do nome da conquista.
   --------------------------------------------------------------------- */
.col-oque-fez { font-size: .86rem; }

@media (max-width: 700px) {
  .tabela-historico thead { display: none; }
  .tabela-historico tbody tr {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .1rem .6rem;
    padding: .6rem .2rem;
    border-bottom: 1px solid rgba(39,59,55,.5);
  }
  .tabela-historico tbody tr:hover { background: none; }
  .tabela-historico td { border: 0; padding: 0; }

  /* nível: ocupa as duas linhas da esquerda */
  .tabela-historico .col-nivel { grid-row: 1 / span 3; align-self: start; padding-top: .1rem; }
  .tabela-historico .col-nome  { grid-column: 2; font-size: .95rem; }
  .tabela-historico .col-oque-fez {
    grid-column: 2;
    display: block;                 /* deixa de sumir */
    font-size: .8rem; line-height: 1.35;
    color: var(--texto-fraco);
    font-style: italic;
  }
  .tabela-historico .col-quando {
    grid-column: 2; text-align: left;
    font-family: var(--cond); font-size: .74rem; letter-spacing: .06em;
    color: var(--borda-viva); margin-top: .15rem;
  }
}

/* --------------------------------- tela de conquista alcançada ------ */
.tela-conq {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(8,14,13,.78);
  backdrop-filter: blur(3px);
}
.tela-conq-palco {
  display: flex; align-items: flex-end; gap: 1rem;
  max-width: 100%;
  animation: conq-sobe .35s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes conq-sobe { from { transform: translateY(16px) scale(.96); opacity: 0; } }

/* O mascote fica sempre no canto esquerdo. */
.tela-conq-mascote {
  flex: 0 0 auto; order: -1;
  height: clamp(180px, 24vw, 280px); width: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.65));
}

.tela-conq-balao {
  position: relative;
  max-width: min(92vw, 340px);   /* o texto não vaza */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  background: var(--painel);
  border: 1px solid var(--ouro);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
}
/* biquinho do balão apontando para o mascote */
.tela-conq-balao::before {
  content: ''; position: absolute; left: -9px; bottom: 34px;
  width: 16px; height: 16px; transform: rotate(45deg);
  background: var(--painel);
  border-left: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro);
}
.tela-conq-rotulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; color: var(--menta); margin-bottom: .2rem;
}
.tela-conq-balao h2 {
  color: var(--ouro); margin: 0 0 .35rem; font-size: 1.35rem; line-height: 1.15;
  overflow-wrap: break-word;
}
.tela-conq-frase {
  font-family: var(--serif); font-style: italic;
  margin: 0 0 .5rem; overflow-wrap: break-word;
}
.tela-conq-parabens {
  font-size: .9rem; color: var(--texto-fraco);
  margin: 0; overflow-wrap: break-word;
}
.tela-conq-btn { margin-top: .9rem; }

@media (max-width: 640px) {
  .tela-conq-palco { flex-direction: column; align-items: center; gap: .4rem; }
  .tela-conq-mascote { height: 160px; align-self: flex-start; }
  .tela-conq-balao::before { left: 28px; bottom: auto; top: -9px;
    border-left: 1px solid var(--ouro); border-bottom: none;
    border-top: 1px solid var(--ouro); }
}

/* ------------------------------------- quem não quer movimento ------ */
@media (prefers-reduced-motion: reduce) {
  .tela-conq-palco { animation: none; }
  .casa.abrivel { transition: none; }
  .casa.abrivel:hover { transform: none; }
  .conq-aberta .conq-emblema,
  .casa.liberada .selo-emb { animation: none; }
}

/* ==============================================================================
   DECKS: LISTA COMPACTA E OS DOIS GRÁFICOS DE MANA
   ============================================================================== */

/* ------------------------------------------------------------ lista do deck */
/* Os blocos de tipo se espalham em colunas quando a tela deixa.
   Item 5.4: apertei column-gap para .9rem e min-height para 30px, como
   pedido, e liberei o bloco CRIATURAS a quebrar entre colunas — é ele que
   estragava a distribuição num deck grande. */
.cartao-lista .lista-deck {
  columns: 1;
  column-gap: .9rem;
}
@media (min-width: 1000px) { .cartao-lista .lista-deck { columns: 2; } }
@media (min-width: 1500px) { .cartao-lista .lista-deck { columns: 3; } }
@media (min-width: 1900px) { .cartao-lista .lista-deck { columns: 4; } }

/* nenhum bloco é cortado ao meio entre duas colunas... */
.cartao-lista .bloco-tipo {
  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 .5rem;
}
/* ...com UMA exceção: o bloco muito grande pode quebrar, senão ele
   sozinho decide a altura de todas as colunas. */
.cartao-lista .bloco-tipo.bloco-grande {
  break-inside: auto;
  -webkit-column-break-inside: auto;
  page-break-inside: auto;
  display: block;
}

.cartao-lista .bloco-tipo-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: var(--cond); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; color: var(--ouro);
  background: var(--painel-2);
  border-radius: var(--raio-p);
  margin: 0 0 .1rem;
  padding: .22rem .45rem;
  line-height: 1.25;
}
.cartao-lista .bloco-tipo-qtd { color: var(--texto-fraco); letter-spacing: .06em; }

.cartao-lista .linhas { list-style: none; margin: 0; padding: 0; }

/* A linha: [− qtd +] [nome] [mana] [tenho/falta ★] */
.cartao-lista .linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 .35rem;
  min-height: 30px;
  padding: .1rem .2rem;
  border-bottom: 1px solid rgba(39, 59, 55, .5);
}
.cartao-lista .linha:hover { background: var(--painel-2); border-radius: 4px; }

/* menos / quantidade / mais */
.cartao-lista .cel-qtd { display: flex; align-items: center; gap: .18rem; }
.cartao-lista .cel-qtd .btn-p {
  padding: 0 .32rem;
  min-width: 22px; min-height: 24px;
  font-size: .85rem; line-height: 1;
  border-radius: 4px;
  touch-action: manipulation;
}
.cartao-lista .qtd-num {
  display: inline-block; min-width: 17px;
  text-align: center; font-variant-numeric: tabular-nums;
  font-size: .86rem;
}

/* nome — pode quebrar em duas linhas, mas nunca é cortado */
.cartao-lista .cel-nome {
  min-width: 0;
  font-size: .87rem; line-height: 1.2;
  overflow-wrap: anywhere;
}
.cartao-lista .cel-nome .nome-ptbr { font-size: .76rem; }

/* símbolos de mana menores, sempre na mesma linha */
.cartao-lista .cel-mana { white-space: nowrap; }
.cartao-lista .cel-mana .mana {
  width: 15px; height: 15px; margin-right: 1px; font-size: 9px;
}

/* a marca TENHO / FALTA e a estrelinha de comandante */
.cartao-lista .cel-marca {
  display: flex; align-items: center; gap: .2rem;
  justify-content: flex-end; white-space: nowrap;
}
.cartao-lista .cel-marca .selo {
  padding: .04rem .34rem; font-size: .66rem; letter-spacing: .05em;
}
.cartao-lista .forma-estrela { display: inline; margin: 0; }
.cartao-lista .forma-estrela .btn-p {
  padding: 0 .3rem; min-height: 24px; font-size: .8rem; line-height: 1; border-radius: 4px;
}

/* telas pequenas: uma coluna, e o dedo volta a caber */
@media (max-width: 700px) {
  .cartao-lista .lista-deck { columns: 1; }
  .cartao-lista .linha { min-height: 38px; gap: 0 .3rem; }
  .cartao-lista .cel-qtd .btn-p { min-width: 30px; min-height: 32px; font-size: .95rem; }
  .cartao-lista .cel-nome { font-size: .92rem; }
}

/* ------------------------------------------------- curva de mana por cor */
/* ITEM 5.5 — o segundo gráfico: uma barra por cor, com o PNG no pé.
   A curva de CMC continua igual, porque ela mistura todas as cores e
   nenhum emblema serviria para ela. */
.curva-cores {
  display: flex; align-items: stretch; gap: 3px;
  margin-top: .7rem; flex-wrap: wrap;
}
.curva-cores .fatia-cor {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  flex: 1 1 auto; min-width: 52px;
  padding: .25rem .3rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--painel-2);
  font-family: var(--cond); font-size: .8rem; color: var(--texto-fraco);
}
.curva-cores .fatia-cor b { color: var(--texto); font-weight: 600; }

.curva-cores .fatia-W { border-color: rgba(248, 240, 216, .38); }
.curva-cores .fatia-U { border-color: rgba(159, 198, 232, .38); }
.curva-cores .fatia-B { border-color: rgba(169, 155, 176, .38); }
.curva-cores .fatia-R { border-color: rgba(232, 160, 140, .38); }
.curva-cores .fatia-G { border-color: rgba(146, 201, 154, .38); }
.curva-cores .fatia-C { border-color: rgba(196, 192, 180, .38); }

/* o gráfico de barras "mana por cor", com o emblema no pé de cada barra */
.mana-cores {
  display: flex; align-items: flex-end; gap: clamp(4px, .6vw, 10px);
  height: 128px; margin-top: .3rem;
}
.mana-cores .barra-cor {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; text-align: center;
}
.mana-cores .haste-cor {
  width: 100%; max-width: 46px; min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--cor-topo, var(--verde)), rgba(79,176,154,.25));
}
.mana-cores .barra-W .haste-cor { --cor-topo: var(--mana-w); }
.mana-cores .barra-U .haste-cor { --cor-topo: var(--mana-u); }
.mana-cores .barra-B .haste-cor { --cor-topo: var(--mana-b); }
.mana-cores .barra-R .haste-cor { --cor-topo: var(--mana-r); }
.mana-cores .barra-G .haste-cor { --cor-topo: var(--mana-g); }
.mana-cores .barra-C .haste-cor { --cor-topo: var(--mana-c); }
.mana-cores .conta-cor {
  font: 600 .74rem var(--cond); color: var(--menta); font-variant-numeric: tabular-nums;
}
.mana-cores .pe-cor { line-height: 0; }

.emblema-mana {
  width: 20px; height: 20px;
  vertical-align: middle;
  flex: 0 0 auto;
  object-fit: contain;
}
/* o plano B: a letra da cor, do MESMO tamanho do emblema, para a linha
   não desalinhar quando falta o PNG (híbrido, {X}, {T}) */
.emblema-letra {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mana-c); color: #14201E;
  font: 700 11px/1 var(--sans); font-style: normal;
}

/* ------------------------------------------------- coleção: enviar arquivo */
.envio-txt input[type=file] { min-width: 0; }

/* =====================================================================
   MINHA CONTA · aba PERFIL
   ===================================================================== */
.cartao.perfil-identidade {
  width: 100%;
  margin: 0 0 18px;
}

.perfil-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
  align-items: start;
}

.perfil-grade > .cartao {
  margin: 0;
  min-width: 0;
  padding: 1.25rem;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.perfil-grade > .cartao > form { margin: 0; }
.perfil-grade .dica:last-child { margin-bottom: 0; }
.perfil-grade .caixa-marcar    { flex-wrap: wrap; }
.perfil-grade .recado          { margin-bottom: .75rem; }

@media (max-width: 700px) {
  .perfil-grade { grid-template-columns: 1fr; gap: 14px; }
  .cartao.perfil-identidade { margin-bottom: 14px; }
}

/* =====================================================================
   REGRAS DA CASA
   ===================================================================== */
.regras-abertura { max-width: var(--medida); }

.regras-indice {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem 1.25rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--sombra);
}
.regras-indice-titulo {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--ouro);
  margin-bottom: .7rem;
}
.regras-indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: .1rem 1.4rem;
}
.regras-indice a {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .3rem .1rem;
  font-size: .92rem;
  color: var(--texto);
  border-bottom: 1px solid transparent;
}
.regras-indice a:hover { color: var(--menta); text-decoration: none; border-bottom-color: var(--borda); }
.regras-indice a .n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .78rem;
  color: var(--texto-fraco);
}

.regras-corpo { display: block; }

.regra {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1.1rem;
  padding: 2.1rem 0;
  border-top: 1px solid var(--borda);
  scroll-margin-top: calc(var(--topo-altura) + 60px);
}
.regra:first-child { border-top: 0; padding-top: .4rem; }
.regra:last-child  { padding-bottom: .8rem; }

.regra-numero {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--borda-viva);
  text-align: right;
  padding-top: .1rem;
  font-variant-numeric: tabular-nums;
}
.regra:target .regra-numero { color: var(--ouro); }

.regra-titulo {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--menta);
  margin: 0 0 .5rem;
}

.regra-texto {
  max-width: var(--medida);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
}

.regra-voltar { margin: .8rem 0 0; }
.regra-voltar a {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
  color: var(--texto-fraco);
}
.regra-voltar a:hover { color: var(--menta); }

.regras-corpo table { display: block; overflow-x: auto; max-width: 100%; }

@media (max-width: 700px) {
  .regras-indice { padding: 1rem; margin-bottom: 1.8rem; }
  .regra {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: 1.5rem 0;
  }
  .regra-numero { text-align: left; font-size: 1.25rem; }
  .regra-titulo { font-size: 1.15rem; }
  .regra-texto  { font-size: .96rem; line-height: 1.65; }
}

/* ===================================================================
   MESA — caixa de falha e pedido de entrada
   =================================================================== */
.mesa-falha{
  grid-column:1 / -1; margin:32px auto; max-width:min(100%, 660px); padding:24px 26px;
  border:1px solid #6e2b20; border-left:4px solid #c4462f;
  background:rgba(0,0,0,.30); border-radius:6px;
}
.mesa-falha h3{margin:0 0 10px; font-size:1.1rem; color:#e58c7a}
.mesa-falha p{margin:14px 0 16px; opacity:.85; font-size:.92rem; line-height:1.55}
.mesa-falha pre{
  margin:0; padding:12px 14px; background:rgba(0,0,0,.45);
  border-radius:4px; font-size:.78rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; opacity:.9;
}
.mesa-falha-botoes { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Um painel só caiu? O resto da mesa continua de pé, e o erro aparece
   NOMEANDO a função — que é o que faltava quando o historico() sumiu. */
.mesa-falha-parte {
  display:flex; flex-direction:column; gap:.2rem;
  border:1px solid rgba(196,70,47,.5); border-left:3px solid #c4462f;
  background:rgba(0,0,0,.28); border-radius:6px; padding:.7rem .9rem;
  font-size:.84rem; color:#e58c7a;
}
.mesa-falha-parte span { color:var(--texto-fraco); font-family: ui-monospace, Menlo, monospace; font-size:.76rem; }

/* ---- o pedido de entrada, só na tela de quem abriu a mesa ---- */
.pedido-entrada {
  border: 1px solid var(--ouro);
  border-left: 4px solid var(--ouro);
  background: rgba(199,146,70,.09);
  border-radius: var(--raio);
  padding: .7rem .9rem;
  display: grid; gap: .5rem;
}
.pedido-linha {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.pedido-txt { flex: 1 1 auto; min-width: 0; font-size: .95rem; }
.pedido-txt strong { color: var(--ouro); }
.pedido-prazo {
  display: block; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .1em; font-size: .68rem; color: var(--texto-fraco);
}
.pedido-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

/* saídas da mesa, na barra de turno */
.barra-saidas { display: flex; gap: .35rem; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 760px) { .barra-saidas { margin-left: 0; width: 100%; } }

/* histórico da mesa */
.historico-topo .cartao-titulo { margin: 0 0 .5rem; padding: 0 0 .4rem; }
.historico-vazio { font-style: italic; }

/* =====================================================================
   ÁREA LIVRE — coleções e decks que não valem conquista
   ===================================================================== */
.aviso-livre {
  border: 1px dashed rgba(199,146,70,.55);
  background: rgba(199,146,70,.07);
  border-radius: var(--raio);
  padding: .85rem 1.05rem;
  margin-bottom: var(--respiro);
  font-size: .95rem;
}
.aviso-livre strong { color: var(--ouro); }
.selo-livre {
  background: rgba(199,146,70,.14);
  border-color: rgba(199,146,70,.45);
  color: var(--ouro);
}

/* ==============================================================================
   ==============================================================================
   O QUE ENTROU NA 1.5
   ==============================================================================
   ============================================================================== */

/* ==============================================================================
   O MENU DO CABEÇALHO  (☰)
   O cabeçalho tinha onze abas e cortava a última. Agora tem três abas e este
   botão; todo o resto mora no painel que ele abre.
   ============================================================================== */

.menu-sanduiche { position: relative; }

/* ====================================================================
   O BOTÃO TEM DE PARECER UM BOTÃO
   ====================================================================
   Na 1.5.0 ele era do mesmo peso das abas ao lado — mesma cor, mesma
   borda fina. Resultado prático: o Igor abriu o site, não o registrou
   como "o menu", e concluiu que o MENU não tinha sido feito. Um menu
   que guarda oito funções não pode se parecer com mais uma aba.

   Agora: borda dourada, fundo próprio e um pouco mais de corpo. Continua
   sóbrio — mas o olho para nele. */
.btn-menu {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(199,146,70,.10); color: var(--ouro);
  border: 1px solid var(--ouro); border-radius: var(--raio-p);
  padding: .42rem .85rem; cursor: pointer;
  font-family: var(--cond); font-size: .98rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  transition: background .12s, border-color .12s, color .12s;
  position: relative; white-space: nowrap;
}
.btn-menu:hover { background: rgba(199,146,70,.2); border-color: var(--menta); color: var(--menta); }
.btn-menu:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
.btn-menu.aberto { background: rgba(127,216,194,.12); border-color: var(--menta); color: var(--menta); }

/* os três tracinhos, que viram X quando abre */
.tracinhos { display: grid; gap: 3px; width: 17px; flex: none; }
.tracinhos i {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: currentColor; transition: transform .18s ease, opacity .18s ease;
}
.btn-menu.aberto .tracinhos i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.btn-menu.aberto .tracinhos i:nth-child(2) { opacity: 0; }
.btn-menu.aberto .tracinhos i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* o sino: quantas novidades esperam lá dentro */
.menu-aviso {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--vermelho); color: #14201E;
  font: 700 .66rem/17px var(--sans); font-style: normal; text-align: center;
}

/* ------------------------------------------------------------ o painel */
.painel-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 60;
  min-width: 300px; max-width: min(92vw, 380px);
  background: var(--painel);
  border: 1px solid var(--borda-viva); border-radius: var(--raio);
  box-shadow: 0 26px 60px -18px rgba(0,0,0,.92), 0 0 0 1px rgba(0,0,0,.3);
  padding: .5rem;
  max-height: min(74vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.painel-menu.aberto { opacity: 1; transform: translateY(0); }
.painel-menu[hidden] { display: none; }

.pm-grupo { padding: .2rem 0; }
.pm-grupo + .pm-grupo { border-top: 1px solid var(--borda); margin-top: .3rem; padding-top: .5rem; }
.pm-titulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; color: var(--ouro); padding: .1rem .55rem .35rem;
}
.pm-arquimago .pm-titulo { color: var(--salmao); }

/* ====================================================================
   OS ITENS DO MENU — a briga de especificidade, resolvida
   ====================================================================
   O painel mora DENTRO do `nav.menu`, e o app.css tem
   `.topo-linha .menu a { display:inline-flex; padding:...; }` mais
   `.menu a { text-transform:uppercase; letter-spacing:...; font-family:
   var(--cond) }` — feito para as ABAS do cabeçalho, que são maiúsculas
   e ficam em linha.

   Um `.pm-item` simples (0-1-0) PERDE de `.topo-linha .menu a` (0-2-1).
   Resultado que eu vi no print: os itens saíam em MAIÚSCULA, em Barlow
   Condensed, e em LINHA — dois por fileira, "CARTAS  LIVRE" — em vez de
   uma lista empilhada em caixa normal. Um menu não se lê assim.

   Daí o seletor abaixo ser deliberadamente pesado (0-3-1): ele ganha da
   regra das abas sem precisar de um único `!important`. Se algum dia
   alguém encurtar este seletor, os itens voltam a virar abas.
   ==================================================================== */
.topo-linha .painel-menu a.pm-item,
.painel-menu a.pm-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%;
  padding: .55rem .55rem; border-radius: var(--raio-p);
  color: var(--texto);
  font-family: var(--sans);
  font-size: .95rem; line-height: 1.2;
  text-transform: none; letter-spacing: normal;
  min-height: 40px;
}
.pm-item:hover { background: var(--painel-2); text-decoration: none; }
.pm-item:focus-visible { outline: 2px solid var(--menta); outline-offset: -2px; }
.topo-linha .painel-menu a.pm-item.ativo,
.painel-menu a.pm-item.ativo { background: rgba(127,216,194,.1); color: var(--menta); }
.pm-ico { display: inline-flex; width: 18px; flex: none; opacity: .85; }
.pm-ico .ico-menu { width: 17px; height: 17px; }
.pm-nome { flex: 1 1 auto; min-width: 0; }

.pm-conta {
  min-width: 20px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--vermelho); color: #14201E; flex: none;
  font: 700 .7rem/19px var(--sans); font-style: normal; text-align: center;
}
.pm-conta-ouro { background: var(--ouro); }

.pm-sair { border-top: 1px solid var(--borda-viva); margin-top: .4rem; padding-top: .5rem; }
.pm-item-sair { color: var(--salmao); }
.pm-item-sair:hover { background: rgba(212,115,107,.12); }

/* ==============================================================================
   O MENU NO CELULAR — o botão fica GRUDADO na direita
   ==============================================================================
   Isto foi achado medindo, não olhando. Abaixo de 900px a barra de abas
   ganha uma linha só para ela (`flex: 1 0 100%`), e num aparelho de
   390px as quatro coisas — PAINEL, DECKS, COLEÇÃO e o MENU — não caem
   nessa linha: a barra rolava 31px para o lado e o botão MENU, que é o
   ÚLTIMO, ficava fora da tela. No celular o MENU é justamente o botão
   mais importante, porque é onde mora quase tudo. Ficar escondido atrás
   de uma rolagem lateral que ninguém adivinha é o pior lugar possível.

   A correção é `position: sticky; right: 0` DENTRO da barra que rola.
   As três abas rolam por baixo; o botão MENU fica plantado na direita,
   sempre visível. E a ordem que você pediu — MENU depois de PAINEL,
   DECKS e COLEÇÃO — continua exatamente essa: ninguém foi reordenado,
   só ancorado.

   O véu do lado esquerdo (`.menu-sanduiche::before`) existe para as abas
   não aparecerem cortadas ao meio por baixo do botão.
   ============================================================================== */
@media (max-width: 900px) {
  .menu-sanduiche {
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    z-index: 3;
    background: var(--painel);
    padding-left: .45rem;
    margin-left: .1rem;
  }
  .menu-sanduiche::before {
    content: '';
    position: absolute; top: 0; bottom: 0; right: 100%; width: 1.4rem;
    background: linear-gradient(to right, rgba(21,35,34,0), var(--painel));
    pointer-events: none;
  }
}

/* ==============================================================================
   NO CELULAR O MENU É UMA FOLHA DE BAIXO
   ==============================================================================
   Duas coisas obrigaram isto, e as duas apareceram no print, não na conta.

   1. LARGURA. 300px de painel num aparelho de 360px sobra pelo lado. Daí
      `left/right: .5rem` e `max-width: none`.

   2. O BOTÃO DESAPARECIA DEBAIXO DA PRÓPRIA FOLHA. Com `top: auto`, o
      `position: fixed` usa a posição estática do elemento — logo abaixo
      do botão. Mas abaixo de 900px o cabeçalho QUEBRA em duas linhas, e
      a folha caía justamente sobre a linha das abas, tapando o botão
      MENU que a abriu. O mago abre o menu e o botão de fechar sai de
      cena; sobra tocar fora ou apertar Esc, que ninguém adivinha num
      celular.

   A SAÍDA, e a descoberta que a destravou -----------------------------
   Eu tentei primeiro ancorar a folha no RODAPÉ da janela
   (`bottom: .5rem`) e ela foi para o TOPO, meio metro fora da tela. O
   motivo está no app.css, linha 137:

       .topo { backdrop-filter: blur(10px); }

   `backdrop-filter` faz do cabeçalho o BLOCO CONTINENTE de qualquer
   descendente `position: fixed`. Ou seja: dentro do cabeçalho, `fixed`
   se comporta como `absolute` em relação a ELE, não à janela. É uma
   regra de CSS que quase ninguém tem na cabeça, e ela transforma
   `bottom: .5rem` em "8px acima da base do cabeçalho" — que é onde a
   folha foi parar.

   Em vez de brigar com isso (tirar o `backdrop-filter` custaria o vidro
   do cabeçalho, que é bonito e é da casa), eu USEI: `top: 100%` no
   painel, medido a partir do cabeçalho, é exatamente "logo abaixo do
   cabeçalho INTEIRO" — inclusive quando ele quebra em duas linhas e
   muda de altura. Nenhum JavaScript mede nada, e o botão nunca fica
   coberto porque ele está DENTRO do cabeçalho.

   O teto de 70vh mais a rolagem por dentro garantem que a folha nunca
   passe do pé da tela: o cabeçalho tem ~90px, e 70vh + 90px só
   estouraria numa janela de menos de 300px de altura.
   ============================================================================== */
@media (max-width: 620px) {
  .painel-menu {
    position: fixed;          /* ancorado no cabeçalho, por causa do blur */
    top: calc(100% + .35rem);
    left: .5rem; right: .5rem;
    bottom: auto;
    min-width: 0; max-width: none;
    max-height: 70vh;
    box-shadow: 0 26px 60px -14px rgba(0,0,0,.94), 0 0 0 1px rgba(0,0,0,.35);
  }
}

/* ==============================================================================
   O ONEUB NO CABEÇALHO
   Economia que o jogador não vê a toda hora é economia que ele esquece.
   ============================================================================== */
.chip-oneub {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--painel-2); border: 1px solid rgba(199,146,70,.45);
  border-radius: 999px; padding: .25rem .6rem .25rem .45rem;
  color: var(--texto); position: relative; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip-oneub:hover { border-color: var(--ouro); background: rgba(199,146,70,.1); text-decoration: none; }
.chip-oneub b { font: 600 .92rem var(--sans); color: var(--ouro); }
.chip-pacote {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--menta); color: #06120F;
  font: 700 .66rem/18px var(--sans); font-style: normal; text-align: center;
  box-shadow: 0 0 0 2px var(--fundo);
}
@media (max-width: 760px) { .chip-oneub b { font-size: .86rem; } }

/* a moeda, onde ela aparece no texto */
.oneub { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.oneub b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ouro); }
.oneub i {
  font-style: normal; font-family: var(--cond); letter-spacing: .1em;
  font-size: .74rem; color: var(--texto-fraco); text-transform: uppercase;
}
.ico-oneub { flex: none; vertical-align: -3px; }
.oneub.grande b { font-size: 1.5rem; }
.oneub.grande .ico-oneub { width: 24px; height: 24px; }

/* ==============================================================================
   A LOJA — as seis barracas
   ============================================================================== */
.barracas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(.7rem, 1.1vw, 1.2rem);
}
@media (min-width: 1500px) { .barracas { grid-template-columns: repeat(3, 1fr); } }

.barraca {
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1rem;
  position: relative; overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.barraca:hover { border-color: var(--ouro); transform: translateY(-2px); text-decoration: none; }
.barraca::after {
  content: ''; position: absolute; inset: auto -20% -40% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--brilho, rgba(127,216,194,.10)); filter: blur(40px); pointer-events: none;
}
.barraca-W { --brilho: rgba(248,240,216,.14); }
.barraca-U { --brilho: rgba(159,198,232,.14); }
.barraca-B { --brilho: rgba(169,155,176,.14); }
.barraca-R { --brilho: rgba(232,160,140,.14); }
.barraca-G { --brilho: rgba(146,201,154,.14); }
.barraca-M { --brilho: rgba(199,146,70,.16); }

.barraca-topo { display: flex; align-items: center; gap: .8rem; position: relative; z-index: 1; }
.barraca-emblema {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: var(--fundo); border: 2px solid var(--borda-viva);
  display: grid; place-items: center; overflow: hidden;
}
.barraca-emblema img { width: 78%; height: 78%; object-fit: contain; }
.barraca-W .barraca-emblema { border-color: rgba(248,240,216,.5); }
.barraca-U .barraca-emblema { border-color: rgba(159,198,232,.5); }
.barraca-B .barraca-emblema { border-color: rgba(169,155,176,.5); }
.barraca-R .barraca-emblema { border-color: rgba(232,160,140,.5); }
.barraca-G .barraca-emblema { border-color: rgba(146,201,154,.5); }
.barraca-M .barraca-emblema { border-color: var(--ouro); }

.barraca-nome { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.barraca-casa {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: var(--ouro);
}
.barraca-fala {
  font-family: var(--serif); font-style: italic; font-size: .9rem;
  color: var(--texto-fraco); margin: 0; position: relative; z-index: 1;
  overflow-wrap: break-word;
}
.barraca-pe {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap; margin-top: auto; padding-top: .5rem;
  border-top: 1px solid var(--borda); position: relative; z-index: 1;
  font-size: .84rem;
}
.barraca-mercador-foto {
  width: 100%; max-width: 160px; height: auto; align-self: center;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); position: relative; z-index: 1;
}

/* o relógio da banca */
.relogio-banca {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--texto-fraco);
}
.relogio-banca b { color: var(--menta); letter-spacing: .04em; }

/* ------------------------------------------------------ dentro da barraca */
.banca-papel { margin-bottom: 1.2rem; }
.banca-papel-titulo {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .74rem; color: var(--ouro);
  padding-bottom: .4rem; margin-bottom: .7rem;
  border-bottom: 1px solid var(--borda);
}
.banca-papel-titulo small {
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: .8rem; color: var(--texto-fraco);
}

.banca-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
  gap: clamp(.5rem, .8vw, .9rem);
}

.banca-item {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--painel-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .5rem; min-width: 0;
  position: relative;
}
.banca-item.esgotado { opacity: .55; }
.banca-item-arte {
  position: relative; border-radius: 6px; overflow: hidden;
  background: var(--fundo); aspect-ratio: 488/680;
}
.banca-item-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banca-item-nome { font: 600 .82rem/1.2 var(--sans); overflow-wrap: anywhere; }
.banca-item-tipo { font-size: .72rem; color: var(--texto-fraco); overflow-wrap: anywhere; }
.banca-item-pe { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-top: auto; }
.banca-item-cota {
  font-family: var(--cond); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.banca-item .btn { width: 100%; }

.selo-raridade {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  font: 700 .6rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .34rem; border-radius: 3px;
  background: rgba(14,26,24,.9); border: 1px solid var(--borda-viva); color: var(--texto-fraco);
}
.selo-raridade.rara   { color: var(--ouro);   border-color: rgba(199,146,70,.6); }
.selo-raridade.mitica { color: var(--salmao); border-color: rgba(233,168,140,.6); }

/* ==============================================================================
   O BAÚ
   ============================================================================== */
.bau-topo {
  display: grid; gap: clamp(.7rem, 1.1vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-bottom: var(--respiro);
}
.bau-saldo {
  background: linear-gradient(135deg, rgba(199,146,70,.14), transparent 70%), var(--painel);
  border: 1px solid rgba(199,146,70,.45);
  border-radius: var(--raio); padding: 1.2rem 1.3rem;
}
.bau-saldo .rotulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--ouro); margin-bottom: .35rem;
}

.extrato-linha {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem;
  align-items: center; padding: .5rem .2rem;
  border-bottom: 1px solid rgba(39,59,55,.5);
}
.extrato-linha:last-child { border-bottom: 0; }
.extrato-motivo { font-size: .92rem; min-width: 0; overflow-wrap: anywhere; }
.extrato-quando {
  grid-column: 1; font-family: var(--cond); font-size: .72rem;
  letter-spacing: .06em; color: var(--borda-viva);
}
.extrato-valor {
  grid-row: 1 / span 2; font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap;
}
.extrato-valor.entrou { color: var(--menta); }
.extrato-valor.saiu   { color: var(--salmao); }

/* a sequência de presença */
.sequencia { display: flex; gap: 4px; margin: .6rem 0 .4rem; flex-wrap: wrap; }
.sequencia i {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  background: var(--fundo); border: 1px solid var(--borda);
  display: grid; place-items: center;
  font: 600 .7rem var(--cond); color: var(--borda-viva); font-style: normal;
}
.sequencia i.feito { background: rgba(127,216,194,.16); border-color: var(--verde); color: var(--menta); }
.sequencia i.premio { background: rgba(199,146,70,.18); border-color: var(--ouro); color: var(--ouro); }

/* ==============================================================================
   OS BOOSTERS — a abertura estilo caixa
   ============================================================================== */
.pacotes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(.6rem, 1vw, 1rem);
}
.pacote {
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
  background: linear-gradient(160deg, var(--painel-2), var(--fundo));
  border: 1px solid var(--borda-viva); border-radius: var(--raio);
  padding: 1rem .8rem; text-align: center; position: relative; overflow: hidden;
}
.pacote::before {
  content: ''; position: absolute; inset: -50% -50% auto auto; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(199,146,70,.18), transparent 65%);
  pointer-events: none;
}
.pacote-arte {
  width: 84px; height: 112px; border-radius: 8px; flex: none;
  background: linear-gradient(150deg, #24403C, #0E1A18 70%);
  border: 1px solid var(--ouro);
  display: grid; place-items: center; position: relative; z-index: 1;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.9);
}
.pacote-arte img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pacote-nome { font: 600 .92rem/1.2 var(--sans); position: relative; z-index: 1; }
.pacote-origem {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .66rem; color: var(--texto-fraco); position: relative; z-index: 1;
}

/* ---- a mesa de abertura ---- */
.abertura {
  background: radial-gradient(120% 90% at 50% 0%, rgba(199,146,70,.10), transparent 60%), var(--painel);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: clamp(.9rem, 1.6vw, 1.6rem);
}
.abertura-fila {
  display: flex; gap: clamp(.3rem, .8vw, .8rem); justify-content: center;
  flex-wrap: wrap; margin: 1rem 0;
}
.slot {
  position: relative; width: clamp(74px, 8.4vw, 122px); aspect-ratio: 488/680;
  border-radius: 8px; flex: none; cursor: pointer;
  perspective: 900px; background: none; border: 0; padding: 0;
}
.slot-face {
  position: absolute; inset: 0; border-radius: 8px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.25,1);
  overflow: hidden;
}
.slot-verso {
  background: linear-gradient(150deg, #24403C, #0E1A18 65%);
  border: 1px solid var(--borda-viva);
  display: grid; place-items: center;
  transform: rotateY(0deg);
}
.slot-verso::after {
  content: ''; width: 30%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--borda-viva);
}
.slot-frente {
  transform: rotateY(180deg);
  background: var(--fundo); border: 1px solid var(--borda-viva);
}
.slot-frente img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot.virada .slot-verso  { transform: rotateY(-180deg); }
.slot.virada .slot-frente { transform: rotateY(0deg); }

.slot.entrando { animation: slot-entra .38s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes slot-entra {
  from { transform: translateY(26px) scale(.86); opacity: 0; }
}
.slot.aceso { box-shadow: 0 0 0 2px var(--menta), 0 0 26px -4px rgba(127,216,194,.6); }
.slot.rara     { box-shadow: 0 0 0 2px var(--ouro), 0 0 34px -4px rgba(199,146,70,.75); }
.slot.mitica   { box-shadow: 0 0 0 2px var(--salmao), 0 0 40px -4px rgba(233,168,140,.85); }

/* o selo do papel no canto do slot */
.slot-papel {
  position: absolute; left: 4px; bottom: 4px; z-index: 3;
  font: 700 .56rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  padding: .16rem .3rem; border-radius: 3px;
  background: rgba(14,26,24,.92); border: 1px solid var(--borda-viva); color: var(--texto-fraco);
}
.slot.rara .slot-papel   { color: var(--ouro); border-color: rgba(199,146,70,.6); }
.slot.mitica .slot-papel { color: var(--salmao); border-color: rgba(233,168,140,.6); }

/* ---- O FOIL — efeito nosso, em CSS ----------------------------------
   A Scryfall NÃO tem imagem separada de carta foil: o objeto de carta traz
   finishes: ["nonfoil","foil"] dizendo que a impressão existe em foil, mas
   image_uris é um conjunto só. Então o brilho é desenhado aqui, por cima da
   imagem normal, e reage ao mouse pelas variáveis --fx/--fy que o JS escreve. */
.slot.foil .slot-frente::after,
.carta-foil::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background:
    conic-gradient(from calc(var(--fx, .5) * 360deg) at 50% 50%,
      rgba(255,138,181,.55), rgba(255,217,122,.55), rgba(185,255,143,.55),
      rgba(142,240,255,.55), rgba(165,139,255,.55), rgba(255,138,181,.55));
  mix-blend-mode: color-dodge;
  opacity: .5;
  transition: opacity .2s;
}
.slot.foil .slot-frente::before,
.carta-foil::before {
  content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 2;
  background: linear-gradient(
    calc(var(--fy, .5) * 180deg + 60deg),
    transparent 34%, rgba(255,255,255,.75) 50%, transparent 66%);
  mix-blend-mode: screen; opacity: .45;
}
.slot.foil:hover .slot-frente::after { opacity: .75; }

.selo-foil {
  position: absolute; right: 4px; top: 4px; z-index: 3;
  font: 700 .56rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
  padding: .16rem .32rem; border-radius: 3px;
  background: linear-gradient(115deg, #ff8ab5, #ffd97a, #8ef0ff, #a58bff);
  color: #14201E; border: 1px solid rgba(255,255,255,.5);
}

/* ---- a carta grande, quando o mago clica para ver de perto ---- */
.lupa-carta {
  position: fixed; inset: 0; z-index: 96; padding: 1.2rem;
  background: rgba(6,12,11,.88); backdrop-filter: blur(5px);
  display: grid; place-items: center; overflow-y: auto;
}
.lupa-caixa {
  display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  justify-content: center; max-width: min(100%, 900px);
  animation: revela .4s cubic-bezier(.2,.9,.3,1.15);
}
.lupa-arte {
  position: relative; width: min(360px, 74vw); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 2px var(--ouro), 0 40px 90px -22px rgba(0,0,0,.95);
}
.lupa-arte img { width: 100%; display: block; }
.lupa-info { max-width: min(100%, 340px); }
.lupa-info h2 { font-size: 1.4rem; margin-bottom: .2rem; }
.lupa-info .tipo { color: var(--texto-fraco); font-size: .9rem; margin-bottom: .7rem; }
.lupa-info .texto {
  white-space: pre-wrap; font-size: .9rem; line-height: 1.5;
  background: rgba(21,35,34,.85); border: 1px solid var(--borda);
  border-radius: 8px; padding: .8rem .9rem; max-height: 34vh; overflow-y: auto;
}

/* ==============================================================================
   AS APOSTAS NA MESA
   ============================================================================== */
.aposta-caixa {
  border: 1px solid var(--ouro); border-left: 4px solid var(--ouro);
  background: linear-gradient(180deg, rgba(199,146,70,.12), transparent 70%), var(--painel);
  border-radius: var(--raio); padding: .9rem 1rem;
}
.aposta-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .6rem;
}
.aposta-pote {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ouro);
  font-variant-numeric: tabular-nums;
}
.aposta-lados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .6rem;
}
.aposta-lado {
  background: var(--painel-2); border: 1px solid var(--borda);
  border-radius: var(--raio-p); padding: .6rem .7rem; min-width: 0;
}
.aposta-lado b { display: block; margin-bottom: .25rem; }
.aposta-lado ul { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.aposta-lado li { padding: .12rem 0; color: var(--texto-fraco); overflow-wrap: anywhere; }
.aposta-acoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }

.aviso-duro {
  border: 1px dashed var(--vermelho); background: rgba(212,115,107,.1);
  border-radius: var(--raio-p); padding: .7rem .9rem; font-size: .9rem;
  color: var(--salmao);
}
.aviso-duro strong { color: var(--vermelho); }

/* ==============================================================================
   O CATÁLOGO DE AVATARES
   ============================================================================== */
.avatares {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr));
  gap: clamp(.5rem, .8vw, .9rem);
}
.av-item {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: var(--painel-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .6rem .4rem; text-align: center;
  cursor: pointer; position: relative; min-width: 0;
  color: inherit; font: inherit;
  transition: border-color .15s, transform .15s;
}
.av-item:hover { border-color: var(--ouro); transform: translateY(-2px); }
.av-item:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
.av-item.atual { border-color: var(--menta); box-shadow: inset 0 0 0 1px rgba(127,216,194,.45); }
.av-item[disabled] { cursor: not-allowed; opacity: .55; }
.av-item[disabled]:hover { border-color: var(--borda); transform: none; }

.av-face {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--fundo); border: 2px solid var(--borda-viva);
  display: grid; place-items: center;
}
.av-face img { width: 100%; height: 100%; object-fit: cover; }
.av-item.atual .av-face { border-color: var(--menta); }
.av-nome { font: 500 .74rem/1.2 var(--sans); overflow-wrap: anywhere; }
.av-trava {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .62rem; color: var(--texto-fraco);
}
.av-item[disabled] .av-face img { filter: grayscale(1) brightness(.45); }
.av-falta {
  font-family: var(--cond); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--salmao);
}
.av-grupo + .av-grupo { margin-top: 1.4rem; }

/* ==============================================================================
   PÁGINA INICIAL — o layout reorganizado
   ============================================================================== */

/* ---- o herói ---- */
.heroi {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.4rem, 3vw, 3rem) 0 clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--respiro-g);
}
@media (min-width: 900px) {
  .heroi { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.heroi-texto h1 {
  font-size: clamp(1.7rem, 2.6vw + .8rem, 2.9rem);
  line-height: 1.08; margin-bottom: .6rem;
}
.heroi-linha {
  color: var(--texto-fraco); font-size: clamp(1rem, .3vw + .95rem, 1.12rem);
  max-width: 56ch; margin: 0 0 1.3rem;
}
.heroi-botoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.heroi-botoes .btn { padding: .7rem 1.3rem; }
.heroi-selo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--ouro); margin-bottom: .7rem;
}
.heroi-selo::before {
  content: ''; width: 22px; height: 1px; background: var(--ouro);
}
.heroi-arte { display: grid; place-items: center; }
.heroi-arte img {
  width: min(100%, 460px); height: auto;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.65));
}
.heroi-dica { font-size: .84rem; color: var(--texto-fraco); margin: .9rem 0 0; }

/* ---- a faixa de números ---- */
.faixa-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px; background: var(--borda);
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; margin-bottom: var(--respiro-g);
}
.faixa-numeros > div {
  background: var(--painel); padding: 1rem 1.1rem; text-align: center;
}
.faixa-numeros .n {
  font-family: var(--serif); font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
  font-weight: 600; line-height: 1; color: var(--menta);
}
.faixa-numeros .r {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem; color: var(--texto-fraco); margin-top: .3rem;
}

/* ---- as duas colunas de leitura ---- */
.duas-leituras {
  display: grid; gap: clamp(1.2rem, 2.4vw, 2.6rem);
  grid-template-columns: 1fr; margin-bottom: var(--respiro-g);
}
@media (min-width: 1000px) { .duas-leituras { grid-template-columns: 1fr 1fr; } }
.duas-leituras h2 {
  color: var(--ouro); border-bottom: 1px solid var(--borda);
  padding-bottom: .45rem; margin-bottom: .8rem;
}
.duas-leituras p { max-width: var(--medida); margin: 0 0 .8rem; }

/* ---- os seis recursos, em 3+3 e nunca em 5+1 ---- */
.recursos {
  display: grid; gap: clamp(.7rem, 1.1vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-bottom: var(--respiro-g);
}
/* É este trecho que conserta o cartão órfão: acima de 900px são
   exatamente TRÊS colunas, então seis cartões dão 3+3 — e não 5+1,
   que era o que o auto-fit fazia numa página de 1720px. */
@media (min-width: 900px)  { .recursos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) and (min-width: 560px) { .recursos { grid-template-columns: repeat(2, 1fr); } }

.recurso {
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.1rem 1.15rem;
  display: flex; flex-direction: column; gap: .45rem; min-width: 0;
}
.recurso-titulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .74rem; color: var(--ouro);
  display: flex; align-items: center; gap: .45rem;
}
.recurso p { margin: 0; font-size: .93rem; color: var(--texto-fraco); }
.recurso .ico-menu { width: 16px; height: 16px; opacity: 1; }

/* ---- Como começar: o mascote na coluna dele, os passos em 2×2 ---- */
.comecar {
  display: grid; gap: clamp(1rem, 2vw, 2.2rem);
  grid-template-columns: 1fr; align-items: start;
  margin-bottom: var(--respiro-g);
}
@media (min-width: 860px) {
  .comecar { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
}
.comecar-mascote { display: grid; place-items: center; }
.comecar-mascote img {
  width: min(100%, 240px); height: auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.6));
}
.comecar-mascote figcaption {
  font-family: var(--serif); font-style: italic; font-size: .88rem;
  color: var(--texto-fraco); text-align: center; margin-top: .5rem;
  max-width: 24ch;
}
.comecar-passos { counter-reset: passo; display: grid; gap: .7rem; }
@media (min-width: 1200px) { .comecar-passos { grid-template-columns: 1fr 1fr; } }

/* No celular o mascote sai: ele é enfeite, e enfeite não rouba tela de
   quem está tentando entender como começar. */
@media (max-width: 859px) { .comecar-mascote { display: none; } }

/* ---- o CTA final ---- */
.porta {
  background: linear-gradient(150deg, rgba(127,216,194,.08), transparent 65%), var(--painel);
  border: 1px solid var(--borda-viva); border-radius: var(--raio);
  padding: clamp(1.2rem, 2vw, 2rem);
  max-width: min(100%, 620px); margin: 0 auto; text-align: center;
}
.porta h2 { margin-bottom: .3rem; }
.porta .flex { justify-content: center; margin-top: 1rem; }
.porta .btn { padding: .7rem 1.4rem; }

/* ==============================================================================
   O TUTORIAL — o holofote passa a ser NÍTIDO
   O detalhe está no tutorial.js; aqui fica só a classe que ele põe no
   elemento apontado, para ele subir acima do escurecido.
   ============================================================================== */
.tut-alvo-aceso {
  position: relative;
  z-index: 95 !important;   /* acima do .tut-fundo (94), abaixo do palco (96) */
}

/* ==============================================================================
   O MANIFESTO DO INSTALÁVEL — a barra que convida a instalar
   ============================================================================== */
.convite-instalar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--painel); border: 1px solid var(--borda-viva);
  border-left: 3px solid var(--menta);
  border-radius: var(--raio); padding: .7rem .9rem; margin-bottom: var(--respiro);
  font-size: .92rem;
}
.convite-instalar .crescer { min-width: 200px; }

/* ==============================================================================
   LISTA DE REGRAS — o parágrafo em itens
   Usada nas páginas que EXPLICAM alguma coisa: as regras da loja, as
   fontes de ONEUB no baú, o "como ler esta tabela" do arquimago. É uma
   lista de leitura, não uma lista de dados — daí o respiro entre itens e
   o marcador dourado.
   ============================================================================== */
.regras-lista { margin: .2rem 0 0; padding-left: 1.15rem; }
.regras-lista > li { margin-bottom: .55rem; line-height: 1.55; }
.regras-lista > li::marker { color: var(--ouro); }
.regras-lista > li:last-child { margin-bottom: 0; }
.regras-lista strong { color: var(--texto); }

/* ==============================================================================
   1.5.2 — A PORTA DE ENTRADA, SEM O MURO DE TEXTO
   ==============================================================================
   O Igor disse que a página "virou um texto colado e mal feito". Eu medi:
   3.043 letras de prosa corrida em 12 parágrafos, seis deles acima de 250
   letras. Ele estava certo.

   O conserto não foi mexer em fonte nem em margem — foi TIRAR PROSA e pôr
   estrutura no lugar. As regras abaixo são as peças novas que receberam o
   que antes era parágrafo: a fita das cinco cores, a faixa da economia e as
   etiquetas de formato. Cada uma diz de relance o que três linhas de texto
   diziam devagar.
   ============================================================================== */

/* ---- título de seção: o respiro que separava seções virava parágrafo ---- */
.titulo-secao {
  margin: calc(var(--respiro-g, 2rem) * 1.15) 0 1rem;
  font-family: var(--serif);
}

/* ---- "O que é isto aqui" + a fita das cinco cores ---- */
.oque {
  display: grid;
  gap: var(--folga);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--respiro-g, 2rem);
}
@media (min-width: 1000px) { .oque { grid-template-columns: 1fr 1fr; } }

.oque-texto h2 { font-family: var(--serif); margin: 0 0 .6rem; }
.oque-texto p  { margin: 0 0 .7rem; max-width: var(--medida); line-height: 1.55; }
.oque-ferro {
  border-left: 3px solid var(--ouro);
  padding: .55rem .8rem;
  background: var(--painel);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  margin-bottom: 0 !important;
}

/* A fita das cinco cores. Isto substitui um parágrafo de 404 letras que
   explicava, em prosa, o que cada cor faz. Cinco linhas curtas se leem de
   relance; o parágrafo exigia ler até o fim para achar a cor que interessa. */
.cores-fita {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .4rem;
}
.cor-pastilha {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-viva);
  border-radius: var(--raio-p);
}
.cor-pastilha img { width: 22px; height: 22px; display: block; }
.cor-pastilha b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; }
.cor-pastilha span { color: var(--texto-fraco); font-size: .88rem; }
.cor-letra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--borda); font: 700 .72rem var(--sans);
}
.cor-W { border-left-color: #E8DFC8; }
.cor-U { border-left-color: #6FA8D6; }
.cor-B { border-left-color: #8A7E96; }
.cor-R { border-left-color: #D4736B; }
.cor-G { border-left-color: #7FB07A; }

/* ---- a faixa da economia: a novidade da 1.5 tinha virado um parágrafo
        de 430 letras no meio do texto. Agora tem lugar próprio. ---- */
.fita-economia {
  display: grid; gap: var(--folga);
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, var(--painel), var(--painel-2, var(--painel)));
  border: 1px solid var(--borda-viva);
  border-radius: var(--raio);
  padding: clamp(1rem, 2.4vw, 1.8rem);
  margin-bottom: var(--respiro-g, 2rem);
}
@media (min-width: 900px) { .fita-economia { grid-template-columns: 1.6fr 1fr; align-items: center; } }
.fita-economia h2 { font-family: var(--serif); margin: .35rem 0 .5rem; }
.fita-economia p  { margin: 0; max-width: var(--medida); line-height: 1.55; }
.fita-economia-selos { display: flex; flex-wrap: wrap; gap: .45rem; align-content: center; }
.selo-eco {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .76rem; padding: .35rem .7rem;
  border: 1px solid var(--ouro); color: var(--ouro);
  border-radius: 999px; white-space: nowrap;
}

/* ---- etiquetas de formato: eram uma frase listando os oito formatos ---- */
.etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.etiquetas span {
  font-family: var(--cond); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: .18rem .45rem;
}

/* ==============================================================================
   1.5.2 — A FAIXA DA ECONOMIA NO PAINEL
   ==============================================================================
   Existe porque a loja e o baú estavam SÓ dentro do MENU sanfonado, e o
   Igor — com razão — concluiu que não tinham sido feitos. Estavam no
   servidor, byte a byte; só não apareciam em lugar nenhum sem clicar num
   hambúrguer. Agora se anunciam na primeira tela depois do login.
   ============================================================================== */
.faixa-eco {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin-bottom: var(--respiro);
}
.eco-bloco {
  display: block; padding: .9rem 1rem;
  background: var(--painel); border: 1px solid var(--borda-viva);
  border-radius: var(--raio); border-top: 3px solid var(--ouro);
  color: var(--texto); text-decoration: none;
  transition: border-color .14s, transform .14s;
}
.eco-bloco:hover { border-color: var(--menta); text-decoration: none; transform: translateY(-2px); }
.eco-bloco:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
.eco-loja   { border-top-color: var(--menta); }
.eco-pacote { border-top-color: var(--salmao); }

.eco-rotulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--ouro); margin-bottom: .35rem;
}
.eco-loja .eco-rotulo   { color: var(--menta); }
.eco-pacote .eco-rotulo { color: var(--salmao); }

.eco-valor { display: flex; align-items: baseline; gap: .4rem; }
.eco-valor svg { align-self: center; flex: none; }
.eco-valor b { font: 700 1.7rem/1 var(--cond); }
.eco-valor span { font-size: .8rem; color: var(--texto-fraco); }

.eco-nota  { margin-top: .35rem; font-size: .82rem; color: var(--texto-fraco); line-height: 1.35; }
.eco-aviso {
  display: inline-block; margin-top: .45rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; padding: .18rem .5rem;
  background: var(--ouro); color: #14201E; border-radius: 999px;
}

/* os seis rostinhos: dizem "a loja tem gente dentro" sem uma linha de texto */
.eco-mercadores { display: flex; gap: .3rem; flex-wrap: wrap; margin: .15rem 0 .1rem; }
.eco-merc {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none;
  border: 1px solid var(--borda-viva); background: var(--fundo);
  display: inline-flex; align-items: center; justify-content: center;
}
.eco-merc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-merc i {
  font: 700 .8rem var(--sans); font-style: normal; color: var(--texto-fraco);
}

/* ==============================================================================
   1.5.2 — A ARTE DO PACOTE NO VERSO DAS CARTAS
   ==============================================================================
   O `.slot-verso` era um gradiente liso com um círculo no meio: o desenho de
   espera para quando não houvesse arte de booster. Só que as 20 artes chegaram
   e eu nunca troquei — elas ficaram aparecendo apenas em duas miniaturas de
   84x112 e 64x86. As 14 cartas viradas para baixo, que é a tela onde a arte
   teria espaço de verdade, continuavam cinza.

   Agora, quando `data-arte` vem preenchido, o verso é a arte do pacote. O
   círculo de espera some (o ::after abaixo), e a moldura dourada fica.
   ============================================================================== */
.slot-verso-arte {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--ouro);
}
.slot-verso-arte::after { content: none; }

/* ==============================================================================
   1.5.3 — A PORTA DE ENTRADA EM DUAS COLUNAS
   ==============================================================================
   Informação à esquerda, a porta à direita, separadas por uma linha dourada
   fina. O login mora NA PÁGINA: quem já é da casa entra sem um clique a mais.

   A linha é `border-inline-end` na coluna da esquerda, e não um <hr> ou uma
   coluna de 1px. O motivo é prático: quando as duas colunas empilham no
   celular, a linha some sozinha, sem media query para escondê-la.
   ============================================================================== */
.entrada {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--folga);
  align-items: start;
}
@media (min-width: 1000px) {
  .entrada { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr); gap: 0; }
  .entrada-info {
    border-inline-end: 1px solid var(--ouro);
    padding-inline-end: clamp(1.4rem, 3vw, 3rem);
  }
  .entrada-porta { padding-inline-start: clamp(1.4rem, 3vw, 3rem); position: sticky; top: 6rem; }
}

.entrada-titulo { font-family: var(--serif); margin: .5rem 0 .4rem; line-height: 1.1; }
.entrada-linha  { font-size: 1.05rem; color: var(--texto-fraco); margin: 0 0 1.2rem; max-width: var(--medida); }
.entrada-h2     { font-family: var(--serif); margin: 1.6rem 0 .6rem; font-size: 1.25rem; }
.entrada-info p { max-width: var(--medida); line-height: 1.55; margin: 0 0 .8rem; }

/* a faixa de números encolhe: aqui ela divide espaço com a coluna do login */
.faixa-compacta { margin: 0 0 .4rem; }
.faixa-compacta .n { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.faixa-compacta .r { font-size: .72rem; }

.recursos-2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .recursos-2 { grid-template-columns: 1fr 1fr; } }

/* ---- a coluna da porta ---- */
.porta-caixa {
  background: var(--painel); border: 1px solid var(--borda-viva);
  border-radius: var(--raio); padding: 1.1rem 1.2rem;
  margin-bottom: .9rem;
}
.porta-caixa:first-child { border-top: 3px solid var(--ouro); }
.porta-titulo   { font-family: var(--serif); margin: 0 0 .2rem; font-size: 1.4rem; }
.porta-titulo-p { font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
                  font-size: .8rem; color: var(--ouro); }
.porta-sub      { color: var(--texto-fraco); font-size: .88rem; margin: 0 0 1rem; }
.porta-cadastro { background: transparent; border-style: dashed; }

.porta-mascote { margin: 1.2rem 0 0; text-align: center; }
.porta-mascote img { width: min(200px, 60%); height: auto; }
.porta-mascote figcaption {
  font-size: .8rem; color: var(--texto-fraco); margin-top: .4rem;
  max-width: 26ch; margin-inline: auto; line-height: 1.35;
}
@media (max-width: 999px) { .porta-mascote { display: none; } }

/* ==============================================================================
   1.5.3 — A BARRACA: O MERCADOR, O BALÃO E O BOOSTER
   ============================================================================== */

/* ---- o mercador e a fala dele, numa peça só ---------------------------
   Antes: duas caixas de larguras diferentes, o mercador pequeno num vazio
   enorme e a fala do outro lado. Agora o retrato é grande e o balão aponta
   para ele. O bico é um triângulo em CSS — nada de imagem. */
.mercador-cena {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(160deg, var(--painel), var(--fundo) 85%);
  border: 1px solid var(--borda-viva);
  border-radius: var(--raio);
  padding: clamp(1rem, 2.2vw, 1.7rem);
}
@media (min-width: 720px) {
  .mercador-cena { grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); }
}

.mercador-retrato { display: grid; place-items: center; }
.mercador-retrato img {
  width: 100%; max-width: 260px; height: auto;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.75));
}
@media (max-width: 719px) { .mercador-retrato img { max-width: 190px; } }

.mercador-balao {
  position: relative;
  background: var(--painel-2); border: 1px solid var(--ouro);
  border-radius: var(--raio); padding: 1.1rem 1.3rem;
}
.mercador-balao p {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.5;
}
.mercador-balao-quem {
  display: block; margin-top: .6rem;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .74rem; color: var(--ouro);
}
/* o bico: aponta para a ESQUERDA (para o mercador) em tela larga… */
@media (min-width: 720px) {
  .mercador-balao::before,
  .mercador-balao::after {
    content: ''; position: absolute; top: 2.2rem;
    border: 13px solid transparent; border-left: 0;
  }
  .mercador-balao::before { left: -13px; border-right-color: var(--ouro); }
  .mercador-balao::after  { left: -12px; border-right-color: var(--painel-2); }
}
/* …e para CIMA quando empilha no celular. */
@media (max-width: 719px) {
  .mercador-balao::before,
  .mercador-balao::after {
    content: ''; position: absolute; left: 2.2rem;
    border: 13px solid transparent; border-top: 0;
  }
  .mercador-balao::before { top: -13px; border-bottom-color: var(--ouro); }
  .mercador-balao::after  { top: -12px; border-bottom-color: var(--painel-2); }
}

/* ---- o cartão do booster ----------------------------------------------
   Era uma faixa da largura toda com a arte em 64x86 e o texto esticado.
   Agora tem largura própria e a arte grande. */
.booster-cartao {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 760px;
  background: var(--painel); border: 1px solid var(--borda-viva);
  border-top: 3px solid var(--ouro);
  border-radius: var(--raio); padding: clamp(.9rem, 1.8vw, 1.3rem);
}
@media (min-width: 620px) { .booster-cartao { grid-template-columns: 190px 1fr; gap: 1.3rem; } }

.booster-cartao-arte {
  aspect-ratio: 5/7; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--ouro);
  background: linear-gradient(150deg, #24403C, #0E1A18 70%);
  display: grid; place-items: center;
  box-shadow: 0 14px 32px -14px rgba(0,0,0,.9);
}
.booster-cartao-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booster-sem-arte {
  display: grid; place-items: center; font: 700 2rem/1 var(--cond); color: var(--ouro);
}
.booster-sem-arte small {
  display: block; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-fraco); margin-top: .2rem;
}

.booster-cartao-corpo { display: flex; flex-direction: column; min-width: 0; }
.booster-cartao-selo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; color: var(--ouro);
}
.booster-cartao-nome { font-family: var(--serif); margin: .3rem 0 .3rem; font-size: 1.3rem; }
.booster-cartao-desc { margin: 0 0 .8rem; color: var(--texto-fraco); font-size: .92rem; line-height: 1.45; }

.booster-cartao-escada { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; padding: 0; }
.booster-cartao-escada li {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em;
  font-size: .72rem; color: var(--texto-fraco);
  border: 1px solid var(--borda); border-radius: var(--raio-p); padding: .2rem .5rem;
}
.booster-cartao-escada b { color: var(--texto); font-size: .84rem; }
.booster-cartao-nota { font-size: .78rem; color: var(--texto-fraco); margin: 0 0 .9rem; }
.booster-cartao-acao { margin-top: auto; }
.booster-cartao-acao .btn { width: 100%; }
@media (min-width: 620px) { .booster-cartao-acao .btn { width: auto; } }

/* ---- a grade da banca respira um pouco mais --------------------------- */
.banca-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); }

/* ==============================================================================
   1.6 — A PORTA DE ENTRADA: LOGO, INSTITUCIONAL E O ZIGUEZAGUE
   ============================================================================== */

/* a logo abre a coluna da esquerda, no lugar do cabeçalho que saiu */
.marca-entrada { margin: .5rem 0 1.4rem; }
.marca-entrada img { width: min(300px, 62%); height: auto; display: block; }

.institucional p { margin: 0 0 .9rem; line-height: 1.6; max-width: var(--medida); }
.destaque-catalogo {
  border-left: 3px solid var(--menta); padding: .6rem .9rem;
  background: var(--painel); border-radius: 0 var(--raio-p) var(--raio-p) 0;
}

/* ---- O ZIGUEZAGUE ----------------------------------------------------
   Seis linhas, o mascote alternando de lado. A troca de lado é feita com
   `direction: rtl` no container e `ltr` de volta no conteúdo: assim as
   duas colunas invertem sem eu precisar reordenar nada no PHP nem repetir
   a marcação. O texto continua lendo da esquerda para a direita.

   A pose do cajado vem do PHP e acompanha o lado — o mascote sempre
   aponta PARA o quadro, nunca para fora dele. */
.zigue { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); margin-bottom: var(--respiro); }

.zigue-linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  align-items: center;
}
@media (min-width: 720px) {
  .zigue-linha { grid-template-columns: 168px 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
  .zigue-linha.ao-contrario { direction: rtl; }
  .zigue-linha.ao-contrario > * { direction: ltr; }
}

.zigue-mascote { display: grid; place-items: center; }
.zigue-mascote img {
  width: 100%; max-width: 168px; height: auto;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.7));
}
@media (max-width: 719px) { .zigue-mascote img { max-width: 118px; } }

.zigue-quadro {
  background: var(--painel); border: 1px solid var(--borda-viva);
  border-radius: var(--raio); padding: 1rem 1.1rem;
  border-top: 3px solid var(--ouro);
}
.zigue-quadro h3 {
  font-family: var(--serif); margin: 0 0 .4rem; font-size: 1.12rem;
}
.zigue-quadro p { margin: 0; line-height: 1.55; font-size: .93rem; }

/* ==============================================================================
   1.6 — O CADASTRO EM DUAS COLUNAS
   ==============================================================================
   As regras do nome e o "guarde bem a senha" estavam EMBAIXO do formulário.
   Para ler a regra você rolava a tela; para preencher o campo, rolava de
   volta. Agora ficam lado a lado, e a coluna das regras acompanha a rolagem
   (`sticky`) enquanto o formulário é preenchido.
   ============================================================================== */
.cadastro-grade { display: grid; grid-template-columns: 1fr; gap: var(--folga); align-items: start; }
@media (min-width: 940px) {
  .cadastro-grade { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
  .cadastro-regras { position: sticky; top: 6rem; }
}
.cadastro-regras .cartao + .cartao { margin-top: .9rem; }
.cadastro-regras ul { margin: .2rem 0 0; padding-left: 1.15rem; }
.cadastro-regras li { margin-bottom: .5rem; line-height: 1.5; }
.cadastro-regras li::marker { color: var(--ouro); }

/* ==============================================================================
   1.6 — A LUPA DA LOJA
   ==============================================================================
   Reaproveita .lupa-carta / .lupa-caixa / .lupa-arte / .lupa-info, que já
   existiam para a abertura do booster. O que entra aqui é só o que a loja
   precisa a mais: a arte da carta virou botão, e a lupa ganhou preço.
   ============================================================================== */

/* a arte do quadro agora é clicável */
.banca-item-abrir {
  appearance: none; border: 0; padding: 0; margin: 0; cursor: zoom-in;
  width: 100%; display: block; font: inherit; color: inherit;
}
.banca-item-abrir:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }

.banca-lupa-dica {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(6,12,11,.92), transparent);
  color: var(--menta); font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .1em; font-size: .64rem; padding: .5rem .3rem .3rem;
  opacity: 0; transition: opacity .14s;
}
.banca-item-abrir:hover .banca-lupa-dica,
.banca-item-abrir:focus-visible .banca-lupa-dica { opacity: 1; }
@media (hover: none) { .banca-lupa-dica { opacity: .85; } }

/* o preço dentro da lupa */
.lupa-preco { margin: .9rem 0 .7rem; }
.lupa-preco .oneub b { font: 700 1.6rem/1 var(--cond); }
.lupa-carta[hidden] { display: none !important; }