/* =====================================================================
   MAGIC THE MINAS — folha de estilo  ·  versão 1.4
   Cores e fontes tiradas da planilha "minha coleção MTG.xlsx":
   verde-escuro de pântano, menta, ouro e osso.

   O QUE MUDOU NA 1.4 — A LARGURA
   ------------------------------
   Antes: --largura: 1240px, fixo. Num monitor de 1920 ou 2560 sobravam
   340 a 660 pixels de fundo vazio de cada lado, e o site inteiro ficava
   espremido numa coluna no meio da tela. Era esse o incômodo.

   Agora a página respira: ela usa a largura que o navegador tem, com um
   teto alto (--largura-max) só para o texto não virar uma linha de dois
   metros. Tudo o que é medida — margem, respiro, título — cresce junto,
   com clamp(), do celular ao monitor grande. Nenhum número mágico solto.

   A regra é simples e vale para o site todo:
     · CAIXA  (cartão, grade, tabela, cartas) — estica com a tela;
     · TEXTO  (parágrafo corrido)             — para em 68 caracteres,
       porque linha comprida demais cansa a vista e ninguém lê.
   ===================================================================== */

:root {
  /* fundos */
  --fundo:      #0E1A18;
  --painel:     #152322;
  --painel-2:   #1B2C2A;
  --borda:      #273B37;
  --borda-viva: #38524C;

  /* texto */
  --texto:      #E7E2D4;
  --texto-fraco:#8A9A93;

  /* acentos */
  --menta:      #7FD8C2;
  --verde:      #4FB09A;
  --ouro:       #C79246;
  --salmao:     #E9A88C;
  --vermelho:   #D4736B;

  /* níveis */
  --nv-vermelho:#C0392B;
  --nv-verde:   #3F9E62;
  --nv-azul:    #3D82C4;
  --nv-preto:   #101010;

  /* cores de mana */
  --mana-w: #F8F0D8; --mana-u: #9FC6E8; --mana-b: #A99BB0;
  --mana-r: #E8A08C; --mana-g: #92C99A; --mana-c: #C4C0B4;

  --raio:   10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);

  --serif:  'Spectral', Georgia, 'Times New Roman', serif;
  --sans:   'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cond:   'Barlow Condensed', 'Barlow', sans-serif;

  /* ------------------------------------------------------------------
     A LARGURA — o coração do ajuste da 1.4
     --largura-max  teto do conteúdo em monitor grande. Quer o site mais
                    largo ainda? Suba este número. Mais estreito? Desça.
     --folga        margem lateral: 14px no celular, até 40px no monitor.
     --largura      o que as caixas realmente usam.
     ------------------------------------------------------------------ */
  --largura-max: 1720px;
  --folga:       clamp(.85rem, 2.2vw, 2.5rem);
  --largura:     min(100%, var(--largura-max));

  /* medida de leitura: parágrafo corrido não passa disto */
  --medida: 68ch;

  /* respiro vertical que também acompanha a tela */
  --respiro:   clamp(1rem, 1.6vw, 1.75rem);
  --respiro-g: clamp(1.4rem, 2.6vw, 2.6rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  /* o corpo cresce um pouquinho em tela grande — 15px a 16,5px */
  font: 400 clamp(15px, 0.28vw + 14.2px, 16.5px)/1.55 var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;

  /* Nada pode empurrar a página para o lado.
     ATENÇÃO ao trocar isto por overflow-x:hidden: `hidden` no body
     transforma o body num container de rolagem, e aí TODO position:sticky
     de dentro dele para de funcionar — o cabeçalho, a barra de turno da
     mesa e o índice do manual descolariam. `clip` corta igual e não cria
     container. Navegador antigo que não conhece `clip` simplesmente
     ignora esta linha e fica como era antes da 1.4: sem regressão. */
  overflow-x: clip;
}

/* fundo com textura discreta de pergaminho velho */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(127,216,194,.055), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(199,146,70,.05), transparent 60%);
}

a { color: var(--menta); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.45rem, 1.1vw + 1.1rem, 2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.15rem, .5vw + 1rem, 1.45rem); }
h3 { font-size: clamp(1rem, .3vw + .92rem, 1.15rem); }

.sub { color: var(--texto-fraco); font-size: .92rem; margin: 0 0 1rem; max-width: var(--medida); }

/* imagem, vídeo e tabela nunca estouram a caixa que os segura */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde); color: #06120F; padding: .5rem 1rem; border-radius: 0 0 6px 0;
}
.pular:focus { left: 0; }

/* =====================================================================
   TOPO
   ===================================================================== */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,26,24,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.topo-linha {
  width: 100%; max-width: var(--largura-max); margin: 0 auto;
  padding: .5rem var(--folga);
  display: flex; align-items: center; gap: 1.25rem;
}

/* a logo é o botão de voltar ao painel */
.marca { display: block; flex: 0 0 auto; line-height: 0; }
.marca img {
  display: block; height: 46px; width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition: transform .15s ease, filter .15s ease;
}
.marca:hover img { transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 4px 12px rgba(199,146,70,.35)); }
.marca:hover { text-decoration: none; }

/* quem está logado, à direita */
.mago-chip {
  display: flex; align-items: center; gap: .7rem; margin-left: auto;
  white-space: nowrap;
}
.mago-foto {
  position: relative; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; overflow: visible;
  border: 2px solid var(--borda-viva); background: var(--painel-2);
  display: grid; place-items: center;
}
.mago-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mago-foto span { font: 600 .9rem var(--cond); color: var(--menta); letter-spacing: .04em; }
.mago-foto:hover { border-color: var(--menta); text-decoration: none; }
.mago-foto .badge {
  position: absolute; top: -5px; right: -5px; 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;
}

.mago-id { line-height: 1.15; }
.mago-linha { font-size: .9rem; }
.mago-titulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem; color: var(--ouro);
}
.mago-nome { color: var(--texto); font-weight: 600; }
.mago-num {
  font-family: ui-monospace, Menlo, monospace; font-size: .7rem;
  color: var(--texto-fraco); letter-spacing: .04em;
}

/* ------------------------------------------------------------- menu */
.menu {
  width: 100%; max-width: var(--largura-max); margin: 0 auto;
  padding: 0 var(--folga) .5rem;
  display: flex; align-items: center; gap: .35rem 1.1rem; flex-wrap: wrap;
}
.menu-grupo { display: flex; gap: .2rem; flex-wrap: wrap; position: relative; }
.menu-grupo + .menu-grupo::before {
  content: ''; position: absolute; left: -.55rem; top: 18%; bottom: 18%;
  width: 1px; background: var(--borda);
}
.menu a {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: var(--cond); font-size: .95rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-fraco); padding: .35rem .65rem; border-radius: var(--raio-p);
  position: relative; transition: .12s;
}
.menu a:hover { color: var(--texto); background: var(--painel-2); text-decoration: none; }
.menu a.ativo { color: var(--menta); background: rgba(127,216,194,.09); }
.menu a.ativo .ico-menu { opacity: 1; }

.ico-menu { width: 15px; height: 15px; object-fit: contain; opacity: .8; flex: 0 0 auto; }
.ico-pw  { height: 16px; }
.ico-tri { color: var(--nv-vermelho); width: 16px; height: 15px; opacity: 1; }
.ico-pasta { color: var(--ouro); width: 16px; height: 15px; opacity: 1; }
.menu a.conquistas:hover .ico-tri { color: #e5564a; }

.menu a .ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ouro);
  margin-left: .1rem; box-shadow: 0 0 0 3px rgba(199,146,70,.18);
  animation: pisca 1.8s ease-in-out infinite;
}
@keyframes pisca { 50% { opacity: .35; } }

.menu-arquimago a { color: var(--ouro); }
.menu-arquimago a:hover { background: rgba(199,146,70,.1); }
.menu-livre a { color: var(--ouro); }
.menu-livre a:hover { background: rgba(199,146,70,.1); }

/* =====================================================================
   SELOS DE NÍVEL
   Ficam aqui só por compatibilidade: desde a 1.4 NENHUMA tela do site
   usa forma geométrica para nível — quem manda é o emblema em PNG
   (emblemaNivel(), no app/niveis.php).
   ===================================================================== */
.nv {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; flex: 0 0 auto;
  vertical-align: -4px; position: relative;
  font: 700 .68rem/1 var(--sans); font-style: normal;
  color: #fff;
}
.nv i { font-style: normal; position: relative; z-index: 2; }
.nv::before { content: ''; position: absolute; inset: 0; z-index: 1; }

.nv-quadrado::before  { background: var(--nv-vermelho); border-radius: 3px; }
.nv-circulo::before   { background: var(--nv-verde);    border-radius: 50%; }
.nv-triangulo::before { background: var(--nv-azul); clip-path: polygon(50% 2%, 100% 98%, 0 98%); }
.nv-triangulo i       { transform: translateY(3px); font-size: .62rem; }
.nv-diamante::before  { background: var(--nv-preto); border: 1px solid #3a3a3a;
                        transform: rotate(45deg) scale(.76); border-radius: 2px; }
.nv-hexagono::before  { background: var(--nv-preto); border: 1px solid #3a3a3a;
                        clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.nv-diamante, .nv-hexagono { color: #fff; }

.nv-foil { color: #1a1030; text-shadow: 0 0 3px rgba(255,255,255,.8); }
.nv-foil::before {
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  background: linear-gradient(115deg,
    #ff8ab5 0%, #ffd97a 14%, #b9ff8f 28%, #8ef0ff 42%,
    #a58bff 56%, #ff8ab5 70%, #ffd97a 84%, #8ef0ff 100%);
  background-size: 340% 340%;
  animation: foil 4.2s linear infinite;
}
.nv-foil::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  background: linear-gradient(60deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  background-size: 260% 260%;
  animation: foil-brilho 2.6s linear infinite;
  mix-blend-mode: screen;
}
@keyframes foil       { 0% { background-position: 0% 50%; } 100% { background-position: 340% 50%; } }
@keyframes foil-brilho{ 0% { background-position: 120% 0; } 100% { background-position: -60% 0; } }

.nv-arquimago {
  color: var(--ouro); font-size: 1rem; width: auto; height: auto;
  text-shadow: 0 0 8px rgba(199,146,70,.6);
}
.nv-arquimago::before { display: none; }

.nv.grande { width: 34px; height: 34px; font-size: 1rem; vertical-align: -8px; }
.nv.grande.nv-triangulo i { font-size: .9rem; }

/* =====================================================================
   ESTRUTURA — é aqui que a página deixou de ficar espremida
   ===================================================================== */
.pagina {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding: var(--respiro) var(--folga) 4rem;
}
/* as duas exceções: formulário curto e página de leitura */
.pagina-estreita { max-width: min(100%, 460px); }
.pagina-media    { max-width: min(100%, 900px); }

.cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: var(--respiro);
}
.cabeca > div:first-child { min-width: 0; }

.cartao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: clamp(.9rem, 1.1vw, 1.4rem);
  box-shadow: var(--sombra);
  min-width: 0;
}
.cartao + .cartao { margin-top: 1rem; }
.cartao-titulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; color: var(--ouro); margin: 0 0 .85rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: .5rem; justify-content: space-between;
  flex-wrap: wrap;
}
.cartao-titulo .direita-titulo { color: var(--texto-fraco); letter-spacing: .06em; }

/* ------------------------------------------------------------- grades
   minmax(min(100%, N), 1fr): o min() interno é o que impede a coluna de
   ser mais larga que a tela do celular — sem ele, uma grade de 300px
   estoura a página em aparelho de 320px. */
.grade { display: grid; gap: clamp(.7rem, 1.1vw, 1.25rem); align-items: start; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grade-lado { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
@media (max-width: 900px) { .grade-lado { grid-template-columns: 1fr; } }

/* Em monitor largo a grade de 3 não vira uma fileira infinita de
   cartõezinhos: ela para de crescer e passa a encher com mais colunas
   de tamanho decente. */
@media (min-width: 1500px) {
  .grade-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .grade-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ------------------------------------------------------------- números */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px),1fr)); gap: .75rem; }
.numero {
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1rem; min-width: 0;
}
.numero .valor { font-family: var(--serif); font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2.1rem); font-weight: 600; line-height: 1; color: var(--texto); }
.numero .rotulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; color: var(--texto-fraco); margin-top: .35rem;
}
.numero.menta .valor { color: var(--menta); }
.numero.ouro  .valor { color: var(--ouro); }

/* ------------------------------------------------------------ formulário */
label {
  display: block; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .1em; font-size: .74rem; color: var(--texto-fraco); margin-bottom: .3rem;
}
input[type=text], input[type=password], input[type=number], input[type=search],
input[type=email], input[type=file], select, textarea {
  width: 100%; max-width: 100%; padding: .6rem .75rem;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  font: 400 .95rem/1.4 var(--sans);
}
input[type=file] { padding: .45rem .5rem; font-size: .88rem; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(79,176,154,.15);
}
textarea { min-height: 140px; resize: vertical; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88rem; }
textarea.texto-normal { font-family: var(--sans); font-size: .95rem; min-height: 110px; }
.campo { margin-bottom: .9rem; }
.dica { font-size: .8rem; color: var(--texto-fraco); margin-top: .3rem; max-width: var(--medida); }
.caixa-marcar {
  display: flex; align-items: center; gap: .5rem;
  text-transform: none; letter-spacing: 0; color: var(--texto);
  font-family: var(--sans); font-size: .9rem; margin: 0;
}
.caixa-marcar input { width: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .58rem 1.1rem; border: 1px solid var(--borda-viva); border-radius: var(--raio-p);
  background: var(--painel-2); color: var(--texto); cursor: pointer;
  font-family: var(--cond); font-size: .95rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; transition: .12s;
  touch-action: manipulation;
}
.btn:hover { background: var(--borda); text-decoration: none; }
.btn-principal { background: var(--verde); border-color: var(--verde); color: #06120F; font-weight: 600; }
.btn-principal:hover { background: var(--menta); border-color: var(--menta); }
.btn-perigo { border-color: rgba(212,115,107,.4); color: var(--vermelho); }
.btn-perigo:hover { background: rgba(212,115,107,.12); }
.btn-ouro { border-color: rgba(199,146,70,.5); color: var(--ouro); }
.btn-ouro:hover { background: rgba(199,146,70,.12); }
.btn-p { padding: .3rem .6rem; font-size: .82rem; }
.btn-largo { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.ico-lixo { width: 15px; height: 15px; }

/* --------------------------------------------------------------- avisos */
.recado {
  padding: .7rem 1rem; border-radius: var(--raio-p); margin-bottom: 1rem;
  border-left: 3px solid; font-size: .92rem;
}
.recado.ok     { background: rgba(79,176,154,.1);  border-color: var(--verde);   color: var(--menta); }
.recado.aviso  { background: rgba(199,146,70,.1);  border-color: var(--ouro);    color: var(--ouro); }
.recado.erro   { background: rgba(212,115,107,.1); border-color: var(--vermelho);color: var(--salmao); }

/* --------------------------------------------------------------- tabela */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
/* Tabela larga rola DENTRO da própria caixa. É o que impede a página
   inteira de andar para o lado no celular.

   A sombra de rolagem abaixo é o truque clássico do `background-attachment:
   local`: as sombras das pontas aparecem SÓ quando existe conteúdo escondido
   naquele lado, e somem sozinhas quando a rolagem chega ao fim. Sem elas o
   mago no celular não tem como saber que a tabela continua para a direita —
   e uma tabela que parece cortada é pior do que uma tabela que rola. */
.rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background:
    linear-gradient(to right,  var(--painel) 40%, rgba(21,35,34,0)) left  / 28px 100% no-repeat local,
    linear-gradient(to left,   var(--painel) 40%, rgba(21,35,34,0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left  / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right / 14px 100% no-repeat scroll;
}
thead th {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--texto-fraco); text-align: left;
  padding: .5rem .6rem; border-bottom: 1px solid var(--borda); font-weight: 600;
}
tbody td { padding: .5rem .6rem; border-bottom: 1px solid rgba(39,59,55,.5); vertical-align: middle; }
tbody tr:hover { background: var(--painel-2); }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }

.secao-linha td {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; color: var(--ouro); background: var(--painel-2);
  padding: .45rem .6rem; font-weight: 600;
}

/* ---------------------------------------------------------------- selos */
.selo {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-family: var(--cond); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--borda-viva); color: var(--texto-fraco);
}
.selo.tenho  { background: rgba(79,176,154,.14);  border-color: rgba(79,176,154,.4);  color: var(--menta); }
.selo.falta  { background: rgba(212,115,107,.12); border-color: rgba(212,115,107,.4); color: var(--salmao); }
.selo.ouro   { background: rgba(199,146,70,.12);  border-color: rgba(199,146,70,.4);  color: var(--ouro); }

/* --------------------------------------------------------- mana e cores */
.mana {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; margin-right: 2px;
  font: 700 10px/1 var(--sans); font-style: normal;
  background: var(--mana-c); color: #14201E; vertical-align: middle;
}
.mana-w { background: var(--mana-w); } .mana-u { background: var(--mana-u); }
.mana-b { background: var(--mana-b); } .mana-r { background: var(--mana-r); }
.mana-g { background: var(--mana-g); }
.mana-wu,.mana-ub,.mana-br,.mana-rg,.mana-gw,.mana-wb,.mana-ur,.mana-bg,.mana-rw,.mana-gu {
  background: linear-gradient(135deg, var(--mana-c) 50%, var(--ouro) 50%); font-size: 8px;
}
.mana-x, .mana-t, .mana-q { background: var(--mana-c); }

/* Base do .pip. O desenho vem do pip-imagem.css, que troca a bolinha
   pelo PNG do símbolo. Quando não existe PNG (híbrido, {X}, {T}), a
   bolinha continua — mas com a MESMA altura, para a linha não desalinhar. */
.pip {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  margin-right: 3px; vertical-align: -3px;
}
.pip-W{background:var(--mana-w)} .pip-U{background:var(--mana-u)} .pip-B{background:var(--mana-b)}
.pip-R{background:var(--mana-r)} .pip-G{background:var(--mana-g)} .pip-C{background:var(--mana-c)}

/* ------------------------------------------------------------- cartinhas */
.cartas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: clamp(.5rem, .8vw, 1rem);
}
.cartinha { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--painel-2); }
.cartinha img { display: block; width: 100%; aspect-ratio: 488/680; object-fit: cover; background: var(--painel-2); }
.cartinha .qtd {
  position: absolute; top: 6px; left: 6px;
  background: rgba(14,26,24,.9); border: 1px solid var(--borda-viva);
  color: var(--menta); font: 600 .78rem var(--cond); padding: .1rem .4rem; border-radius: 4px;
}
.cartinha .nome {
  position: absolute; inset: auto 0 0 0; padding: .5rem .55rem .4rem;
  background: linear-gradient(transparent, rgba(14,26,24,.96) 55%);
  font: 500 .8rem/1.2 var(--sans); color: var(--texto);
}
.cartinha:hover { outline: 2px solid var(--verde); outline-offset: -2px; }

.preview {
  position: fixed; z-index: 90; width: 240px; pointer-events: none;
  border-radius: 12px; box-shadow: 0 20px 50px -12px rgba(0,0,0,.85);
  display: none;
}
.preview img { width: 100%; display: block; border-radius: 12px; }
/* No toque não existe "passar o mouse": a lupa só atrapalharia. */
@media (hover: none) { .preview { display: none !important; } }

.nome-carta { cursor: help; border-bottom: 1px dotted var(--borda-viva); }
.nome-ptbr { color: var(--texto-fraco); font-size: .84rem; font-style: italic; }

/* ---------------------------------------------------------- curva de mana */
.curva { display: flex; align-items: flex-end; gap: 5px; height: 108px; }
.curva .barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: center; }
.curva .haste { background: linear-gradient(180deg, var(--verde), rgba(79,176,154,.35)); border-radius: 3px 3px 0 0; min-height: 2px; }
.curva .cmc { font: 600 .7rem var(--cond); color: var(--texto-fraco); }
.curva .qtd { font: 600 .72rem var(--cond); color: var(--menta); }

/* ------------------------------------------------------------ progresso */
.barra-prog { height: 7px; background: var(--fundo); border-radius: 999px; overflow: hidden; border: 1px solid var(--borda); }
.barra-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--menta)); transition: width .4s; }
.barra-prog.alta { height: 11px; }

/* =====================================================================
   PÁGINA INICIAL
   ===================================================================== */
.capa {
  text-align: center; padding: var(--respiro-g) var(--folga) 2rem;
  border-bottom: 1px solid var(--borda); margin-bottom: 2rem;
}
.capa img.capa-logo { width: min(460px, 78vw); height: auto; margin-bottom: 1rem;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.6)); }
.capa h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); margin-bottom: .4rem; }
.capa .linha-fina {
  color: var(--texto-fraco); font-size: 1.02rem; max-width: 62ch; margin: 0 auto 1.4rem;
}
.capa .flex { justify-content: center; flex-wrap: wrap; }

.bloco-texto { max-width: min(100%, 80ch); margin: 0 auto; }
.bloco-texto p { margin: 0 0 .85rem; }
.bloco-texto h2 { margin-top: 1.6rem; }

.passos { counter-reset: passo; display: grid; gap: .7rem; }
.passo {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .9rem 1rem;
}
.passo::before {
  counter-increment: passo; content: counter(passo);
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(127,216,194,.12); border: 1px solid rgba(127,216,194,.35);
  color: var(--menta); font: 600 .85rem/24px var(--cond); text-align: center;
}
.passo b { display: block; margin-bottom: .1rem; }
.passo span { color: var(--texto-fraco); font-size: .9rem; }

/* Em monitor grande os passos ficam lado a lado em vez de virar uma
   coluna magra e comprida no meio do vazio. */
@media (min-width: 1200px) {
  .passos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* =====================================================================
   CONQUISTAS
   ===================================================================== */
.conq-cabeca {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: clamp(1rem, 1.2vw, 1.4rem); margin-bottom: 1rem;
}
.conq-emblema {
  width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%;
  background: var(--painel-2); border: 2px solid var(--borda-viva);
  display: grid; place-items: center; overflow: hidden;
}
.conq-emblema img { width: 100%; height: 100%; object-fit: contain; }
.conq-emblema .vazio-emblema { font: 600 1.6rem var(--serif); color: var(--borda-viva); }
.conq-cabeca .quem { flex: 1; min-width: min(100%, 220px); }
.conq-cabeca .quem h1 { margin-bottom: .15rem; }
.conq-cabeca .nivel-linha {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; color: var(--ouro);
}

.trilha { display: flex; gap: 3px; margin: .8rem 0 .4rem; }
.trilha i {
  flex: 1; height: 10px; border-radius: 2px;
  background: var(--fundo); border: 1px solid var(--borda);
}
.trilha i.feito { border-color: transparent; }
.trilha i.elementar { background: linear-gradient(180deg,#8FD3C0,#4FB09A); }
.trilha i.bronze    { background: linear-gradient(180deg,#D19A5E,#96663A); }
.trilha i.prata     { background: linear-gradient(180deg,#DCE3E6,#96A4AB); }
.trilha i.ouro      { background: linear-gradient(180deg,#F0CE7A,#C79246); }
.trilha i.mitico    { background: linear-gradient(120deg,#ff8ab5,#ffd97a,#8ef0ff,#a58bff); }

/* card da conquista aberta */
.conq-aberta {
  border-color: rgba(199,146,70,.45);
  box-shadow: var(--sombra), 0 0 0 1px rgba(199,146,70,.18);
}
.conq-aberta .topo-aberta { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.conq-aberta .conq-emblema { width: 64px; height: 64px; animation: brilho 2.4s ease-in-out infinite; }
@keyframes brilho {
  0%,100% { box-shadow: 0 0 0 0 rgba(199,146,70,.35); }
  50%     { box-shadow: 0 0 0 8px rgba(199,146,70,0); }
}
.conq-partes { display: grid; gap: .45rem; margin-top: .9rem; }
.conq-parte { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; font-size: .88rem; }
.conq-parte .barra-prog { grid-column: 1 / -1; }
.conq-parte.ok { color: var(--menta); }

/* ampulheta */
.ampulheta {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1rem 1.2rem;
}
.amp-desenho { width: 54px; height: 74px; flex: 0 0 auto; position: relative; }
.amp-desenho svg { width: 100%; height: 100%; display: block; }
.amp-areia-cima, .amp-areia-baixo { transition: all 1s linear; }
.ampulheta.disponivel .amp-desenho { transform: rotate(90deg); }
.ampulheta.disponivel { border-color: rgba(127,216,194,.4); }
.amp-conta {
  font-family: var(--serif); font-size: clamp(1.15rem, 1vw + .9rem, 1.5rem); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.amp-quando { font-size: .85rem; color: var(--texto-fraco); }
.amp-rotulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; color: var(--ouro); margin-bottom: .15rem;
}

/* o quadro das 20 casas — agora respira em tela larga */
.quadro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: clamp(.5rem, .8vw, 1rem);
}
@media (min-width: 1500px) { .quadro { grid-template-columns: repeat(10, 1fr); } }
@media (min-width: 1100px) and (max-width: 1499px) { .quadro { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 560px)  { .quadro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 359px)  { .quadro { grid-template-columns: 1fr; } }

.casa {
  background: var(--painel-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .8rem .6rem; text-align: center;
  position: relative; min-height: 150px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.casa .selo-emb {
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  background: var(--fundo); border: 1px solid var(--borda-viva);
  display: grid; place-items: center;
}
.casa .selo-emb img { width: 100%; height: 100%; object-fit: contain; }
.casa .selo-emb .num { font: 600 1.15rem var(--serif); color: var(--borda-viva); }
.casa .casa-nome { font: 600 .82rem/1.2 var(--sans); overflow-wrap: anywhere; }
.casa .casa-pe { font: 500 .7rem var(--cond); letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-fraco); margin-top: auto; }

.casa.concluida { border-color: rgba(199,146,70,.5); }
.casa.concluida .selo-emb { border-color: var(--ouro); box-shadow: 0 0 0 1px rgba(199,146,70,.25); }
.casa.concluida .casa-pe { color: var(--ouro); }

.casa.liberada { border-color: rgba(127,216,194,.45); }
.casa.liberada .selo-emb { animation: brilho 2.4s ease-in-out infinite; }
.casa.liberada .casa-pe { color: var(--menta); }

/* aviso de conquista nova */
.aviso-conq {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(8,14,13,.72); backdrop-filter: blur(3px); padding: 1rem;
}
.aviso-conq .caixa {
  background: var(--painel); border: 1px solid var(--ouro); border-radius: 14px;
  padding: 2rem 2.2rem; text-align: center; max-width: min(100%, 400px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
  animation: sobe .35s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes sobe { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.aviso-conq .conq-emblema { margin: 0 auto .9rem; width: 92px; height: 92px; }
.aviso-conq h2 { color: var(--ouro); }

/* =====================================================================
   MINHA CONTA · SUPORTE · MENSAGENS
   ===================================================================== */
.abas {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda); margin-bottom: 1.2rem;
  overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: .88rem; color: var(--texto-fraco); white-space: nowrap;
  padding: .5rem .85rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas a:hover { color: var(--texto); text-decoration: none; }
.abas a.ativo { color: var(--menta); border-bottom-color: var(--verde); }

.perfil-topo { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.perfil-foto {
  width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--borda-viva); background: var(--painel-2);
  display: grid; place-items: center; overflow: hidden;
}
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil-foto span { font: 600 1.9rem var(--cond); color: var(--menta); }

.msg-lista { display: grid; gap: .6rem; }
.msg {
  background: var(--painel-2); border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-viva);
  border-radius: var(--raio-p); padding: .8rem 1rem;
}
.msg.nova { border-left-color: var(--ouro); background: rgba(199,146,70,.06); }
.msg .msg-topo {
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; color: var(--texto-fraco); margin-bottom: .35rem;
}
.msg .msg-topo b { color: var(--ouro); font-weight: 600; }
.msg h4 { margin: 0 0 .3rem; font-size: .98rem; }
.msg .corpo { white-space: pre-wrap; font-size: .92rem; overflow-wrap: anywhere; }
.msg .anexo-img { max-width: 220px; border-radius: 6px; margin-top: .6rem; display: block; }

.ticket {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--painel-2); padding: .9rem 1.05rem; margin-bottom: .7rem;
}
.ticket .cab { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.ticket .resposta {
  border-left: 2px solid var(--verde); padding: .5rem .8rem; margin: .6rem 0 0 .5rem;
  background: rgba(79,176,154,.06); border-radius: 0 6px 6px 0; white-space: pre-wrap; font-size: .9rem;
}
.contador-letras { font-size: .78rem; color: var(--texto-fraco); text-align: right; }
.contador-letras.perto { color: var(--ouro); }
.contador-letras.estourou { color: var(--vermelho); }

/* =====================================================================
   MANUAL
   ===================================================================== */
.manual-corpo h2 {
  color: var(--ouro); border-bottom: 1px solid var(--borda);
  padding-bottom: .4rem; margin-top: 2rem;
}
.manual-corpo h3 { color: var(--menta); margin-top: 1.4rem; }
.manual-corpo ul, .manual-corpo ol { padding-left: 1.3rem; }
.manual-corpo li { margin-bottom: .35rem; }
/* leitura: o parágrafo do manual não vira uma linha de dois metros */
.manual-corpo p, .manual-corpo li { max-width: var(--medida); }
.manual-indice {
  position: sticky; top: 130px;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1rem;
  max-height: calc(100vh - 160px); overflow-y: auto;
}
.manual-indice ul { list-style: none; margin: 0; padding: 0; }
.manual-indice li { margin-bottom: .3rem; }
.manual-indice a { font-size: .9rem; }
@media (max-width: 900px) { .manual-indice { position: static; max-height: none; } }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.rodape {
  border-top: 1px solid var(--borda); margin-top: 3rem;
  color: var(--texto-fraco); font-size: .82rem;
  background: rgba(10,19,18,.6);
}
.rodape p { margin: .25rem 0; }

.rodape-fora { padding: 1rem var(--folga) 1.2rem; text-align: center; }
.rodape-fora p { font-size: .78rem; }

.rodape-dentro { padding: 1.6rem var(--folga) 2rem; }
.rodape-caixa {
  width: 100%; max-width: var(--largura-max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 2rem;
  align-items: start;
}
.rodape-titulo {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--ouro); margin-bottom: .45rem;
}
.rodape-titulo.mt { margin-top: 1.1rem; }
.rodape-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .8rem;
}
.rodape-menu a { color: var(--texto-fraco); font-size: .84rem; }
.rodape-menu a:hover { color: var(--menta); }
.rodape-texto { text-align: right; }
@media (max-width: 720px) {
  .rodape-caixa { grid-template-columns: 1fr; gap: 1.4rem; }
  .rodape-texto { text-align: left; }
}

/* =====================================================================
   UTILIDADES
   ===================================================================== */
.flex { display: flex; gap: .6rem; align-items: center; }
.flex-fim { justify-content: flex-end; }
.entre { justify-content: space-between; }
.crescer { flex: 1; min-width: 0; }
.quebra { flex-wrap: wrap; }
.direita { text-align: right; }
.centro { text-align: center; }
.fraco { color: var(--texto-fraco); }
.menta { color: var(--menta); }
.ouro  { color: var(--ouro); }
.salmao{ color: var(--salmao); }
.mono  { font-family: ui-monospace, Menlo, monospace; font-size: .88rem; }
.codigo-grande {
  font-family: ui-monospace, Menlo, monospace; font-size: 1.5rem; letter-spacing: .18em;
  color: var(--ouro); background: var(--fundo); border: 1px dashed var(--borda-viva);
  padding: .6rem 1rem; border-radius: var(--raio-p); display: inline-block;
}
.mt { margin-top: 1rem; } .mt2 { margin-top: 1.75rem; } .mb { margin-bottom: 1rem; }
.mb0 { margin-bottom: 0; }
.nada { text-align: center; color: var(--texto-fraco); padding: 2.5rem 1rem; font-style: italic; }

/* =====================================================================
   CELULAR — a passada completa
   Tudo aqui existe por um motivo prático, não por enfeite:
     · o cabeçalho encolhe mas o menu continua alcançável, rolando;
     · nada rola para o lado a não ser dentro de .rolagem;
     · botão e campo ficam com 44px de altura, que é o dedo médio;
     · o que é decoração (mascote, lupa) some para não roubar tela.
   ===================================================================== */
@media (max-width: 760px) {
  .topo-linha { padding: .45rem var(--folga); gap: .7rem; }
  .marca img { height: 36px; }
  .mago-id { display: none; }

  .menu { padding: 0 .5rem .45rem; gap: .2rem .5rem; flex-wrap: nowrap; overflow-x: auto; }
  .menu::-webkit-scrollbar { display: none; }
  .menu { scrollbar-width: none; }
  .menu-grupo { flex-wrap: nowrap; }
  .menu-grupo + .menu-grupo::before { left: -.28rem; }
  .menu a { padding: .38rem .5rem; font-size: .86rem; }
  .menu a span { display: inline; }

  .pagina { padding: 1.1rem var(--folga) 3rem; }
  .cabeca { gap: .7rem; }
  .cabeca .flex { width: 100%; }

  /* dedo, não mouse */
  .btn { min-height: 42px; padding: .5rem .9rem; }
  .btn-p { min-height: 34px; }
  input[type=text], input[type=password], input[type=number], input[type=search],
  input[type=email], select { min-height: 44px; font-size: 16px; }  /* 16px evita o zoom do iOS */

  .cartas-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: .55rem; }
  .conq-cabeca { padding: 1rem; gap: .9rem; }
  .conq-emblema { width: 62px; height: 62px; }
  .numeros { grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px),1fr)); gap: .5rem; }
  .numero { padding: .7rem .8rem; }

  /* o cartão encosta menos na borda e ocupa o que sobra */
  .cartao { padding: .9rem; }
  .cartao + .cartao { margin-top: .8rem; }
}

@media (max-width: 420px) {
  .numeros { grid-template-columns: 1fr 1fr; }
  .flex.quebra > .btn { flex: 1 1 auto; }
  .codigo-grande { font-size: 1.15rem; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                            transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}