/* Mesma paleta e as mesmas três fontes do index.html: é a mesma casa. */
:root{
  --bg:#0F0D17;
  --surface:#1B1730;
  --surface-2:#241F3D;
  --border:#382F5C;
  --text:#EDE6D6;
  --text-muted:#A79BC7;
  /* Fundo dos controles embutidos dentro de um painel (trilho do
     segmentado, caixa do seletor). Mais claro que o fundo da página: um
     controle sobre --bg dentro de um painel --surface-2 lê como buraco. */
  --inset:#16112A;
  --gold:#E9C765;
  --gold-light:#F5DC92;
  /* Texto sobre o dourado. Escuro e levemente arroxeado, pra ficar na
     mesma família do fundo em vez de virar preto puro. */
  --sobre-gold:#1A1024;
  --purple:#8B6BFF;
  --green:#4C9A6B;
  --red:#D9634A;
  /* Cores de mana. Tons pastéis do próprio jogo, que só precisam ser
     distinguíveis a 12px de diâmetro. */
  --mana-W:#F5F0D8; --mana-U:#9FC7E8; --mana-B:#3b3540;
  --mana-R:#E4907A; --mana-G:#89B894; --mana-C:#B9B4C8;
  /* A largura útil da tela, num lugar só: o cabeçalho e o corpo têm que
     ter a mesma, senão o nome do deck não fica em cima do deck. */
  --largura:1560px;
  /* Dois ícones do sprite viram marca de pseudoelemento (o "já está no
     deck" da busca, a peça que o combo já tem). Pseudoelemento não recebe
     <use>, então esses dois moram aqui como máscara — o desenho é o mesmo,
     e a cor continua vindo do CSS de quem usa. */
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --ico-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M235.33,116.72,139.28,20.66a16,16,0,0,0-22.56,0l-96,96.06a16,16,0,0,0,0,22.56l96.05,96.06h0a16,16,0,0,0,22.56,0l96.05-96.06a16,16,0,0,0,0-22.56ZM128,224h0L32,128,128,32,224,128Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(139,107,255,0.12), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(233,199,101,0.10), transparent 42%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100dvh;
}
button{font-family:inherit;}
input:focus-visible,button:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;
}
[hidden]{display:none !important;}
/* Página parada por baixo de uma modal (ver `travarRolagem`). `com-barra`
   guarda o lugar da barra de rolagem que some, senão a página inteira pula
   pro lado pela largura dela. */
html.sem-rolar{overflow:hidden;}
html.sem-rolar.com-barra{scrollbar-gutter:stable;}

/* ---------------- ícones ----------------
   Phosphor (MIT), colados como sprite no topo do <body> em vez de virem de
   um CDN: são vinte desenhos, e ícone que chega depois do resto pisca —
   o ✕ de fechar precisa estar na tela junto com a modal que ele fecha. O
   traço é `currentColor`, então cada botão pinta o seu no hover sem
   precisar de regra nova. 1.15em porque o desenho não encosta na borda da
   caixa dele: a essa altura o ✕ ocupa a mesma mancha que a letra ao lado. */
.ico{
  width:1.15em;height:1.15em;fill:currentColor;flex:none;
  pointer-events:none;vertical-align:-.22em;
}
.sprite{display:none;}

/* ---------------- barra de rolagem ----------------
   A tela tem quatro áreas que rolam por dentro (a lateral inteira, os dois
   painéis de resultado, a lista do deck) e o padrão do navegador desenha
   uma barra clara e larga no meio de um fundo escuro — o único pedaço da
   página que não é desta casa.

   São duas gramáticas diferentes e as duas precisam existir: o Firefox só
   entende `scrollbar-width`/`scrollbar-color`, e o Chromium/WebKit só
   entende os pseudoelementos. Nenhum navegador lê as duas, então isto não
   é redundância. */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
/* A borda transparente com `background-clip` afina o polegar sem afinar a
   área de clique: o alvo continua com os 10px inteiros. */
::-webkit-scrollbar-thumb{
  background:var(--border);border-radius:999px;
  border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:#4B3F79;background-clip:padding-box;}
::-webkit-scrollbar-corner{background:transparent;}

/* ---------------- cabeçalho ---------------- */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(15,13,23,0.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topo-in{
  max-width:var(--largura);margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.rune{
  width:34px;height:34px;border:1.5px solid var(--gold);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;color:var(--gold-light);font-size:16px;
  transform:rotate(45deg);
}
.rune span{transform:rotate(-45deg);}
.titulo-deck{flex:0 1 auto;min-width:140px;max-width:420px;
  display:flex;flex-direction:column;gap:1px;}
.espaco{flex:1;min-width:0;}
.titulo-deck input{
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--text);font-family:'Cinzel',serif;font-weight:700;font-size:17px;
  padding:3px 7px;margin-left:-7px;width:100%;max-width:420px;
}
.titulo-deck input:hover{border-color:var(--border);}
.titulo-deck input:focus{border-color:var(--gold);background:var(--surface);outline:none;}
.estado-salvo{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;
  color:var(--text-muted);padding-left:1px;min-height:13px;
}
.estado-salvo.erro{color:var(--red);}
.estado-salvo.ok{color:var(--green);}

/* ---------------- versão do deck ----------------
   A pílula divide a linha com o nome, e o campo encolhe até o texto pra ela
   ficar logo depois dele e não no fim de 420px. Onde `field-sizing` não
   existe, o campo fica na largura padrão de um input e a pílula vem depois.
   WIP é tracejado e apagado; versão concluída é dourada; o ponto depois do
   número diz que a lista já não é a daquela versão. */
.titulo-linha{display:flex;align-items:center;gap:6px;min-width:0;}
.titulo-deck .titulo-linha input{
  flex:0 1 auto;width:auto;min-width:0;field-sizing:content;min-inline-size:8ch;
}
.versao-pilula{
  flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;line-height:1;padding:4px 8px;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold-light);background:transparent;
}
button.versao-pilula{cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
button.versao-pilula:hover{background:rgba(233,199,101,.12);}
.versao-pilula.wip{border-style:dashed;border-color:var(--text-muted);color:var(--text-muted);}
button.versao-pilula.wip:hover{border-color:var(--gold);color:var(--gold-light);background:transparent;}
.versao-pilula.mudou::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);
}

.btn{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  border-radius:999px;padding:8px 14px;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;white-space:nowrap;
}
/* O `.btn` também veste link — o que leva a outra página é <a>, mesmo com
   cara de botão. Link não tem `disabled`: o desligado é `aria-disabled`. */
a.btn{display:inline-block;text-decoration:none;}
.btn:hover:not(:disabled,[aria-disabled="true"]){border-color:var(--gold);color:var(--gold-light);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;}
.btn.ouro{background:var(--gold);border-color:var(--gold);color:var(--sobre-gold);font-weight:700;}
.btn.ouro:hover:not(:disabled,[aria-disabled="true"]){background:var(--gold-light);border-color:var(--gold-light);color:var(--sobre-gold);}
.btn.verde{border-color:var(--green);color:var(--green);}
.btn.verde:hover:not(:disabled){background:rgba(76,154,107,.10);border-color:var(--green);color:var(--green);}
.acoes{display:flex;gap:7px;flex-wrap:wrap;}

/* ---------------- medidores do cabeçalho ----------------
   Contagem e dinheiro são os dois números que a pessoa mais olha, e os dois
   moram no cabeçalho porque valem pra tela inteira — não pra uma coluna.
   Sem pílula: a borda arredondada em volta de cada um fazia dois botões
   falsos ao lado do nome do deck. Aqui são texto, separados por um traço
   vertical, e só o que É clicável tem estado de clique. */
.divisor{
  width:1px;align-self:stretch;background:var(--border);flex:none;
  margin:2px 2px;
}
.medidores{display:flex;align-items:center;gap:14px;flex:none;}
.medidor{
  display:flex;align-items:baseline;gap:5px;flex:none;padding:2px 0;
  background:transparent;border:none;color:inherit;
  font-family:'IBM Plex Mono',monospace;
}
.medidor b{font-size:17px;color:var(--gold-light);font-weight:600;line-height:1;}
.medidor .de{font-size:11px;color:var(--text-muted);}
.medidor .ponto{
  width:7px;height:7px;border-radius:50%;background:var(--text-muted);
  flex:none;align-self:center;
}
.medidor.completo .ponto{background:var(--green);}
.medidor.completo b{color:var(--green);}
.medidor.passou .ponto{background:var(--red);}
.medidor.passou b{color:var(--red);}
.medidor.erro .ponto{background:var(--red);}
/* Clicável: só o total, e só porque copiar a lista é a ação que se faz
   olhando pra ele. Cursor e sublinhado no hover dizem isso antes do clique. */
button.medidor{cursor:pointer;border-radius:7px;padding:2px 6px;margin:0 -6px;}
button.medidor:hover{background:var(--surface);}
button.medidor:hover b{color:var(--gold);}
/* Enquanto a cotação não voltou, o número é a soma da base local. O ponto
   de interrogação diz que ainda não é o preço de comprar. */
.medidor .previa{
  font-size:10px;color:var(--text-muted);font-family:'Inter',sans-serif;
}
.medidor.cotando .de::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:5px;
  border:1.5px solid var(--gold-light);border-right-color:transparent;
  border-radius:50%;animation:girando .7s linear infinite;vertical-align:middle;
}
@keyframes girando{to{transform:rotate(360deg);}}

/* ---------------- corpo ----------------

   Três colunas: maybeboard, deck, busca. O deck no meio porque é o que a
   pessoa olha; as duas colunas de apoio de cada lado dele porque as duas
   SERVEM ao deck — a da esquerda guarda o que ainda não entrou, a da
   direita procura o que vai entrar.

   1560px é a largura mínima em que, descontadas as duas colunas de apoio,
   sobra pro deck espaço pras duas colunas de 352px que a lista precisa pra
   não truncar nome. Abaixo disso a lista cai pra uma coluna só. */
.corpo{
  max-width:var(--largura);margin:0 auto;padding:18px 16px 40px;
  display:grid;
  grid-template-columns:372px minmax(0,1fr) 300px;
  gap:18px;align-items:start;
}
/* A ordem do HTML é a do celular (o deck primeiro, porque é o assunto), e
   a ordem visual do computador vem daqui. Leitor de tela e telefone pegam
   a lista do deck de cara; a tela larga põe a busca à esquerda, o deck no
   meio e o trilho de apoio à direita. */
.corpo > .lateral{order:1;}
.corpo > .principal{order:2;}
.corpo > .trilho{order:3;}
/* Sem comandante não existe deck de Commander, e as duas colunas de apoio
   não têm sobre o que apoiar: a busca de cartas filtra por uma identidade
   que ainda não existe, e a curva e o maybeboard estariam vazios. A tela
   inteira é a pergunta do meio — e duas caixas de busca ao mesmo tempo,
   uma pedindo comandante e a outra pedindo carta, é a forma mais rápida de
   alguém digitar o comandante na caixa errada. */
.corpo.sem-comandante{grid-template-columns:minmax(0,1fr);}
.corpo.sem-comandante > .lateral,
.corpo.sem-comandante > .trilho,
.corpo.sem-comandante ~ .barra-mobile{display:none;}
.painel{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px;box-shadow:0 20px 40px -22px rgba(0,0,0,.6);
}
/* A lateral rola por dentro quando os painéis passam da altura da tela.
   Sem `flex:none` nos painéis, o flex encolhe o primeiro (a busca) até
   sobrar só o título dele — que foi exatamente o que aconteceu quando o
   painel de combos entrou como quarto. */
.lateral{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(100dvh - 92px);overflow-y:auto;min-width:0;}
.lateral > .painel{flex:none;}
/* Um painel só, com abas, em vez de dois empilhados: busca e sugestões
   fazem a MESMA coisa (pôr carta no deck), e dois cartões separados
   obrigavam a rolar a coluna pra trocar entre duas formas de escolher. */
#painel-adicionar{display:flex;flex-direction:column;min-height:0;}
.rail-conteudo{display:flex;flex-direction:column;min-height:0;}

/* ---------------- trilho da direita: curva e maybeboard ----------------
   A coluna de apoio, do lado oposto à busca, com o deck entre as duas: à
   esquerda o que se procura pra entrar, à direita o que já entrou (a
   curva) e o que talvez entre (o maybeboard). As duas coisas do trilho são
   olhadas ENQUANTO se rola a lista do deck, então ele gruda no topo — uma
   coluna de apoio que some quando a pessoa desce nas 99 cartas não apoia
   nada. */
/* Filho direto de propósito: `trilho` também é o nome do sulco das
   barrinhas de proporção (curva, distribuição, fontes por cor), e uma regra
   solta grudaria cada barrinha no topo da tela. */
.corpo > .trilho{
  position:sticky;top:74px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(100dvh - 92px);min-height:0;min-width:0;
}
.corpo > .trilho > .painel{min-width:0;}
/* A curva é a única análise que vale a pena estar sempre à vista: ela
   muda a cada carta adicionada e é o gráfico que se consulta DURANTE a
   montagem, não depois. As outras quatro respondem perguntas que se faz de
   vez em quando, e por isso vivem nas abas. */
.cartao-curva{flex:none;}
.cartao-curva .barras{height:66px;}
.painel-talvez{display:flex;flex-direction:column;min-height:0;flex:1;}
.talvez-lista{overflow-y:auto;margin:0 -4px;padding:0 4px;min-height:0;}
/* Uma coluna, não duas: a área é estreita de propósito. É a margem do
   caderno, não uma segunda lista de deck. */
.talvez-lista .colunas{column-width:auto;column-count:1;}
.talvez-lista .grupo{margin-bottom:11px;}
.talvez-lista .linha{gap:6px;padding:4px 4px;}
.talvez-lista .grupo h3{font-size:11px;}
.talvez-topo{display:flex;align-items:center;gap:6px;margin:0 0 8px;}
.talvez-topo h2{margin:0;flex:1;}
.talvez-n{
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-muted);
  border:1px solid var(--border);border-radius:999px;padding:1px 7px;flex:none;
}
/* Recolher é botão de verdade, não enfeite: quem não usa maybeboard fica
   com a curva sozinha no trilho, e a escolha fica guardada no navegador
   pra não ser refeita a cada visita. Recolhe só o maybeboard, não o
   trilho inteiro — a curva não tem por que pagar por isso. */
.trilho-conteudo{
  display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;
}
.trilho-recolher{align-self:flex-end;flex:none;}
.trilho-vertical{
  display:none;writing-mode:vertical-rl;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-light);white-space:nowrap;
}
/* Recolhida, a coluna vira uma fita de 44px com o nome de pé: quem não usa
   nem a curva nem o maybeboard devolve a largura toda pro deck, e a escolha
   fica guardada no navegador. */
.corpo.talvez-fechado{grid-template-columns:372px minmax(0,1fr) 44px;}
.corpo.talvez-fechado > .trilho{align-items:center;gap:10px;}
.corpo.talvez-fechado .trilho-recolher{align-self:center;}
.corpo.talvez-fechado .trilho-conteudo{display:none;}
.corpo.talvez-fechado .trilho-vertical{display:block;}
.talvez-vazio{
  color:var(--text-muted);font-size:11.5px;line-height:1.55;
  border:1px dashed var(--border);border-radius:10px;padding:12px 10px;
  text-align:center;
}
/* O alvo de soltar precisa ficar visível ANTES de a carta chegar nele,
   senão ninguém descobre que dá pra arrastar. */
.alvo-solta{outline:2px dashed var(--gold);outline-offset:3px;
  background:rgba(233,199,101,.07);border-radius:10px;}
.linha.arrastando{opacity:.4;}

/* ---------------- destino da carta que está entrando ----------------
   Quem procura já sabe pra onde a carta vai — pro sideboard, pro
   maybeboard, pra "combo principal". Dizer isso uma vez e adicionar vinte
   cartas seguidas é uma decisão só, em vez de vinte visitas ao menu de cada
   linha depois de adicionada. */
.destino{
  display:flex;flex-direction:column;gap:7px;margin:9px 0 2px;
  padding:9px 10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;
}
.destino-linha{display:flex;align-items:center;gap:8px;}
.destino-rot{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);flex:none;width:62px;
}
.segmento{
  display:flex;gap:3px;flex:1;min-width:0;background:var(--inset);
  border:1px solid var(--border);border-radius:999px;padding:3px;
}
.segmento button{
  flex:1;min-width:0;border:none;background:transparent;color:var(--text-muted);
  border-radius:999px;padding:5px 6px;font-size:11.5px;font-weight:600;
  cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.segmento button:hover{color:var(--text);}
.segmento button.ativa{background:var(--gold);color:var(--sobre-gold);}
.destino select.campo{
  flex:1;min-width:0;padding:6px 30px 6px 12px;font-size:12px;
  border-radius:999px;background-color:var(--inset);
}
/* O "+" fica ao lado do seletor, e não como última opção dele: uma opção
   que não seleciona nada e abre um prompt se comporta diferente de todas as
   outras da lista. */
.btn-nova-cat{
  width:28px;height:28px;flex:none;border-radius:50%;padding:0;
  border:1px solid var(--border);background:var(--inset);color:var(--text-muted);
  font-size:15px;line-height:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-nova-cat:hover{border-color:var(--gold);color:var(--gold-light);}
.destino select.campo:disabled{opacity:.45;cursor:not-allowed;}

/* ---------------- folha de baixo (só no celular) ----------------
   No telefone a busca não é uma coluna: é uma tarefa que se abre, se usa e
   se fecha. Ela cobre a tela por cima do deck em vez de dividir a tela com
   ele, e some quando a carta entrou — que é o instante em que a lista do
   deck volta a ser o assunto. */
.folha-fundo{
  position:fixed;inset:0;z-index:60;background:rgba(10,8,18,.65);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s;
}
.folha-fundo.aberta{opacity:1;pointer-events:auto;}
.puxador{display:none;}
/* A barra fixa do celular: um alvo grande e sempre no mesmo lugar pro
   único verbo que a tela tem. */
.barra-mobile{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  gap:9px;align-items:center;padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 62%,rgba(15,13,23,0));
}
.barra-mobile .btn{flex:1;padding:14px 16px;font-size:14.5px;border-radius:999px;}
.barra-mobile .btn.redondo{flex:none;width:48px;height:48px;font-size:16px;}

h2.secao{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-light);margin:0 0 10px;font-weight:600;
}

/* ---------------- estado vazio: escolher comandante ---------------- */
.heroi{text-align:center;padding:34px 18px;}
.heroi h1{font-family:'Cinzel',serif;font-size:24px;margin:0 0 8px;}
.heroi p{color:var(--text-muted);font-size:13px;line-height:1.6;margin:0 auto 20px;max-width:430px;}
.heroi .busca-caixa{max-width:440px;margin:0 auto;}
/* O interruptor das inéditas fica colado na caixa de busca porque é ela que
   ele muda — e centrado como todo o resto do herói. */
.heroi .interruptor{margin-top:10px;}
/* Menor e mais apagado que o parágrafo de cima: a pergunta da tela continua
   sendo o comandante, e esta linha é o atalho de quem já tem a resposta. */
.heroi .ou-link{font-size:11.5px;margin:9px auto 0;max-width:440px;}
.heroi .ou-link b{color:var(--text);font-weight:600;}
/* O botão de importar nasce dentro da lista de resultados, que é uma coluna:
   sem isto ele se estica na largura toda dela. */
.heroi .resultados #btn-importar-colado{align-self:flex-start;margin-top:2px;}

.campo{
  width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;color:var(--text);padding:11px 12px;font-size:14px;
  font-family:'Inter',sans-serif;
}
.campo::placeholder{color:#6F6490;}
.campo:focus{border-color:var(--gold);outline:none;}

/* ---------------- busca ---------------- */
.filtros{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0 4px;}
.chip{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);
  border-radius:999px;padding:4px 10px;font-size:11px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{border-color:var(--gold);color:var(--gold-light);}
.chip.ativo{border-color:var(--gold);background:rgba(233,199,101,.12);color:var(--gold-light);}

.resultados{
  margin-top:10px;overflow-y:auto;flex:1;min-height:120px;
  display:flex;flex-direction:column;gap:3px;padding-right:2px;
}
/* Cinco resultados e nada de rolagem. Quem não achou nos cinco primeiros
   não vai achar no vigésimo: vai escrever mais uma letra ou usar os
   filtros, que é o que eles servem pra fazer. Rolagem aqui seria uma
   segunda superfície rolável dentro de uma coluna que já rola. */
.lateral .resultados{max-height:none;overflow:visible;}
.resultados .demais{
  font-size:11px;color:var(--text-muted);padding:5px 8px 0;line-height:1.5;
}
.heroi .resultados{max-height:340px;text-align:left;margin:12px auto 0;max-width:440px;}

.achado{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:9px;
  padding:6px 8px;cursor:pointer;color:var(--text);
  transition:background .12s,border-color .12s;
}
.achado:hover,.achado:focus-visible{background:var(--surface-2);border-color:var(--border);}
.achado .nome{flex:1;min-width:0;}
.achado .nome b{display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.achado .nome small{display:block;color:var(--text-muted);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.achado .preco{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);flex:none;
}
/* O item que as setas alcançaram. Fica igual ao hover mais uma marca de
   ouro à esquerda, pra que teclado e mouse não pareçam dois sistemas. */
.achado.destacado{
  background:var(--surface-2);border-color:var(--gold);
  box-shadow:inset 3px 0 0 var(--gold);
}
.achado.no-deck{opacity:.45;}
.achado.no-deck .nome b::after{
  content:"";display:inline-block;width:11px;height:11px;
  margin-left:4px;vertical-align:-1px;background:var(--green);
  -webkit-mask:var(--ico-check) center/contain no-repeat;
          mask:var(--ico-check) center/contain no-repeat;
}
/* A carta que ainda não saiu.

   Roxo, e não dourado nem vermelho: dourado aqui é "está ligado" (o botão de
   filtros, o destaque do teclado) e vermelho é "está errado" — e esta carta
   não é nenhum dos dois. Ela é uma carta normal que ainda não chegou.

   Em toda lista ela é um item da linha, entre o nome e os símbolos de mana,
   e nunca dentro do nome: o nome é a parte que encolhe com reticências, e um
   selo que some junto com o fim do nome não avisa nada. */
.selo-inedita{
  flex:none;border:1px solid var(--purple);border-radius:999px;
  padding:0 6px;font-size:9px;font-weight:700;line-height:15px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--purple);
  white-space:nowrap;cursor:help;
}

/* No maybeboard não é "já tem": é "você já olhou pra ela". Some menos que
   a do deck (ainda é uma carta que pode entrar) e a marca é outra. */
.achado.no-talvez{opacity:.62;}
.achado.no-talvez .nome b::after{
  content:"";display:inline-block;width:11px;height:11px;
  margin-left:4px;vertical-align:-1px;background:var(--gold-light);
  -webkit-mask:var(--ico-diamond) center/contain no-repeat;
          mask:var(--ico-diamond) center/contain no-repeat;
}

/* ---------------- gaveta (filtros avançados e importação) ----------------
   Sete filtros não cabem como chip na lateral de 372px, e mesmo que
   coubessem seriam sete linhas de controle acima da lista de resultados —
   roubando do resultado o espaço que ele precisa. A gaveta guarda tudo
   isso fora da tela e devolve à busca a coluna inteira. */
.gaveta-fundo{
  position:fixed;inset:0;z-index:80;background:rgba(10,8,18,.6);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;
  transition:opacity .18s;
}
.gaveta-fundo.aberta{opacity:1;pointer-events:auto;}
.gaveta{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(420px,100vw);
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-24px 0 48px -24px rgba(0,0,0,.9);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .2s ease-out;
}
.gaveta.aberta{transform:translateX(0);}
.gaveta-topo{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--border);flex:none;
}
.gaveta-topo h2{
  flex:1;margin:0;font-family:'Cinzel',serif;font-size:16px;font-weight:700;
}
.gaveta-corpo{flex:1;overflow-y:auto;padding:14px 16px;}
.gaveta-rodape{
  display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);
  flex:none;
}
.gaveta-rodape .btn{flex:1;}
/* ---------------- a carta inteira ----------------
   Centralizada, e não uma gaveta lateral: aqui o assunto é UMA carta, não
   um formulário sobre a tela — a lista atrás não é referência pra nada
   enquanto se lê o oracle. Duas colunas fixas, arte e texto: a arte é o que
   identifica a carta de relance e some se rolar junto com as regras. */
.carta-fundo{
  position:fixed;inset:0;z-index:90;background:rgba(10,8,18,.72);
  backdrop-filter:blur(3px);display:flex;align-items:center;
  justify-content:center;padding:24px;opacity:0;transition:opacity .16s;
}
.carta-fundo.aberta{opacity:1;}
.carta-modal{
  position:relative;display:flex;gap:20px;width:min(920px,100%);
  max-height:calc(100dvh - 48px);padding:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 32px 64px -22px rgba(0,0,0,.9);
  transform:translateY(10px);transition:transform .16s ease-out;
}
.carta-fundo.aberta .carta-modal{transform:none;}
.carta-x{position:absolute;top:13px;right:13px;z-index:2;}
/* Rola por dentro porque carta de duas faces mostra as duas empilhadas, e
   duas cartas de 376px passam da altura da modal em tela de notebook. */
.carta-arte{
  flex:none;width:270px;display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
}
.carta-arte img{
  display:block;width:100%;border-radius:11px;border:1px solid var(--border);
  background:var(--inset);
}
/* Carta partida é impressa deitada, e a Scryfall entrega a arte em pé —
   mesmo giro da prévia. Girada, a ALTURA da imagem vira a largura da caixa:
   numa coluna de 270px a imagem tem 194px de largura (194×680/488 = 270), e
   a caixa fica com os 194 de altura que sobraram. */
.carta-arte.deitada{position:relative;height:194px;}
.carta-arte.deitada img{
  position:absolute;top:0;left:0;width:194px;max-width:none;
  transform-origin:top left;transform:rotate(90deg) translateY(-100%);
}
.carta-corpo{
  flex:1;min-width:0;overflow-y:auto;padding-right:4px;
  display:flex;flex-direction:column;gap:16px;
}
.carta-topo{padding-right:30px;}
.carta-topo h2{
  font-family:'Cinzel',serif;font-size:19px;font-weight:700;margin:0;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.carta-topo .tipo{
  font-size:12.5px;color:var(--gold-light);margin:5px 0 0;
}
.carta-topo .edicao{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--text-muted);margin:4px 0 0;
}
/* Uma face por bloco. Carta de duas faces tem dois oracles diferentes, e
   emendá-los num parágrafo só faz parecer que um deles vale sempre. */
.carta-face + .carta-face{
  border-top:1px dashed var(--border);padding-top:12px;margin-top:12px;
}
.carta-face .cabeca{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;
}
.carta-face .cabeca b{font-size:13.5px;}
.carta-face .cabeca .tipo{font-size:12px;color:var(--gold-light);width:100%;}
.carta-oracle{
  font-size:13px;line-height:1.7;white-space:pre-wrap;margin:0;
}
/* O texto de ambientação não é regra, e ler os dois com o mesmo peso é o
   jeito mais fácil de tomar sabor por efeito. */
.carta-sabor{
  font-size:12.5px;line-height:1.65;font-style:italic;color:var(--text-muted);
  border-left:2px solid var(--border);padding-left:10px;margin:9px 0 0;
  white-space:pre-wrap;
}
.carta-pt{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--gold);
  margin-top:8px;
}
.carta-dados{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:9px 14px;margin:0;
}
.carta-dados .rot{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);display:block;
}
.carta-dados .val{font-size:12.5px;display:block;margin-top:2px;}
.carta-chips{display:flex;flex-wrap:wrap;gap:6px;}
.carta-chip{
  font-size:11px;border:1px solid var(--border);border-radius:999px;
  padding:3px 9px;color:var(--text-muted);
}
.carta-chip b{font-weight:600;color:var(--text);}
.regra{
  border-left:2px solid var(--border);padding-left:11px;margin-bottom:11px;
  font-size:12.5px;line-height:1.65;
}
.regra:last-child{margin-bottom:0;}
.regra .quando{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  color:var(--text-muted);display:block;margin-bottom:3px;
}
/* Ruling longo vem com quebra de linha dentro, e é ela que separa os casos
   que a nota está respondendo. */
.regra p{margin:0;white-space:pre-wrap;}
.carta-links{display:flex;gap:14px;flex-wrap:wrap;}
.carta-links a{color:var(--gold);font-size:12px;text-decoration:none;}
.carta-links a:hover{color:var(--gold-light);text-decoration:underline;}
.carta-nota{color:var(--text-muted);font-size:12px;line-height:1.55;margin:8px 0 0;}

/* No estreito a arte vira uma faixa no topo e a modal ocupa a tela: 270px
   de carta ao lado de um texto de regras não sobra coluna pra nenhum dos
   dois. A modal inteira passa a rolar de uma vez — duas áreas de rolagem
   numa tela de toque disputam o mesmo dedo. */
@media (max-width:760px){
  .carta-fundo{padding:0;align-items:stretch;}
  .carta-modal{
    flex-direction:column;gap:14px;border-radius:0;border:none;
    width:100%;max-height:100dvh;overflow-y:auto;padding:16px;
  }
  /* O ✕ fica preso na tela porque a modal inteira rola: ancorado nela, ele
     subiria junto com a arte e sumiria no meio das notas de regras. E vai
     maior, que é o tamanho de um alvo de dedo. */
  .carta-x{
    position:fixed;top:10px;right:10px;width:34px;height:34px;font-size:16px;
    background:var(--surface-2);
  }
  .carta-arte{width:190px;margin:0 auto;overflow:visible;}
  .carta-arte.deitada{width:270px;height:194px;}
  .carta-corpo{overflow:visible;padding-right:0;}
}

.campo-grupo{margin-bottom:14px;}
.campo-grupo > label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-light);
  margin-bottom:5px;font-weight:600;
}
.campo-grupo .ajuda{
  font-size:11px;color:var(--text-muted);line-height:1.5;margin:4px 0 0;
}
/* Um interruptor dentro de um grupo não é RÓTULO de campo: ele é o próprio
   controle, e por isso não veste o mono maiúsculo dourado que nomeia os
   outros. A regra de cima é mais específica que a `.interruptor`, então a
   volta tem que ser dita aqui. */
.campo-grupo > label.interruptor{
  display:inline-flex;font-family:'Inter',sans-serif;font-size:12px;
  font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--text-muted);margin-bottom:0;
}
.campo-grupo textarea.campo{
  min-height:150px;resize:vertical;font-family:'IBM Plex Mono',monospace;
  font-size:12px;line-height:1.6;
}
select.campo{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
                   linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  padding-right:30px;}
select.campo option{background:var(--surface-2);color:var(--text);}
.par{display:flex;gap:8px;align-items:center;}
.par .campo{min-width:0;}
.par span{color:var(--text-muted);font-size:12px;flex:none;}
/* As cinco cores viram botão de pip: um "W U B R G" escrito seria mais
   largo e menos reconhecível do que os símbolos que a pessoa já lê no
   resto da tela. */
.cores-btn{display:flex;gap:6px;flex-wrap:wrap;}
.cor-btn{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--border);
  background:var(--surface-2);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,transform .1s;
}
.cor-btn .pip{width:20px;height:20px;font-size:10px;}
.cor-btn.ativo{border-color:var(--gold-light);transform:scale(1.06);}
.cor-btn:hover{border-color:var(--gold);}

/* Busca e filtros na mesma linha: os dois dizem uma coisa só ("o que eu
   quero achar"), e cada linha gasta aqui é altura que sai dos resultados. */
.linha-busca{display:flex;gap:7px;align-items:stretch;}
.linha-busca .campo{flex:1;min-width:0;border-radius:999px;padding-left:14px;}
/* A fita de filtros ligados: mostra fora da gaveta o que está ligado
   dentro dela, senão a busca filtrada pareceria uma busca quebrada. */
.ligados:not(:empty){margin:8px 0 0;}
.btn-filtros{display:flex;align-items:center;gap:6px;flex:none;}
.btn-filtros .conta{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  background:var(--gold);color:var(--sobre-gold);border-radius:999px;
  padding:0 5px;min-width:16px;text-align:center;font-weight:700;
}
.ligados{display:flex;gap:4px;flex-wrap:wrap;min-width:0;}
.ligado{
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--gold);background:rgba(233,199,101,.12);
  color:var(--gold-light);border-radius:999px;padding:2px 4px 2px 9px;
  font-size:11px;max-width:100%;
}
.ligado b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ligado button{
  border:none;background:transparent;color:inherit;cursor:pointer;
  font-size:11px;line-height:1;padding:0 3px;opacity:.7;
  display:inline-flex;align-items:center;
}
.ligado button:hover{opacity:1;}

/* ---------------- preço na lista e prévia do orçamento ---------------- */
.linha .valor{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--text-muted);flex:none;min-width:52px;text-align:right;
  white-space:nowrap;
}
.linha .valor.caro{color:var(--gold-light);}
.linha .valor.desconhecido{color:#6F6490;}
/* Preço medido (cotado na loja) e estimado (base local convertida) dividem
   a mesma lista por força da regra do formato: comandante e básico nunca
   são cotados. O tracejado marca qual é qual sem custar uma coluna, e o
   title conta o resto. */
.linha .valor.estimado{text-decoration:underline dotted;text-underline-offset:3px;}
.grupo h3 .valor-grupo{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--text-muted);font-weight:400;
}

/* ---------------- escolher a arte ---------------- */
.arte-fundo{position:fixed;inset:0;background:rgba(15,13,23,.78);
  place-items:center;z-index:65;padding:16px;}
/* 1096 = quatro colunas da `.arte-grade` (4 × 260 + 3 vãos de 8) + o
   padding. Mexeu na coluna, mexe aqui. */
.arte-caixa{background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:16px;width:calc(100% - 32px);
  max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:10px;
  box-shadow:0 20px 46px rgba(0,0,0,.5);}
.arte-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.arte-topo h3{font-family:'Cinzel',serif;font-size:17px;margin:0;}
/* Do tamanho do que diz, e não esticado como o segmentado do destino: aqui
   são dois lados de uma carta ao lado do nome dela, não uma fita que ocupa a
   coluna. */
.segmento.arte-faces{flex:none;}
.segmento.arte-faces button{padding:5px 12px;display:inline-flex;
  align-items:center;gap:4px;}
/* De onde vem a arte. Também do tamanho do que diz, encostado à esquerda,
   logo abaixo do título: é a primeira decisão da modal. */
.segmento.arte-origens{flex:none;align-self:flex-start;max-width:100%;}
.segmento.arte-origens button{flex:none;padding:5px 14px;}
.arte-copias{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.arte-copias .campo{width:auto;padding:5px 10px;font-size:12px;}

/* A moldura de uma arte, na proporção da carta. Deitada (carta partida: os
   Rooms, Fire // Ice) ela toma a proporção da carta de lado, e a imagem, que
   vem em pé, gira dentro dela — o mesmo giro da `.previa` e da
   `.carta-arte`. Girada, a largura da imagem vira a altura da moldura: 5/7
   da largura dela, os 71,43%. */
.quadro{display:block;position:relative;overflow:hidden;border-radius:5px;
  background:var(--surface-2);aspect-ratio:5/7;}
.quadro > img{display:block;width:100%;height:100%;object-fit:cover;}
.quadro.deitada{aspect-ratio:7/5;}
.quadro.deitada > img{position:absolute;top:0;left:0;width:71.4286%;height:auto;
  aspect-ratio:5/7;transform-origin:top left;
  transform:rotate(90deg) translateY(-100%);}

/* A tira da Scryfall. Rola na horizontal e é BAIXA de propósito: ela é
   vitrine, não a escolha — dar altura a ela roubaria a grade de baixo, que
   é onde a decisão acontece. */
.arte-vitrine{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  flex:none;min-height:20px;}
.arte-impressao{flex:none;width:86px;cursor:pointer;background:none;
  border:1px solid transparent;border-radius:7px;padding:3px;color:inherit;
  font:inherit;text-align:center;}
.arte-impressao:hover{border-color:var(--purple);}
.arte-impressao.ativa{border-color:var(--gold);}
.arte-impressao.deitada{width:120px;}
.arte-impressao small{display:block;font-size:9px;color:var(--text-muted);
  margin-top:3px;line-height:1.2;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/* A ficha que o deck cria, no lugar da tira quando a modal é de ficha: é
   referência, não botão, e por isso não acende no hover. */
.arte-ficha{flex:none;width:86px;padding:3px;}

.arte-filtros{display:flex;gap:8px;flex-wrap:wrap;flex:none;}
.arte-filtros .campo{flex:1;min-width:120px;padding:7px 10px;font-size:12.5px;}
.arte-conta{font-size:11.5px;color:var(--text-muted);flex:none;}

/* A arte do tamanho da `.previa` (250px) — é escolhendo entre arquivos
   parecidos que se precisa ver a carta de verdade, não um selo. A coluna é
   250 + o padding e a borda do botão. `minmax(0, …)` deixa uma coluna só
   encolher em tela de celular mais estreita que a carta. */
.arte-grade{display:grid;gap:8px;overflow-y:auto;flex:1;min-height:120px;
  grid-template-columns:repeat(auto-fill,minmax(0,260px));
  justify-content:center;align-content:start;overscroll-behavior:contain;}
.arte-op{background:var(--inset);border:1px solid var(--border);
  border-radius:8px;padding:4px;cursor:pointer;color:inherit;font:inherit;
  text-align:center;}
.arte-op:hover{border-color:var(--purple);}
.arte-op.ativa{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.arte-op:disabled{opacity:.45;cursor:not-allowed;}
.arte-op:disabled:hover{border-color:var(--border);}
/* O aviso de baixa resolução em cima da miniatura: é o que se vê antes de
   escolher, e não depois. */
.arte-selo{position:absolute;left:5px;bottom:5px;padding:2px 7px;
  border-radius:999px;background:var(--red);color:#fff;font-size:10px;
  font-weight:600;line-height:1.4;}
.arte-alerta{color:var(--red);}
.arte-op small{display:block;font-size:9.5px;color:var(--text-muted);
  margin-top:3px;line-height:1.2;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-word;}
.arte-rodape{display:flex;gap:8px;align-items:center;flex:none;flex-wrap:wrap;}

/* O paginador fica no meio do rodapé, entre o interruptor e o "voltar ao
   padrão": é o controle que se usa a toda hora, e no meio ele não muda de
   lugar quando o número de páginas muda. */
.arte-paginas{flex:1;display:flex;justify-content:center;align-items:center;
  gap:4px;min-width:0;}
.pag{min-width:30px;height:30px;padding:0 8px;border-radius:999px;
  border:1px solid var(--border);background:transparent;color:var(--text-muted);
  font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;}
.pag:hover:not(:disabled){border-color:var(--gold);color:var(--gold-light);}
.pag:disabled{opacity:.4;cursor:not-allowed;}
.pag.ativa{background:var(--gold);border-color:var(--gold);color:var(--sobre-gold);
  font-weight:700;}
.pag-vao{color:var(--text-muted);font-size:12px;padding:0 2px;}

/* Interruptor em vez de caixinha de marcar: é um modo de trabalhar que fica
   ligado, e o trilho com a bolinha diz "ligado" de longe. O <input> de
   verdade continua ali (invisível, por cima) — é ele que recebe o teclado e
   o leitor de tela. */
.interruptor{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-muted);cursor:pointer;user-select:none;
  white-space:nowrap;}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.trilho-int{position:relative;width:30px;height:17px;border-radius:999px;
  background:var(--inset);border:1px solid var(--border);flex:none;
  transition:background .15s,border-color .15s;}
.trilho-int::after{content:"";position:absolute;top:2px;left:2px;width:11px;
  height:11px;border-radius:50%;background:var(--text-muted);
  transition:transform .15s,background .15s;}
.interruptor input:checked + .trilho-int{background:var(--gold);border-color:var(--gold);}
.interruptor input:checked + .trilho-int::after{transform:translateX(13px);
  background:var(--sobre-gold);}
.interruptor input:focus-visible + .trilho-int{outline:2px solid var(--gold);
  outline-offset:1px;}
.interruptor:hover{color:var(--text);}
/* No estreito o paginador não cabe entre os outros dois: sobe pra uma linha
   só dele, em cima. As 11 posições (setas, 7 páginas, 2 vãos) cabem nos
   ~336px que sobram de uma tela de 400. */
@media (max-width:600px){
  .arte-rodape{justify-content:space-between;}
  .arte-paginas{order:-1;flex-basis:100%;}
  .pag{min-width:28px;height:28px;padding:0 6px;}
}
.arte-nota{font-size:11px;color:var(--text-muted);line-height:1.5;flex:none;}

/* O envio ocupa o lugar da grade: a arte em uso, quando é enviada, e a caixa
   de soltar o arquivo, que é um <label> — clicar em qualquer ponto dela abre
   o seletor de arquivo. */
.arte-envio{display:flex;flex-direction:column;gap:12px;flex:1;min-height:120px;
  overflow-y:auto;}
.arte-envio-atual{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.arte-envio-atual:empty{display:none;}
.arte-envio-quadro{width:180px;flex:none;}
.arte-soltar{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:28px 16px;border:1px dashed var(--border);
  border-radius:12px;background:var(--inset);text-align:center;cursor:pointer;
  color:var(--text-muted);font-size:12.5px;}
.arte-soltar:hover,.arte-soltar.sobre{border-color:var(--gold);color:var(--text);}
.arte-soltar input{position:absolute;opacity:0;width:1px;height:1px;}
.arte-soltar:focus-within{outline:2px solid var(--gold);outline-offset:2px;}

/* O botão na linha do deck mostra ESTADO: contorno = arte padrão,
   miniatura = escolhida. Ver de relance quais cartas estão customizadas é
   metade do valor desta feature. */
.linha .mini.tem-arte{border-color:var(--gold);background-size:cover;
  background-position:center;}

/* ---------------- galeria (aba Artes) ----------------
   Coluna de largura FIXA e flex em vez de grade: a carta deitada ocupa a
   largura da carta de lado (a altura da em pé), e numa grade de colunas
   iguais ela ficaria espremida numa coluna de carta em pé. */
#galeria-resultado .progresso{margin-bottom:14px;}
.galeria-acoes{margin-top:10px;}
.galeria-acoes:has(> [hidden]:only-child){display:none;}
.galeria-grupo{margin-bottom:16px;}
.galeria-grupo:last-child{margin-bottom:0;}
.galeria-grupo h3{margin:0 0 8px;font-size:12px;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.galeria-grade{display:flex;flex-wrap:wrap;gap:10px;}
.galeria-carta{width:140px;flex:none;padding:4px;border-radius:9px;cursor:pointer;
  background:var(--inset);border:1px dashed var(--border);color:inherit;
  font:inherit;text-align:center;transition:border-color .12s,transform .12s;}
.galeria-carta.deitada{width:196px;}
.galeria-carta:hover{border-color:var(--purple);transform:translateY(-2px);}
/* Escolhida = contorno dourado cheio, o ✓ no canto e o selo dourado; padrão
   = tracejado e selo apagado. Três sinais e não um, porque a pergunta que a
   aba responde é justamente "o que falta?", e ela tem que se ler de longe. */
.galeria-carta.tem-arte{border:1px solid var(--gold);box-shadow:0 0 0 1px var(--gold);}
.galeria-marca{position:absolute;top:5px;left:5px;width:22px;height:22px;
  border-radius:50%;background:var(--gold);color:var(--sobre-gold);
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.5);}
.galeria-marca .ico{width:13px;height:13px;}
.galeria-qtd{position:absolute;top:5px;right:5px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;background:rgba(15,13,23,.86);color:var(--text);
  border-radius:999px;padding:2px 6px;}
.galeria-selo{display:block;margin-top:4px;font-size:10.5px;line-height:1.3;
  color:var(--text-muted);}
.galeria-carta.tem-arte .galeria-selo{color:var(--gold-light);font-weight:600;}
@media (max-width:600px){
  .galeria-grade{gap:8px;}
  .galeria-carta{width:calc(50% - 4px);}
  /* A carta de lado tem a largura da altura da em pé: 1,4 vez a meia
     linha, uns 70%. */
  .galeria-carta.deitada{width:70%;}
}

/* ---------------- goldfish ---------------- */
.gf-topo{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  flex-wrap:wrap;}
/* Empurra os botões pra direita. Existe em vez do `.traco` do cabeçalho de
   grupo porque aquele só é estilizado como `.grupo h3 .traco` — aqui fora
   ele é um span de largura zero, e os botões ficavam colados no título. */
.gf-espaco{flex:1;min-width:8px;}
.gf-turno{font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--gold-light);white-space:nowrap;}

/* A dica do título: o aviso de que aqui não tem juiz. Abre no hover e no
   foco, pra quem chega pelo teclado ler também. */
.gf-dica{position:relative;display:inline-flex;}
.gf-dica-botao{width:18px;height:18px;border-radius:50%;padding:0;
  border:1px solid var(--border);background:none;color:var(--text-muted);
  font:inherit;font-size:11px;font-weight:700;line-height:1;cursor:help;}
.gf-dica-botao:hover,.gf-dica-botao:focus-visible{border-color:var(--gold);
  color:var(--gold-light);outline:none;}
.gf-dica-texto{position:absolute;left:-8px;top:calc(100% + 8px);z-index:65;
  width:min(360px,calc(100vw - 32px));padding:10px 12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.8);font-size:12px;line-height:1.5;
  color:var(--text-muted);opacity:0;visibility:hidden;transition:opacity .12s;}
.gf-dica-texto b{color:var(--text);}
.gf-dica:hover .gf-dica-texto,.gf-dica:focus-within .gf-dica-texto{
  opacity:1;visibility:visible;}

/* O resumo da mão mora no título dela: é o que se lê antes de decidir
   manter. Minúsculas e sem espaçamento de letra, pra não ler como mais um
   rótulo de área. */
.gf-resumo{display:inline-flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-left:10px;text-transform:none;letter-spacing:0;font-size:11px;}
.gf-resumo b{color:var(--text);font-family:'IBM Plex Mono',monospace;
  font-weight:600;}
.gf-cores{display:inline-flex;gap:8px;}
.gf-cor{display:inline-flex;align-items:center;gap:3px;}

.gf-secao{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin:12px 0 5px;}
.gf-fila{display:flex;gap:8px;flex-wrap:wrap;min-height:8px;}

/* A mesa é centralizada: o campo, o comando e a mão ficam no eixo da área de
   jogo, como num tabuleiro, e os controles de cada jogador acompanham o
   mesmo eixo pra não ficar uma coluna torta à esquerda. Só dentro de
   `#gf-mesa` — as modais usam as mesmas classes e são listas, que se leem
   alinhadas à esquerda. O log também fica à esquerda: é texto corrido. */
#gf-mesa .gf-fila,#gf-mesa .gf-acoes{justify-content:center;}
#gf-mesa .gf-secao,#gf-mesa .gf-vazio,#gf-mesa .nota{text-align:center;}

/* O tamanho da carta da mesa, num lugar só: a carta, a pilha, a altura
   mínima das áreas e a margem da deitada saem daqui. Com dois decks a carta
   encolhe — são seis fileiras de carta em vez de três, e em 144x126 a mesa
   não caberia na altura de uma tela Full HD. */
#gf-mesa{--gf-carta-l:144px;--gf-carta-a:126px;}
#gf-mesa .gf-jogadores.dois{--gf-carta-l:108px;--gf-carta-a:94px;}

/* ---- as áreas da mesa ----
   Campo de batalha, terrenos, comando, mão e as pilhas são caixas que existem
   mesmo vazias: é pra onde a carta vai. O corpo tem a altura de uma carta, pra
   a mesa não pular quando a primeira desce. */
/* O título senta na borda de cima da área, como a legenda de um fieldset: é o
   rótulo dela sem gastar uma linha de altura. O fundo dele é o do painel, pra
   cortar a borda por trás do texto. */
.gf-area-mesa{position:relative;border:1px solid var(--border);border-radius:10px;
  background:rgba(0,0,0,.14);padding:12px 8px 8px;min-width:0;}
.gf-area-titulo{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  padding:0 6px;background:var(--surface);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;
  line-height:16px;}
.gf-area-titulo b{font-family:'IBM Plex Mono',monospace;color:var(--text);}
.gf-area-titulo kbd{margin-left:4px;}
.gf-area-corpo{min-height:var(--gf-carta-a);display:flex;flex-direction:column;
  justify-content:center;gap:6px;}
.gf-imposto{font-family:'IBM Plex Mono',monospace;color:var(--gold-light);
  margin-left:4px;text-transform:none;}

/* O campo de batalha é uma área com dois lados, criaturas à esquerda e o
   resto à direita, e cada lado cresce na proporção das cartas que tem (o
   `flex-grow` vem do desenho). Nenhum lado fica mais estreito que uma carta. */
.gf-batalha{display:flex;gap:0;padding:12px 0 8px;}
.gf-lado{position:relative;flex-basis:0;min-width:calc(var(--gf-carta-l) + 16px);
  padding:0 8px;}
/* O lado começa 12px abaixo da borda da área: o título dele sobe isso a mais
   pra sentar na mesma borda. */
.gf-lado > .gf-area-titulo{top:-21px;}

/* O monte de terrenos iguais (ver `montesHTML`): cada carta depois da
   primeira volta por cima da anterior e deixa 22px dela à vista. A carta sob
   o mouse sobe pra frente, pra dar pra escolher qual deitar. */
.gf-monte{display:flex;position:relative;flex:none;}
.gf-monte .gf-carta + .gf-carta{margin-left:calc(22px - var(--gf-carta-l));}
.gf-monte .gf-carta:hover{z-index:2;}
.gf-monte-n{position:absolute;right:4px;bottom:4px;z-index:3;pointer-events:none;
  padding:0 6px;border-radius:999px;background:rgba(15,13,23,.88);
  border:1px solid var(--border);color:var(--text);font-size:11px;font-weight:700;
  line-height:18px;font-family:'IBM Plex Mono',monospace;}
.gf-lado + .gf-lado{border-left:1px dashed var(--border);}

/* Duas linhas numa grade: comando, terrenos e exílio; deck, mão e cemitério.
   As laterais têm a largura do que guardam, e a do meio fica com o resto. */
.gf-zonas{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
  gap:8px;}
@media (max-width:700px){
  .gf-zonas{grid-template-columns:1fr 1fr;grid-auto-flow:dense;}
  .gf-zonas .gf-terrenos,.gf-zonas .gf-area-mao{grid-column:1 / -1;}
}
.gf-pilha-area .gf-area-corpo{align-items:center;}
.gf-mulligan .nota{margin:0;}
.gf-mulligan .gf-acoes{margin:6px 0 4px;}

/* A pilha: uma carta de largura. O baralho de costas, cemitério e exílio com
   a carta de cima. O hover é dourado, e não roxo como o da carta, porque o
   clique abre a zona. */
.gf-pilha{width:var(--gf-carta-l);height:var(--gf-carta-a);border-radius:8px;
  border:1px solid var(--border);background:var(--inset) top/cover no-repeat;
  cursor:pointer;padding:0;flex:none;color:var(--text-muted);font:inherit;
  font-size:11px;font-style:italic;}
.gf-pilha:hover{border-color:var(--gold);}
.gf-pilha.verso{background:repeating-linear-gradient(45deg,var(--surface-2),
  var(--surface-2) 4px,var(--inset) 4px,var(--inset) 8px);}
.gf-pilha.vazia{border-style:dashed;background:none;}
.gf-pilha.arrastando{opacity:.45;}

kbd{display:inline-block;min-width:16px;padding:0 4px;border-radius:4px;
  border:1px solid var(--border);border-bottom-width:2px;background:var(--inset);
  color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:10px;
  line-height:14px;text-align:center;text-transform:none;letter-spacing:0;}
/* Onde a carta arrastada vai entrar na fila: uma barra dourada do lado em
   que ela será posta. */
.gf-carta.solta-antes{box-shadow:-6px 0 0 -2px var(--gold);}
.gf-carta.solta-depois{box-shadow:6px 0 0 -2px var(--gold);}

/* A carta da mesa é o topo da arte: o nome impresso e a ilustração, que é o
   que identifica a carta de relance, numa altura que deixa a mesa compacta.
   O texto inteiro fica no painel da carta: num tabuleiro de 40 cartas, a
   carta inteira faria a mesa não caber. */
.gf-carta{width:var(--gf-carta-l);height:var(--gf-carta-a);border-radius:8px;
  border:1px solid var(--border);
  background:var(--inset) top/cover no-repeat;cursor:pointer;flex:none;
  position:relative;padding:0;transition:transform .12s;}
.gf-carta:hover{border-color:var(--purple);transform:translateY(-6px);}
/* Deitada gira 90°, e girar não muda a caixa do layout: a carta continua
   ocupando a altura dela enquanto DESENHA a largura. A margem vertical cobre
   metade da diferença em cima e embaixo, senão ela invade a fila de baixo.
   A opacidade é o que se vê de longe: essa já foi usada. */
.gf-carta.deitada{transform:rotate(90deg);opacity:.5;
  margin:calc((var(--gf-carta-l) - var(--gf-carta-a)) / 2) 0;}
.gf-carta.deitada:hover{transform:rotate(90deg) translateY(-6px);}
.gf-carta.virada{background-image:none;
  background:repeating-linear-gradient(45deg,var(--surface-2),
    var(--surface-2) 4px,var(--inset) 4px,var(--inset) 8px);}
/* Nome de carta de Magic é longo ("Hanna, Ship's Navigator"). Duas linhas com
   reticências: cortar no meio da palavra sem aviso faz duas cartas diferentes
   parecerem a mesma. */
.gf-carta .gf-nome{position:absolute;inset:auto 0 0 0;font-size:11px;
  line-height:1.25;padding:3px 6px;background:rgba(15,13,23,.86);
  color:var(--text);border-radius:0 0 7px 7px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-word;}
/* Os marcadores da carta, empilhados no canto. Três cabem; o `title` do
   conjunto lista todos. Nome longo corta com reticências na largura da
   carta, e o `title` traz o nome inteiro. */
.gf-carta .gf-marcas{position:absolute;top:4px;right:4px;display:flex;
  flex-direction:column;gap:3px;align-items:flex-end;}
.gf-carta .gf-marca-b{min-width:20px;max-width:calc(var(--gf-carta-l) - 18px);
  height:20px;border-radius:10px;
  background:var(--gold);color:var(--sobre-gold);font-size:11px;font-weight:700;
  display:block;line-height:20px;text-align:center;padding:0 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:'IBM Plex Mono',monospace;}
/* Atacante e bloqueador: a marca fica no canto de baixo pra não brigar com os
   marcadores, e a borda colorida é o que se vê sem ler. */
.gf-carta .gf-combate{position:absolute;bottom:4px;left:4px;font-size:18px;
  line-height:1;text-shadow:0 1px 3px #000;}
.gf-carta.atacando{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
.gf-carta.bloqueando{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
/* O selo de peça de combo, no canto de cima à esquerda — o único canto livre
   entre os marcadores (cima à direita) e a marca de combate (baixo à
   esquerda). Redondo e roxo pra não ser confundido com marcador: marcador é
   dourado e retangular, e os dois são números pequenos numa carta pequena. */
.gf-carta .gf-combo-selo{position:absolute;top:4px;left:4px;width:18px;
  height:18px;border-radius:50%;background:var(--purple);color:#fff;
  font-size:10.5px;font-weight:700;line-height:18px;text-align:center;
  font-family:'IBM Plex Mono',monospace;box-shadow:0 1px 3px rgba(0,0,0,.6);}
/* Deitar e endireitar num clique, sem passar pelo menu (ver `gfCartaHTML`).
   Vai no canto de baixo à direita, o único que sobra: marcadores em cima à
   direita, selo de combo em cima à esquerda, marca de combate embaixo à
   esquerda. Aparece sempre, apagado, e fica sólido com o mouse na carta —
   ícone que só existe no hover ninguém descobre, e ícone opaco em quarenta
   cartas é ruído. */
.gf-carta .gf-tap{position:absolute;right:4px;bottom:4px;width:20px;height:20px;
  border-radius:50%;background:rgba(15,13,23,.72);color:var(--text);
  font-size:13px;line-height:20px;text-align:center;opacity:.5;
  transition:opacity .12s,background .12s,transform .12s;}
.gf-carta:hover .gf-tap{opacity:1;background:var(--purple);color:#fff;}
.gf-carta .gf-tap:hover{transform:scale(1.15);}
/* A carta deitada é desenhada girada, e o ícone gira junto: o giro ao
   contrário é o que deixa a seta em pé pra quem lê. Deitada a carta ainda
   perde metade da opacidade, e o ícone apagado sumiria — mas endireitar é o
   que se faz com carta deitada, então ali ele é o cheio: o que sobra da
   translucidez da carta já é a dose certa. */
.gf-carta.deitada .gf-tap{transform:rotate(-90deg);opacity:1;
  background:var(--purple);color:#fff;}
.gf-carta.deitada .gf-tap:hover{transform:rotate(-90deg) scale(1.15);}
/* No monte, o canto de baixo à direita é da contagem (`×4`), que passa por
   cima de qualquer carta: o ícone anda pra dentro pra caber ao lado dela. */
.gf-monte .gf-carta .gf-tap{right:40px;}
/* E só a carta da frente do monte traz o ícone: nove terrenos deitados dariam
   nove ícones em fileira, e a pergunta que se faz ao monte é uma só
   ("endireita um"). A carta que o mouse levanta traz o dela, que é como se
   escolhe qual. */
.gf-monte .gf-carta:not(:last-of-type):not(:hover) .gf-tap{display:none;}
/* Sem mouse não há hover pra revelar nada: no toque o ícone fica sempre
   legível, que é onde ele mais serve. */
@media (hover:none){
  .gf-carta .gf-tap{opacity:.95;background:rgba(15,13,23,.88);}
}
/* Ficha não é carta: a borda tracejada diz que ela some quando sair do campo. */
.gf-carta.ficha{border-style:dashed;}
.gf-carta.arrastando{opacity:.45;}

.gf-vazio{color:var(--text-muted);font-size:12px;font-style:italic;
  padding:4px 0;}
.gf-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}

/* O painel da carta: flutua à esquerda da mesa, na altura das colunas fixas
   da tela, com o `left` medido pelo script (`mostrarPainel`). Na tela cheia
   ele ganha uma coluna dentro da área de jogo (abaixo). Não pega o mouse:
   ele é leitura, e um painel que pega o ponteiro roubaria o hover da carta
   que o abriu. */
.gf-detalhe{position:fixed;top:74px;left:16px;z-index:60;width:288px;
  max-height:calc(100dvh - 92px);overflow:hidden;pointer-events:none;
  display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transition:opacity .12s;}
.gf-detalhe.mostra{opacity:1;visibility:visible;}
/* A proporção reserva a altura antes de a imagem chegar: sem ela o texto
   começaria no topo e pularia pra baixo quando a arte carregasse. */
#gf-detalhe-arte{display:block;width:100%;aspect-ratio:488/680;flex:none;
  border-radius:10px;background:var(--inset);}
#gf-detalhe-arte.vazia{display:none;}
/* O corpo é o que rola, e não o painel inteiro: a arte fica parada no topo,
   que é o ponto de referência de quem está comparando cartas. `min-height:0`
   porque filho de flex não encolhe abaixo do conteúdo sem isto — sem ele o
   painel crescia além do `max-height` e o texto sumia pela borda, que é como
   texto longo e muito combo ficavam inalcançáveis. */
#gf-detalhe-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;}
/* Flutuando, a barra de rolagem fica ESCONDIDA. Ela apareceria agarrável, e a
   mão que fosse agarrá-la sairia da carta — o que fecha o painel. Prometer um
   controle que se desfaz ao ser tocado é pior que não ter controle nenhum.
   No lugar dela, a franja no pé diz que a carta continua embaixo, e a roda
   leva até lá (ver `rolarPainel`). */
.gf-detalhe.flutua #gf-detalhe-corpo{scrollbar-width:none;}
.gf-detalhe.flutua #gf-detalhe-corpo::-webkit-scrollbar{display:none;}
.gf-detalhe.flutua.tem-mais::after{content:"";position:absolute;
  left:1px;right:1px;bottom:1px;height:34px;border-radius:0 0 13px 13px;
  background:linear-gradient(to bottom,transparent,var(--surface-2) 78%);}
.gf-detalhe-topo,.gf-detalhe-nome{display:flex;align-items:center;gap:6px;
  justify-content:space-between;color:var(--text);}
.gf-detalhe-topo{font-size:14px;}
.gf-detalhe-nome{font-size:12.5px;}
.gf-detalhe-tipo{font-size:12px;color:var(--text-muted);margin-top:2px;}
.gf-detalhe-texto{margin:6px 0 0;font-size:12.5px;line-height:1.45;
  white-space:pre-line;color:var(--text);}
.gf-detalhe-pt{width:fit-content;margin:6px 0 0 auto;padding:1px 8px;
  border:1px solid var(--border);border-radius:6px;color:var(--text);
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:13px;}
.gf-detalhe-estado{display:flex;flex-wrap:wrap;gap:4px;}
.gf-detalhe-estado span{font-size:11px;padding:1px 7px;border-radius:999px;
  background:var(--inset);border:1px solid var(--border);color:var(--text);}
.gf-detalhe-face + .gf-detalhe-face{border-top:1px solid var(--border);
  margin-top:4px;padding-top:8px;}
/* Os combos da carta, no pé do painel. Separados do texto da carta por uma
   régua porque não são a carta: são o que o DECK faz com ela. */
.gf-combos{border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}
.gf-combos-titulo{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;}
.gf-combos-titulo b{font-family:'IBM Plex Mono',monospace;color:var(--text);
  letter-spacing:0;}
.gf-combo + .gf-combo{border-top:1px solid var(--inset);margin-top:7px;
  padding-top:7px;}
.gf-combo-pecas{font-size:12px;line-height:1.5;}
.gf-combo .mais{color:var(--text-muted);margin:0 4px;}
/* A peça leva a zona onde está, colada nela: "Krenko campo" num bloco só,
   porque nome e lugar respondem juntos a uma pergunta só. O rótulo vem
   capitalizado de `NOME_DA_ZONA` (é título de área na mesa) e desce pra
   minúscula aqui, onde ele é aposto de uma frase, não título. */
.gf-peca{white-space:nowrap;}
.gf-peca i{font-style:normal;text-transform:lowercase;font-size:10.5px;
  margin-left:4px;padding:1px 5px;border-radius:999px;background:var(--inset);
  border:1px solid var(--border);color:var(--text-muted);}
/* Só as duas zonas de onde se joga ganham cor. O resto — baralho, cemitério,
   exílio — fica neutro de propósito: colorir seis zonas faria a linha piscar
   sem dizer qual delas importa. */
.gf-peca.z-campo i{border-color:var(--green);color:#A8D8BC;}
.gf-peca.z-mao i{border-color:var(--gold);color:var(--gold-light);}
.gf-peca.z-fora i{border-color:var(--red);color:#F2AFA1;cursor:help;}
/* A carta que abriu o painel, entre as peças: sem isto um combo de quatro
   nomes vira uma lista em que se procura qual deles é o que está na mão. */
.gf-peca.esta{color:var(--text);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--purple);
  text-underline-offset:3px;}
.gf-peca.generica{color:var(--text-muted);font-style:italic;cursor:help;
  white-space:normal;}
/* Condição e consequência, na mesma ordem e com a mesma separação da aba de
   combos: o que o combo PEDE fica na barra à esquerda, o que ele PRODUZ vem
   depois e em verde. */
.gf-combo-precisa{font-size:11px;color:var(--text-muted);margin-top:5px;
  line-height:1.45;padding-left:8px;border-left:2px solid var(--border);}
.gf-combo-precisa b{color:var(--text);font-weight:600;}
.gf-combo-produz{font-size:11px;color:#A8D8BC;margin-top:4px;line-height:1.45;}
.gf-combo-velho{font-size:11px;color:var(--gold-light);margin-bottom:6px;}
/* Os atalhos da mesa. Fora da tela cheia eles vão numa linha embaixo da
   mesa; na tela cheia, no pé da coluna do painel. */
.gf-atalhos{margin-top:10px;font-size:11.5px;color:var(--text-muted);}
.gf-atalhos-titulo{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:4px;}
.gf-atalhos dl{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;}
.gf-atalhos dt{color:var(--text);}
.gf-atalhos dd{margin:0 0 0 -8px;}

/* A coluna do painel só existe na tela cheia; fora dela o painel flutua e os
   atalhos seguem a mesa. */
.gf-coluna{display:contents;}

/* Na tela cheia a mesa começa na borda do painel, e o painel da carta
   cobriria a própria mesa: a área de jogo reserva uma coluna presa na altura
   da janela, com o painel em cima (a última carta olhada) e os atalhos no pé.
   O fundo da coluna aparece mesmo sem carta nenhuma, pra o espaço ler como
   lugar da carta e não como sobra. Fora da tela cheia a coluna central é
   estreita demais pra dividir, e o painel cai por cima da busca — por isso
   lá ele some quando o mouse sai da carta (ver `painelFlutua`). */
@media (hover:hover) and (min-width:1100px){
  body.gf-cheia .gf-area{display:grid;grid-template-columns:288px minmax(0,1fr);
    gap:20px;align-items:start;}
  body.gf-cheia #gf-mesa{grid-column:2;grid-row:1;min-width:0;}
  /* A coluna tem a altura da mesa, com a janela de teto: altura fixa de
     janela empurraria a página pra baixo da mesa só por causa dela. O mínimo
     é o que a carta grande do painel precisa quando a mesa é baixa. */
  body.gf-cheia .gf-coluna{grid-column:1;grid-row:1;position:sticky;top:12px;
    align-self:stretch;max-height:calc(100dvh - 24px);
    min-height:min(640px,calc(100dvh - 24px));display:flex;flex-direction:column;
    border-radius:14px;background:var(--inset);border:1px dashed var(--border);}
  /* A coluna já é a moldura: fundo, borda e sombra próprias fariam uma caixa
     dentro da outra. */
  /* Na coluna o painel PEGA o ponteiro, ao contrário do flutuante: aqui ele
     não fecha ao sair da carta (ver `atualizarPainel`), então dá pra levar o
     mouse até ele e rolar na barra, como em qualquer texto. */
  body.gf-cheia .gf-detalhe{position:static;flex:1 1 auto;min-height:0;
    width:auto;max-height:none;background:none;border-color:transparent;
    box-shadow:none;pointer-events:auto;}
  body.gf-cheia .gf-atalhos,body.gf-cheia .gf-log,
  body.gf-cheia .gf-nota-combos{flex:none;margin:0;
    padding:10px 12px 12px;border-top:1px dashed var(--border);}
  body.gf-cheia .gf-log{padding-bottom:10px;}
  body.gf-cheia .gf-atalhos dl{display:grid;grid-template-columns:max-content 1fr;
    gap:5px 10px;}
  body.gf-cheia .gf-atalhos dd{margin:0;}
}
@media (hover:none){
  .gf-detalhe,.gf-atalhos{display:none;}
}

/* Menu de uma carta da mesa: pra onde ela vai. */
.gf-menu{position:fixed;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:4px;z-index:70;min-width:150px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);}
.gf-menu button{display:block;width:100%;text-align:left;background:none;
  border:none;color:var(--text);font:inherit;font-size:12.5px;padding:6px 9px;
  border-radius:6px;cursor:pointer;}
.gf-menu button:hover{background:var(--inset);color:var(--gold-light);}
.gf-menu hr{border:none;border-top:1px solid var(--border);margin:3px 0;}

/* ---- um bloco por jogador ----
   Empilhados, e não lado a lado: a mesa tem a largura da tela, e dividir ao
   meio cortaria o campo de cada um pela metade. Os dois campos se separam
   por uma linha tracejada, que é a borda da mesa entre um e outro. */
.gf-jogadores{display:flex;flex-direction:column;gap:12px;}
.gf-jogador{display:flex;flex-direction:column;gap:8px;}
.gf-jogador + .gf-jogador{border-top:2px dashed var(--border);padding-top:12px;}

/* A barra do jogador: quem é e como está à esquerda, o que se cria na mesa à
   direita. O dourado da mesa é só de quem está na vez — a borda da barra e o
   selo —, pra a vez ser a primeira coisa que se lê de longe. */
.gf-barra{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;
  padding:5px 8px 5px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);font-size:11.5px;color:var(--text-muted);}
.gf-jogador.ativo .gf-barra{border-color:rgba(233,199,101,.6);
  box-shadow:inset 3px 0 0 var(--gold);}
.gf-nome-j{color:var(--text);font-size:13px;max-width:240px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-right:-6px;}
.gf-vez{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sobre-gold);background:var(--gold);border-radius:999px;
  padding:1px 7px;font-weight:700;white-space:nowrap;}
.gf-divisor{width:1px;align-self:stretch;background:var(--border);}
.gf-fatos-j{white-space:nowrap;}
.gf-fatos-j b{color:var(--text);font-family:'IBM Plex Mono',monospace;
  font-weight:600;}

/* Vida, marcadores do jogador e dano de comandante são o mesmo controle: um
   número entre dois passos redondos. A vida é o número maior da barra. */
.gf-vida,.gf-marca,.gf-dano{display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;}
.gf-passo{width:20px;height:20px;border-radius:50%;padding:0;flex:none;
  border:1px solid var(--border);background:none;color:var(--text-muted);
  font:inherit;font-size:13px;line-height:1;cursor:pointer;}
.gf-passo:hover{border-color:var(--gold);color:var(--gold-light);}
.gf-vida b{font-family:'IBM Plex Mono',monospace;font-size:17px;
  color:var(--text);min-width:26px;text-align:center;}
.gf-marca b,.gf-dano b{font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:var(--text);min-width:18px;text-align:center;}
/* 21 de dano de comandante mata. O número que mata não pode ter a mesma cara
   do número que não mata. */
.gf-dano.letal b{color:var(--red);}
.gf-botao{border:1px solid var(--border);border-radius:999px;background:none;
  color:var(--text);font:inherit;font-size:11.5px;padding:3px 11px;
  cursor:pointer;white-space:nowrap;}
.gf-botao:hover{border-color:var(--gold);color:var(--gold-light);}

/* ---- log ----
   Fechado por padrão: é conferência depois do fato, não o assunto da tela.
   Fora da tela cheia vai embaixo da mesa; na tela cheia, na coluna do
   painel, em cima dos atalhos. */
/* A nota dos combos, na coluna: uma linha sobre a MESA, não sobre uma carta.
   Fica acima do log porque o log é conferência depois do fato, e ela é
   contexto de antes. */
.gf-nota-combos{margin-top:12px;font-size:11.5px;line-height:1.5;
  color:var(--text-muted);}
.gf-nota-combos:empty{display:none;}
.gf-nota-combos b{color:var(--text);}
.gf-log{margin-top:12px;border-top:1px solid var(--border);padding-top:8px;}
.gf-log:empty{display:none;}
.gf-log-cabeca{background:none;border:none;color:var(--text-muted);font:inherit;
  font-size:11.5px;cursor:pointer;padding:0;}
.gf-log-cabeca:hover{color:var(--gold-light);}
.gf-log-cabeca b{font-family:'IBM Plex Mono',monospace;color:var(--text);}
.gf-log-lista{list-style:none;margin:6px 0 0;padding:0;max-height:220px;
  overflow-y:auto;font-size:11.5px;color:var(--text-muted);}
.gf-log-lista li{padding:2px 0;border-bottom:1px solid var(--inset);}
.gf-log-t{font-family:'IBM Plex Mono',monospace;color:var(--gold-light);
  margin-right:6px;}

/* ---- menu da carta ----
   O menu ganhou títulos e linhas de marcador: sem eles, vinte botões seguidos
   viram uma lista em que não se acha nada. */
.gf-menu-titulo{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);padding:6px 9px 2px;}
.gf-menu .gf-linha{display:flex;align-items:center;gap:4px;padding:2px 9px;
  font-size:12.5px;color:var(--text);}
.gf-menu .gf-linha span{flex:1;}
.gf-menu .gf-linha button{width:22px;padding:2px 0;text-align:center;
  border:1px solid var(--border);border-radius:6px;}
.gf-menu .gf-linha b{min-width:16px;text-align:center;
  font-family:'IBM Plex Mono',monospace;}

/* ---- modais do goldfish ----
   Buscar numa zona, criar ficha, pôr o segundo deck e o resumo do fim são a
   mesma caixa: uma lista ou uma forma curta por cima da mesa, que continua
   atrás. */
.gf-modal-fundo{position:fixed;inset:0;background:rgba(15,13,23,.72);
  display:grid;place-items:center;z-index:80;padding:20px;}
.gf-modal{background:var(--surface);border:1px solid var(--border);
  border-radius:14px;width:min(560px,100%);max-height:min(80dvh,720px);
  display:flex;flex-direction:column;overflow:hidden;}
.gf-modal-topo{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--border);}
.gf-modal-topo h3{margin:0;font-size:14px;}
.gf-modal-corpo{padding:12px 14px;overflow-y:auto;}
.gf-filtro{width:100%;margin-bottom:8px;}
.gf-lista{display:flex;flex-direction:column;}
.gf-lista-linha{display:flex;align-items:center;gap:6px;padding:4px 0;
  border-bottom:1px solid var(--inset);font-size:12.5px;}
.gf-lista-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.gf-lista-de{color:var(--text-muted);font-size:11px;}
/* Na linha da lista o `.mini` leva texto ("Cemitério", "Pôr na mesa"), não
   ícone: a largura vem do rótulo e a altura do padding, no lugar do quadrado. */
.gf-lista-linha .mini{width:auto;height:auto;min-height:24px;flex:none;
  padding:3px 10px;border-radius:999px;font-size:11.5px;white-space:nowrap;}
.gf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.gf-forma{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
.gf-forma label{display:flex;flex-direction:column;gap:3px;font-size:11px;
  color:var(--text-muted);}
.campo.curto{width:62px;}
.gf-cores-escolha{display:flex;gap:6px;margin:6px 0;}
.gf-cor-btn{background:none;border:1px solid var(--border);border-radius:8px;
  padding:4px 6px;cursor:pointer;opacity:.45;}
.gf-cor-btn.ativa{opacity:1;border-color:var(--gold);}

/* ---- resumo do fim ----
   As duas curvas uma embaixo da outra, na mesma escala: é a comparação que a
   pergunta faz ("o deck prometia isto; a partida entregou aquilo"), e duas
   escalas diferentes a desfariam em silêncio. */
.gf-resumo-bloco + .gf-resumo-bloco{margin-top:14px;padding-top:10px;
  border-top:1px solid var(--border);}
.gf-fatos{list-style:none;margin:6px 0;padding:0;font-size:12px;
  color:var(--text-muted);}
.gf-fatos b{color:var(--text);font-family:'IBM Plex Mono',monospace;}
.gf-duas-curvas{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.gf-legenda{font-size:10.5px;color:var(--text-muted);}
.gf-curva{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:4px;}
.gf-nao-puxadas{margin-top:8px;font-size:11.5px;color:var(--text-muted);}
.gf-nao-puxadas summary{cursor:pointer;}

/* Tela cheia: a mesa quer largura e altura, e as duas colunas laterais, o
   cabeçalho do deck e a fita de abas não têm o que dizer enquanto se joga.
   Classe no body em vez de modal — a aba continua sendo a aba, e sair é um
   clique no mesmo botão (ou Esc). */
body.gf-cheia #lateral,
body.gf-cheia #trilho,
body.gf-cheia .topo,
body.gf-cheia #abas-deck{display:none !important;}
body.gf-cheia .corpo{grid-template-columns:minmax(0,1fr);max-width:none;
  padding-block:12px;}
body.gf-cheia #painel-goldfish{padding:10px 14px;}
body.gf-cheia .gf-topo{margin-bottom:6px;}
body.gf-cheia .gf-jogador{gap:6px;}

/* ---------------- oferta de reclamar deck órfão ---------------- */
.orfao-fundo{position:fixed;inset:0;background:rgba(15,13,23,.72);
  display:grid;place-items:center;z-index:60;padding:20px;}
.orfao-caixa{background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:20px;max-width:400px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);}
.orfao-caixa h3{font-family:'Cinzel',serif;font-size:17px;margin:0 0 8px;}
.orfao-caixa p{color:var(--text-muted);font-size:13.5px;line-height:1.55;
  margin:0 0 16px;}
.orfao-acoes{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.orfao-acoes a.btn{text-decoration:none;}

/* ---------------- símbolos de mana ---------------- */
.mana{display:inline-flex;gap:2px;align-items:center;flex:none;}
/* Só o SEGUNDO lado ganha respiro, e é ele que diz que ali começa outro
   custo. A folga vai na margem, e não no `gap` do `.mana`, porque há
   `.mana` desenhado com as bolinhas soltas dentro (identidade do
   comandante, cores que um terreno produz) — subir o `gap` esparramaria
   essas também. */
.mana .lado{display:inline-flex;gap:2px;align-items:center;}
.mana .lado + .lado{margin-left:7px;}
.pip{
  width:13px;height:13px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;
  color:#20182C;border:1px solid rgba(0,0,0,.35);
}
.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);}

/* O botão redondo guarda um ícone e nada mais: o `inline-flex` centra o
   desenho nos dois eixos, e o line-height zerado tira da conta a linha de
   texto que sobraria embaixo dele. */
.btn.redondo{
  width:31px;height:31px;padding:0;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
}
/* ---------------- detalhe da cotação ----------------
   O total da cotação mora no cabeçalho; o detalhe dela — as duas fontes,
   as cartas caras, o que ficou de fora — não cabe num tooltip e não merece
   uma coluna. Abre num painel ancorado embaixo do próprio número, onde a
   pergunta nasce, e some quando não interessa mais. */
.cotacao-caixa{
  position:fixed;z-index:75;width:min(460px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.85);padding:14px 15px;
  max-height:min(72dvh,540px);overflow-y:auto;
}
.cotacao-caixa .orc-resultado{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:4px 20px;align-items:start;
}
.cotacao-caixa .caras{margin-top:0;}
.cotacao-topo{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
}
.cotacao-topo h2{flex:1;margin:0;}

/* ---------------- abas ----------------
   Deck, análise, mana base e combos são quatro RESPOSTAS sobre o mesmo
   deck, e só uma está sendo perguntada de cada vez. Uma superfície
   só, com um seletor em cima: empilhados na mesma rolagem, quem quer a
   curva de mana atravessa 99 cartas pra chegar nela.

   A fita rola de lado em vez de quebrar em duas linhas: no celular ela é a
   única navegação da tela, e uma navegação que muda de altura empurra o
   conteúdo toda vez que se troca de aba. */
.abas-painel{
  display:flex;gap:5px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:5px;margin-bottom:14px;
  overflow-x:auto;scrollbar-width:none;
}
.abas-painel::-webkit-scrollbar{display:none;}
.abas-painel button{
  flex:0 0 auto;border:none;background:transparent;color:var(--text-muted);
  border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:'Inter',sans-serif;transition:color .12s,background .12s;
}
.abas-painel button:hover{color:var(--text);}
.abas-painel button.ativa{background:var(--gold);color:var(--sobre-gold);}
.abas-painel button .n{
  font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.62;
}
/* Variante estreita, pra fita de abas dentro de uma coluna de 372px. */
/* As abas do painel de adicionar trocam de conteúdo dentro de uma coluna
   que a pessoa já está olhando: a aba ativa só precisa se distinguir das
   outras duas, não chamar atenção da tela inteira. O dourado fica reservado
   pras abas do deck, que mudam o assunto do meio da tela. */
.abas-painel.miuda{
  margin-bottom:11px;padding:4px;overflow:visible;background:var(--inset);
}
.abas-painel.miuda button.ativa{
  background:var(--surface-2);color:var(--text);
}
/* Um terço da largura pra cada: são três destinos irmãos, e larguras
   diferentes fariam parecer que um deles é o principal. */
.abas-painel.miuda button{
  flex:1 1 0;min-width:0;padding:6px 4px;font-size:12px;justify-content:center;
  gap:5px;
}
/* Fixo em pixel, e não no 1.15em de sempre: aqui o ícone divide a linha com
   um rótulo de 12px, e proporcional a essa altura ele vira borrão. */
.abas-painel.miuda .ico{width:15px;height:15px;}
/* Aberto por um atalho de outro canto da tela (o botão de mana base no
   cabeçalho de Terrenos), o painel pisca uma vez: sem isso a troca de aba
   acontece sem nada dizendo o que respondeu. */
@keyframes pisca-painel{
  from{box-shadow:0 0 0 2px var(--gold);}
  to{box-shadow:0 20px 40px -22px rgba(0,0,0,.6);}
}
.painel.chamado{animation:pisca-painel 1.1s ease-out;}

/* ---------------- lista do deck ---------------- */
.grupo{margin-bottom:16px;}
.grupo:last-child{margin-bottom:0;}
.grupo h3{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font-size:12px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;
}
/* O tracejado é um elemento e não um `::after` porque precisa ficar ENTRE
   o nome do grupo e as ações dele — um pseudoelemento só sabe ficar no
   fim. */
.grupo h3 .traco{flex:1;border-top:1px dashed var(--border);min-width:10px;}
.grupo h3 .n{font-family:'IBM Plex Mono',monospace;color:var(--gold-light);}
/* O título INTEIRO recolhe o grupo: num cabeçalho de lista, o alvo esperado é
   a linha toda, não um triângulo de 12px. Ele se veste do h3 (herda fonte,
   caixa alta e cor) pra continuar lendo como título — o que mudou foi o que
   ele faz, não o que ele é. */
.grupo h3 .grupo-titulo{
  display:flex;align-items:center;gap:8px;flex:none;min-width:0;
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
}
.grupo h3 .grupo-titulo:hover{color:var(--gold-light);}
.grupo h3 .grupo-titulo .ico{
  width:11px;height:11px;flex:none;color:var(--text-muted);
}
.grupo h3 .grupo-titulo:hover .ico{color:var(--gold-light);}
/* Recolhido, o cabeçalho é a única coisa que sobrou do grupo: o espaço de
   baixo iria virar um vão entre um título e outro. */
.grupo.fechado h3{margin-bottom:0;}
.grupo.fechado{margin-bottom:9px;}
/* A categoria feita à mão se distingue da que sai do tipo da carta: uma é
   decisão de quem monta e a outra é fato da carta — e só a primeira pode
   ser renomeada, movida ou apagada. */
.grupo.propria h3{color:var(--gold-light);}
.grupo.propria h3::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;
}
.grupo.fora-da-conta h3 .n{color:var(--text-muted);}
.grupo h3 .fora-rot{
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.05em;
  color:var(--text-muted);border:1px solid var(--border);border-radius:999px;
  padding:1px 7px;text-transform:none;cursor:help;font-weight:400;flex:none;
}
/* As ações do grupo só aparecem no hover, como as da linha: um ⋮ em cada
   um dos dez cabeçalhos seria mais ruído do que lista. */
.grupo h3 .acoes-grupo{display:flex;gap:3px;flex:none;opacity:0;
  transition:opacity .12s;}
.grupo:hover h3 .acoes-grupo,
.grupo h3 .acoes-grupo:focus-within{opacity:1;}
@media (hover:none){ .grupo h3 .acoes-grupo{opacity:1;} }
.grupo h3 .mini{width:19px;height:19px;font-size:11px;}
/* O botão da mana base mora no cabeçalho de Terrenos: é onde a pergunta
   "meus terrenos estão certos?" nasce, e isso poupa procurar a resposta
   num painel do outro lado da tela. */
.btn-atalho{
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-muted);border-radius:999px;padding:2px 9px;font-size:10px;
  cursor:pointer;flex:none;font-family:'Inter',sans-serif;
  text-transform:none;letter-spacing:0;font-weight:500;
}
.btn-atalho:hover{border-color:var(--gold);color:var(--gold-light);}
.rodape-deck{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--border);
}
.grupo-vazio{
  font-size:11.5px;color:var(--text-muted);border:1px dashed var(--border);
  border-radius:9px;padding:9px 11px;line-height:1.5;
}

/* Achar e ordenar o que JÁ está na lista. Discreto de propósito: é ferramenta
   de quem já tem deck grande, e uma barra chamativa em cima de toda lista
   competiria com as cartas — que são o assunto. */
.ferramentas-lista{display:flex;gap:8px;align-items:center;margin:0 0 12px;}
.campo-lista{
  flex:1;min-width:0;border-radius:999px;padding:7px 13px;font-size:12.5px;
}
/* O ✕ nativo do `type=search` no WebKit sai cinza-claro sobre fundo escuro e
   quase some; este devolve o contraste sem trocar o desenho por um botão
   nosso. */
.campo-lista::-webkit-search-cancel-button{
  filter:invert(1) opacity(.55);cursor:pointer;
}
.campo-lista::-webkit-search-cancel-button:hover{filter:invert(1) opacity(1);}
.campo-ordem{
  flex:none;width:auto;max-width:44%;font-size:12px;padding:7px 10px;
  border-radius:999px;
}
/* Na coluna estreita ele é o único controle, e não divide a linha com
   ninguém: volta a ocupar a largura toda. */
.painel-talvez .campo-lista{margin:0 0 8px;flex:none;width:100%;font-size:12px;}
.lista-sem-achado{padding:14px 0;font-size:12.5px;}

/* ---------------- menu de categoria ----------------
   Um menu ancorado, e não arrastar-e-soltar como único caminho: arrastar
   funciona no mouse e não funciona no toque, e esta tela inteira é usável
   no celular. O arrastar existe POR CIMA disto, como atalho de quem tem
   mouse — nunca como a única forma de mover uma carta. */
.menu{
  position:fixed;z-index:80;min-width:226px;max-width:290px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85);padding:6px;
  max-height:min(70dvh,440px);overflow-y:auto;
}
.menu h4{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin:7px 8px 4px;
  font-weight:600;
}
/* Item que leva a outra página é <a>, o resto é <button>; os dois com a
   mesma cara. */
.menu [role="menuitem"]{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--text);padding:7px 9px;font-size:12.5px;cursor:pointer;
  font-family:'Inter',sans-serif;text-decoration:none;
}
.menu [role="menuitem"]:hover,.menu [role="menuitem"]:focus-visible{
  background:var(--surface);border-color:var(--border);
}
.menu [role="menuitem"] .marca{
  width:13px;flex:none;color:var(--gold-light);
  display:inline-flex;align-items:center;justify-content:center;
}
.menu [role="menuitem"] .rot-menu{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.menu [role="menuitem"].perigo:hover{border-color:var(--red);color:var(--red);}
/* `.separador`, e não `.risco`: esse nome já é o cartão de risco das
   chances de comprar, e o estilo dele vazaria pra cá. */
.menu .separador{height:1px;background:var(--border);margin:5px 4px;}
.menu .nota-menu{
  font-size:11.5px;color:var(--text-muted);line-height:1.45;margin:0 9px 6px;
}
.menu [role="menuitem"]:disabled{opacity:.45;cursor:not-allowed;}
.menu [role="menuitem"]:disabled:hover{background:transparent;border-color:transparent;}

/* ---------------- histórico de versões ----------------
   Uma linha do tempo da mais nova pra mais antiga. Cada versão diz o que
   entrou e o que saiu em duas colunas lado a lado, porque troca de carta se
   lê em par: "saiu Cultivate, entrou Three Visits". O bloco tracejado no
   topo é a versão que ainda não foi concluída. */
.hist-linha{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.hist-bloco{
  background:var(--inset);border:1px solid var(--border);border-radius:11px;
  padding:11px 13px;
}
.hist-bloco.pendente{
  background:transparent;border-color:var(--gold);border-style:dashed;margin-bottom:14px;
}
.hist-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.hist-cab b{font-size:13px;}
.hist-quando{font-size:12px;color:var(--text-muted);}
.hist-saldo{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-muted);}
.hist-saldo .entrou{color:var(--green);}
.hist-saldo .saiu{color:var(--red);}
.hist-diferenca{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:10px;}
.hist-coluna h4{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin:0 0 5px;font-weight:600;
}
.hist-coluna ul{list-style:none;margin:0;padding:0;}
.hist-coluna li{display:flex;align-items:baseline;gap:7px;font-size:12.5px;padding:2px 0;min-width:0;}
.hist-coluna .q{font-family:'IBM Plex Mono',monospace;font-size:11.5px;flex:none;min-width:3ch;}
.hist-coluna.entrou .q{color:var(--green);}
.hist-coluna.saiu .q{color:var(--red);}
.hist-coluna .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist-coluna .zona{
  flex:none;font-size:10px;color:var(--text-muted);border:1px solid var(--border);
  border-radius:999px;padding:0 6px;
}
.hist-coluna .nota{margin:0;}
@media (max-width:600px){ .hist-diferenca{grid-template-columns:1fr;} }
/* Colunas de jornal, e não grade: a lista DESCE a primeira coluna inteira
   antes de começar a segunda. Numa grade, que preenche linha por linha, a
   ordem cai em ziguezague — 1ª carta à esquerda, 2ª à direita, 3ª de volta à
   esquerda — e ordenar por preço ou por nome não serve de nada se ler a
   ordem exige varrer os olhos de um lado pro outro a cada carta.

   352px é o mínimo em que o nome da carta não trunca com a coluna de preço
   (~46px) ao lado. Medido: abaixo disso o corte pega quase um terço das
   cartas nas larguras de tablet; acima, não melhora nada e só custa uma
   coluna inteira. Não precisa do `min(…, 100%)` que a grade precisava: um
   `column-width` maior que o espaço vira uma coluna só da largura que há —
   o telefone se resolve sozinho. */
.colunas{column-width:352px;column-gap:16px;}
/* O vão entre as linhas era o `row-gap` da grade; aqui ele é margem de cada
   uma. E nenhuma linha pode ser partida no pé da coluna: metade de uma carta
   embaixo e metade em cima da próxima não é uma linha, são duas erradas. */
.colunas .linha{break-inside:avoid;margin-bottom:2px;}

/* A linha inteira é clicável: ela abre a carta em tela cheia. */
.linha{
  position:relative;cursor:pointer;
  display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:7px;
  border:1px solid transparent;transition:background .12s;
}
.linha:hover{background:var(--surface-2);}
.linha.problema{border-color:rgba(217,99,74,.5);background:rgba(217,99,74,.07);}
/* A quantidade é um campo de número que se lê como texto: sem caixa, sem
   setinhas. Só no foco ganha um traço embaixo, pra quem clicou ver que
   está digitando. */
.linha .qtd{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold-light);
  width:3ch;text-align:right;flex:none;
  background:none;border:none;border-radius:0;padding:0;margin:0;
  appearance:textfield;-moz-appearance:textfield;
}
.linha .qtd::-webkit-inner-spin-button,
.linha .qtd::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.linha .qtd:focus{outline:none;box-shadow:inset 0 -1px var(--gold);}
.linha .nome{
  flex:1;min-width:0;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.linha .porque{
  font-size:10px;color:#F2AFA1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;
}
/* Os botões do fim da linha flutuam por cima dela em vez de ocuparem uma
   coluna fixa: reservados no fluxo, eles tirariam espaço do nome da carta
   o tempo todo pra aparecerem só no hover. O degradê à esquerda separa os
   botões do texto que passa por baixo.

   Centrados esticando de cima a baixo, e não com `top:50%` + `transform`: o
   transform só move o desenho, e a caixa de layout, começando no meio da
   linha, sobra pra baixo dela. Na linha do pé de uma coluna essa sobra é
   empurrada pra coluna seguinte, e a caixa partida nas duas desenha os
   botões esticados por cima de ambas, longe da linha. */
.linha .ctrl{
  position:absolute;top:0;bottom:0;right:5px;align-items:center;
  display:flex;gap:2px;opacity:0;transition:opacity .12s;
  padding-left:18px;border-radius:7px;
  background:linear-gradient(to right,
    rgba(36,31,61,0), var(--surface-2) 18px);
}
.linha:hover .ctrl,.linha:focus-within .ctrl{opacity:1;}
/* A linha com problema não fica cinza no hover: mantém o tom avermelhado, e
   o degradê dos botões precisa terminar nessa cor pra não abrir um retângulo
   de outra cor por cima dela. rgb(40,28,50) é o vermelho a 7% já aplicado
   sobre o fundo do painel. */
.linha.problema .ctrl{
  background:linear-gradient(to right,
    rgba(40,28,50,0), rgb(40,28,50) 18px);
}
/* O ⋯ do menu da carta só existe no celular e no toque: no mouse o menu
   abre no clique direito da linha. As regras que o mostram ficam nos blocos
   de toque e de celular, mais abaixo. */
.linha .so-celular{display:none;}
.mini{
  width:21px;height:21px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);cursor:pointer;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
}
.mini:hover{border-color:var(--gold);color:var(--gold-light);}
.mini.sai:hover{border-color:var(--red);color:var(--red);}
/* Em telas de toque não existe hover: o ✕ e os controles ficam sempre à
   vista, senão não teria como tirar a carta. E, sempre à vista, voltam pro
   fluxo — flutuando eles cobririam o fim de todo nome, o tempo todo. */
@media (hover:none){
  .linha .ctrl{
    position:static;opacity:1;
    flex:none;padding-left:0;background:none;
  }
  .linha .so-celular{display:flex;}
}

/* comandante em destaque */
.comandante{
  display:flex;gap:12px;align-items:center;padding:10px;border-radius:11px;
  background:linear-gradient(120deg,rgba(233,199,101,.10),transparent 70%);
  border:1px solid rgba(233,199,101,.4);margin-bottom:14px;
}
.comandante img{width:52px;height:52px;object-fit:cover;object-position:center 18%;
  border-radius:8px;flex:none;background:var(--surface-2);}
/* Arte e nome viram um botão só: é ele que abre a carta inteira. Botão de
   verdade, e não o <div> com um clique, porque aqui não existe menu de
   linha pra servir de porta de teclado — no deck existe. */
.comandante .ver{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  background:none;border:none;padding:0;margin:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;
}
.comandante .ver:hover .dados b{color:var(--gold-light);}
.comandante .dados{flex:1;min-width:0;}
.comandante .dados b{display:block;font-size:14px;font-family:'Cinzel',serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comandante .dados small{color:var(--text-muted);font-size:11px;}

/* ---------------- análise ---------------- */
.barras{display:flex;align-items:flex-end;gap:4px;height:86px;margin-top:4px;}
.barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:3px;height:100%;}
.barra .haste{width:100%;background:linear-gradient(180deg,var(--purple),#5B44B8);
  border-radius:3px 3px 0 0;min-height:2px;transition:height .25s;}
.barra .cmc{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--text-muted);}
.barra .qt{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--gold-light);height:11px;}

/* Cores e tipos lado a lado: são duas leituras independentes do mesmo
   deck, e empilhadas a segunda ficava abaixo da dobra do painel. */
.distrib-duo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 20px;align-items:start;
}
.distrib{display:flex;flex-direction:column;gap:5px;margin-top:4px;}
.distrib .item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-muted);}
.distrib .trilho{flex:1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;}
/* `display:block` não é enfeite: sem ele o <span> continua inline, e
   largura e altura em porcentagem não valem — a barra sai invisível. */
.distrib .cheio{display:block;height:100%;border-radius:3px;}
.distrib .num{font-family:'IBM Plex Mono',monospace;font-size:10px;width:20px;text-align:right;}

/* ---------------- chances de comprar ---------------- */
/* Tabela e não gráfico: são as categorias do deck, todas carregando
   significado, com três números cada — barra nenhuma responde "quantos por
   cento" melhor do que o número escrito. */
.chances{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px;}
.chances th{
  font-weight:400;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);text-align:right;padding:0 0 5px 8px;
  vertical-align:bottom;cursor:help;
}
.chances th:first-child{text-align:left;padding-left:0;cursor:default;}
.chances td{
  padding:4px 0 4px 8px;text-align:right;border-top:1px solid var(--border);
  color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-variant-numeric:tabular-nums;
}
.chances td:first-child{
  text-align:left;padding-left:0;font-family:inherit;font-size:11.5px;
  color:var(--text-muted);
}
.chances .qt{color:var(--text-muted);font-family:'IBM Plex Mono',monospace;
  font-size:10px;}
/* A categoria feita à mão vem marcada como no cabeçalho do grupo, na lista: é
   a mesma distinção de lá — decisão de quem monta contra fato da carta —, e
   sem a marca as duas viriam na mesma tabela parecendo a mesma coisa. */
.chances tr.propria td:first-child{color:var(--gold-light);}
.chances tr.propria td:first-child::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:6px;vertical-align:middle;
}
/* As duas pontas da mesma mana base: terreno de menos perde o turno, terreno
   demais saca terreno no lugar de carta. Ficam fora da tabela porque só
   valem pra uma linha dela. */
.risco-duo{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.risco{
  flex:1;min-width:158px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:9px 11px;
}
.risco .rot{display:block;font-size:11px;color:var(--text-muted);}
.risco .val{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:21px;
  line-height:1.25;margin:2px 0;color:var(--gold-light);
}
/* A cor nunca conta a história sozinha: o estado vem escrito na linha de
   baixo, que é o que sobra pra quem não separa verde de vermelho. */
.risco.ok .val{color:var(--green);}
.risco.atencao .val{color:var(--gold-light);}
.risco.alto .val{color:#F2AFA1;}
.risco .porque{display:block;font-size:10.5px;color:var(--text-muted);
  line-height:1.45;}
.risco .estado{color:var(--text);}

.aponta{
  display:flex;gap:7px;align-items:flex-start;font-size:12px;line-height:1.45;
  padding:8px 10px;border-radius:8px;margin-bottom:5px;
}
.aponta.erro{background:rgba(217,99,74,.12);border:1px solid rgba(217,99,74,.5);color:#F2AFA1;}
.aponta.aviso{background:rgba(233,199,101,.10);border:1px dashed var(--gold);color:var(--gold-light);}
.aponta.ok{background:rgba(76,154,107,.10);border:1px solid rgba(76,154,107,.45);color:#A8D8BC;}
/* Deck incompleto NÃO é erro: é o estado normal de quem está montando.
   Vermelho aqui gritaria durante as duas horas inteiras da montagem, e
   quando um erro de verdade aparecesse ninguém olharia mais. */
.progresso{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;margin-bottom:5px;
}
.progresso .texto{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--text-muted);margin-bottom:6px;}
.progresso .texto b{font-family:'IBM Plex Mono',monospace;color:var(--gold-light);}
.progresso .trilho{display:block;height:6px;border-radius:3px;
  background:var(--bg);overflow:hidden;}
.progresso .cheio{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--purple),var(--gold));transition:width .3s;}

/* ---------------- sugestões (EDHREC) ---------------- */
.temas{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 4px;}
.lista-sug{margin-top:12px;}
.lista-sug h3{
  display:flex;align-items:center;gap:8px;margin:0 0 4px;
  font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;
}
.lista-sug h3::after{content:"";flex:1;border-top:1px dashed var(--border);}
/* A sugestão reusa a linha da busca: é a mesma ação (clicar pra somar ao
   deck), e dar duas aparências pra mesma ação faria a pessoa reaprender. */
.achado .sinergia{
  font-family:'IBM Plex Mono',monospace;font-size:10px;flex:none;
  border:1px solid var(--border);border-radius:999px;padding:1px 7px;
  color:var(--text-muted);cursor:help;
}
.achado .sinergia.alta{border-color:var(--green);color:#A8D8BC;}
.fonte-edhrec{
  font-size:11px;color:var(--text-muted);margin-top:12px;line-height:1.5;
}
.fonte-edhrec a{color:var(--gold-light);}

/* De QUEM é esta lista. A aba serve a duas perguntas parecidas o bastante
   pra se confundirem — "o que combina com o comandante" e "o que combina
   com esta carta do deck" — e a diferença entre elas não aparece em nenhuma
   das cartas listadas. Então ela é dita em cima, antes da primeira linha,
   e não numa nota de rodapé que se lê depois de já ter clicado. */
.sug-alvo{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:var(--inset);border:1px solid var(--border);
  border-radius:9px;padding:7px 9px;font-size:11.5px;color:var(--text-muted);
}
.sug-alvo .ico{color:var(--gold-light);}
.sug-alvo b{
  color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.sug-alvo .quem{flex:1;min-width:0;display:flex;align-items:baseline;gap:5px;}
/* Só existe quando a lista é de uma carta: voltar pro comandante é
   desfazer, e não há o que desfazer na lista com que a aba começa. */
.sug-alvo .voltar{
  flex:none;display:flex;align-items:center;gap:5px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text-muted);
  font-family:'Inter',sans-serif;font-size:11px;
  padding:3px 9px;cursor:pointer;
}
.sug-alvo .voltar:hover{border-color:var(--gold);color:var(--gold-light);}
.sug-alvo .voltar .ico{width:12px;height:12px;color:inherit;}

/* O deck médio veste a caixa do `.destino`; daqui só sai o que muda nele. */
.deck-medio{margin:10px 0 4px;}
.deck-medio-titulo{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--text);}
.deck-medio .btn{flex:none;padding:5px 14px;font-size:11.5px;}
.deck-medio .fonte-edhrec{margin-top:6px;}
#dm-resultado:empty{display:none;}

/* ---------------- mana base ---------------- */
/* De cima pra baixo, na ordem das perguntas: quantos terrenos e de que cores
   (o resumo), o que fecha a conta de graça (os básicos) e o que comprar (os
   terrenos que fixam, por ciclo). O painel mora na coluna do deck, que vai
   de 540px a 820px no computador e à tela inteira no celular — por isso as
   quebras são por largura do próprio painel, não da janela. */
#mb-resultado{container-type:inline-size;}

.mb-resumo{
  display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,2fr);gap:10px;
}
.mb-cartao{
  background:var(--inset);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;min-width:0;
}
.mb-rotulo{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);
}
.mb-numero{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px;}
.mb-numero b{font-family:'IBM Plex Mono',monospace;font-size:32px;line-height:1;
  font-weight:600;color:var(--gold-light);}
.mb-numero span{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--text-muted);}
.mb-veredito{
  display:inline-block;font-size:11px;font-weight:600;border-radius:999px;
  padding:2px 9px;border:1px solid var(--border);color:var(--gold-light);
  background:rgba(233,199,101,.10);
}
.mb-conta.ok .mb-numero b{color:var(--green);}
.mb-conta.ok .mb-veredito{border-color:rgba(76,154,107,.45);color:#A8D8BC;
  background:rgba(76,154,107,.10);}
.mb-conta.falta .mb-numero b{color:#F2AFA1;}
.mb-conta.falta .mb-veredito{border-color:rgba(217,99,74,.5);color:#F2AFA1;
  background:rgba(217,99,74,.12);}
.mb-conta .nota{margin:8px 0 0;}

.mb-cartao-cab{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:6px;}
.mb-legenda{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-muted);}
.mb-legenda i{display:inline-block;}
.mb-legenda .barra{width:14px;height:6px;border-radius:3px;background:var(--text-muted);}
.mb-legenda .marca{width:2px;height:11px;background:var(--gold-light);margin-left:6px;}
.mb-cor{
  display:grid;grid-template-columns:13px 62px minmax(0,1fr) 44px 70px;
  align-items:center;gap:8px;font-size:12px;color:var(--text);padding:4px 0;
}
.mb-cor .trilho{display:block;height:8px;border-radius:4px;
  background:var(--surface-2);position:relative;}
.mb-cor .cheio{display:block;height:100%;border-radius:4px;}
/* A marca é o que o deck PEDE; a barra é o que ele TEM. Barra que não
   chega na marca é fonte faltando — dá pra ver sem ler número. */
.mb-cor .marca{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px;
  background:var(--gold-light);}
.mb-cor .num{font-family:'IBM Plex Mono',monospace;font-size:11px;
  text-align:right;color:var(--text-muted);white-space:nowrap;}
.mb-cor .num b{color:var(--text);font-weight:600;}
.mb-cor .dif{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;
  font-size:10.5px;white-space:nowrap;color:#A8D8BC;}
.mb-cor .dif .ico{width:11px;height:11px;}
.mb-cor .dif.falta{color:#F2AFA1;font-weight:600;}

.mb-base{margin-top:10px;}
/* Três segmentos com vão de 2px entre eles, na ordem de melhor pra pior. A
   legenda repete os números por escrito: a cor sozinha não diz qual é qual. */
.mb-base-barra{display:flex;gap:2px;height:8px;margin:2px 0 8px;}
.mb-base-barra .seg{flex-basis:0;min-width:4px;border-radius:4px;}
.mb-base .desvirada{background:var(--green);}
.mb-base .condicional{background:var(--gold);}
.mb-base .virada{background:var(--mana-R);}
.mb-base-legenda{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--text-muted);}
.mb-base-legenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;}
.mb-base-legenda b{font-family:'IBM Plex Mono',monospace;color:var(--text);font-weight:600;}
.mb-base-grupos{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.mb-base-grupo{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-muted);border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-family:'Inter',sans-serif;
}
.mb-base-grupo b{font-family:'IBM Plex Mono',monospace;color:var(--text);font-weight:600;}
button.mb-base-grupo{cursor:pointer;}
button.mb-base-grupo:hover{border-color:var(--gold);color:var(--gold-light);}
.mb-base-grupo .ico{width:10px;height:10px;}

.mb-basicos{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:10px;
  padding:9px 12px;border:1px dashed var(--border);border-radius:12px;
}
.mb-basicos-lista{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;}
.mb-basico{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);border-radius:999px;
  padding:4px 10px 4px 6px;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.mb-basico:hover{border-color:var(--gold);color:var(--gold-light);}
.mb-basico .ico{width:12px;height:12px;color:var(--gold-light);}
.mb-basico:disabled{opacity:.45;cursor:not-allowed;}
.mb-basicos .add-peca{margin-left:0;display:inline-flex;align-items:center;gap:4px;}
.mb-basicos .add-peca .ico{width:12px;height:12px;}

.mb-fixacao{margin-top:20px;scroll-margin-top:84px;}
.mb-fix-cab{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 12px;margin-bottom:12px;}
.mb-fix-cab h2.secao{margin:0;}
.mb-teto{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.mb-teto > span{font-size:11px;color:var(--text-muted);margin-right:2px;}
.mb-mono{margin:-4px 0 10px;}

/* A lista dos ciclos gruda no topo enquanto a visão geral rola: ela é o
   índice, e índice que some na segunda tela de rolagem não serve de
   índice. */
.mb-navegador{display:grid;grid-template-columns:184px minmax(0,1fr);
  gap:16px;align-items:start;}
.mb-ciclos{
  display:flex;flex-direction:column;gap:1px;position:sticky;top:84px;
  max-height:calc(100dvh - 100px);overflow-y:auto;padding-right:4px;
}
.mb-grupo-rot{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#6F6490;padding:12px 8px 3px;
}
.mb-ciclo-btn{
  display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:8px;padding:5px 8px;
  font-size:12px;color:var(--text-muted);cursor:pointer;
}
.mb-ciclo-btn:hover{background:var(--surface-2);color:var(--text);}
.mb-ciclo-btn.ativo{background:rgba(233,199,101,.12);color:var(--gold-light);
  box-shadow:inset 2px 0 0 var(--gold);}
.mb-ciclo-btn .rot{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mb-ciclo-btn .n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;flex:none;}
.mb-ciclo-btn .tem{display:inline-flex;align-items:center;gap:1px;flex:none;
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--green);}
.mb-ciclo-btn .tem .ico{width:10px;height:10px;}
.mb-ciclo-btn.sem-terreno .rot,.mb-ciclo-btn.sem-terreno .n{opacity:.5;}

.mb-lista{min-width:0;}
.mb-ciclo + .mb-ciclo{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.mb-ciclo-cab{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:6px;}
.mb-ciclo-cab h3{margin:0;font-size:13.5px;font-weight:600;color:var(--text);}
.mb-ciclo-cab p{margin:2px 0 0;font-size:11.5px;color:var(--text-muted);line-height:1.45;}
.mb-ver{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
  border-radius:999px;padding:3px 10px;font-size:11px;cursor:pointer;
  font-family:'Inter',sans-serif;white-space:nowrap;
}
.mb-ver:hover{border-color:var(--gold);color:var(--gold-light);}
.mb-ver .ico{width:11px;height:11px;}
.mb-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:2px 6px;margin:0 -8px;}
/* Anel dourado: cor que o deck ainda pede. Um terreno com dois anéis cobre
   dois buracos de uma vez. */
.mb-terreno .pip.cobre{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px var(--gold);}
.mb-terreno .mana{gap:5px;padding:0 3px;}
.mb-terreno[aria-disabled="true"]{cursor:default;}
.mb-terreno[aria-disabled="true"]:hover{background:transparent;border-color:transparent;}
.mb-chegando{margin:8px 0 0;}
.mb-de-fora{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--border);}
.mb-acima{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  font-size:11.5px;color:var(--text-muted);}

/* A explicação da conta fica recolhida: é pra quem desconfia do número, não
   pra quem está fechando a lista. */
.mb-como summary{cursor:pointer;color:var(--text);font-weight:600;list-style:none;
  display:flex;align-items:center;gap:6px;}
.mb-como summary::-webkit-details-marker{display:none;}
.mb-como summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s;}
.mb-como[open] summary::before{transform:rotate(90deg);}
.mb-como p{margin:8px 0 0;}

/* Painel estreito (a coluna do deck abaixo de 1200px, e o celular): os
   ciclos viram uma fita de pílulas que rola de lado, em cima da lista. */
@container (max-width:640px){
  .mb-resumo{grid-template-columns:minmax(0,1fr);}
  .mb-navegador{grid-template-columns:minmax(0,1fr);gap:10px;}
  .mb-ciclos{
    flex-direction:row;position:static;max-height:none;overflow-x:auto;
    gap:5px;padding:0 0 6px;scrollbar-width:thin;
  }
  .mb-grupo-rot{display:none;}
  .mb-ciclo-btn{width:auto;flex:none;border:1px solid var(--border);
    border-radius:999px;background:var(--surface-2);padding:4px 10px;}
  .mb-ciclo-btn .rot{overflow:visible;}
  .mb-ciclo-btn.ativo{box-shadow:none;border-color:var(--gold);}
}
@container (max-width:420px){
  .mb-cor{grid-template-columns:13px minmax(0,1fr) 44px 64px;}
  .mb-cor .mb-cor-nome{display:none;}
  .mb-teto > span{display:none;}
}

.paginador{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--text-muted);
}
.paginador .mini:disabled{opacity:.3;cursor:not-allowed;}
/* O paginador da busca tem duas metades, e elas respondem perguntas
   diferentes: à esquerda, quantos resultados por página e quantos existem ao
   todo — que é sobre a lista inteira; à direita, em que página estou dela.
   Separadas pelas pontas, nenhuma das duas é lida como continuação da
   outra. */
.res-paginador{justify-content:space-between;gap:6px;padding-top:2px;}
.res-paginador .por-pagina,
.res-paginador .pag-passos{display:flex;align-items:center;gap:6px;}
.res-paginador .por-pagina{cursor:pointer;}
.res-paginador select{
  font-family:inherit;font-size:11px;color:var(--text);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:6px;padding:2px 18px 2px 7px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
                   linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.res-paginador select:hover{border-color:var(--gold);color:var(--gold-light);}
.res-paginador select option{background:var(--surface-2);color:var(--text);}

/* ---------------- nível de poder (brackets) ---------------- */
.escala{display:flex;gap:5px;margin:4px 0 12px;}
.degrau{
  flex:1;text-align:center;border:1px solid var(--border);border-radius:8px;
  padding:7px 2px 6px;background:var(--surface-2);cursor:help;
}
.degrau .n{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:16px;
  font-weight:600;color:var(--text-muted);line-height:1.1;
}
.degrau .rot{display:block;font-size:9px;color:#6F6490;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.degrau.aqui{border-color:var(--gold);background:rgba(233,199,101,.14);}
.degrau.aqui .n{color:var(--gold-light);font-size:19px;}
.degrau.aqui .rot{color:var(--gold-light);}
/* O 5 nasce tracejado e apagado: cEDH é definido pelo metagame, não pela
   lista de cartas, então nenhuma conta sobre o papel chega nele. Mostrar o
   degrau e explicar por que ele é inalcançável é mais honesto do que
   esconder e deixar a escala parecendo ir só até 4. */
.degrau.fora{border-style:dashed;opacity:.5;}

.refazer{
  border:1px solid var(--gold);border-radius:6px;background:transparent;
  color:var(--gold-light);font:inherit;font-size:10.5px;padding:1px 8px;
  margin-left:6px;cursor:pointer;
}
.refazer:hover{background:rgba(233,199,101,.14);}

.poder-nome{font-family:'Cinzel',serif;font-size:15px;color:var(--gold-light);
  margin-bottom:3px;}
.poder-explica{font-size:12px;color:var(--text-muted);line-height:1.55;
  margin-bottom:12px;}
.motivo{
  border:1px solid var(--border);border-radius:9px;padding:9px 11px;
  margin-bottom:6px;background:var(--surface-2);
}
.motivo.erro{border-color:rgba(217,99,74,.55);background:rgba(217,99,74,.09);}
.motivo b{font-size:12.5px;display:block;margin-bottom:3px;}
.motivo.erro b{color:#F2AFA1;}
.motivo .porque{font-size:11.5px;color:var(--text-muted);line-height:1.5;}
.motivo .quais{font-size:11.5px;color:var(--text);line-height:1.6;margin-top:5px;}
.motivo .quais span{
  display:inline-block;background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:1px 7px;margin:2px 3px 0 0;
}

/* ---------------- combos (Commander Spellbook) ---------------- */
.combo{
  border:1px solid var(--border);border-radius:10px;padding:10px 11px;
  margin-bottom:7px;background:var(--surface-2);
}
.combo.falta{border-style:dashed;border-color:rgba(139,107,255,.55);}
.combo .topo-combo{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;}
.combo .pecas{flex:1;min-width:0;font-size:12.5px;line-height:1.5;}
.peca{display:inline;}
.peca.tem::before{
  content:"";display:inline-block;width:11px;height:11px;
  margin-right:4px;vertical-align:-1px;background:var(--green);
  -webkit-mask:var(--ico-check) center/contain no-repeat;
          mask:var(--ico-check) center/contain no-repeat;
}
/* A peça que falta se distingue por cor e peso, sem marcador próprio: o
   separador entre as peças já é um "+", e um segundo "+" colado nele lia
   como erro de digitação ("... + + Sylvan Library"). */
.peca.falta{color:var(--gold-light);font-weight:600;}
/* Peça GENÉRICA ("um terreno-criatura que entra desvirado") descreve um
   critério, não uma carta que falta. Pintá-la de dourado como as que
   faltam fazia um combo já fechado parecer incompleto — coisa que só
   aparecia quando o combo passava pra "no deck" na frente da pessoa. */
.peca.generica{color:var(--text-muted);font-style:italic;font-weight:400;}
.peca.comandante::after{content:" (no comando)";color:var(--text-muted);
  font-size:11px;font-weight:400;}
.combo .mais{color:var(--text-muted);}
.combo .produz{
  font-size:11.5px;color:#A8D8BC;margin-top:5px;line-height:1.5;
}
.combo .produz b{color:#C6EBD5;font-weight:600;}
.combo .rodape{
  display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;
}
.bracket{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;border:1px solid var(--border);border-radius:999px;
  padding:2px 8px;color:var(--text-muted);cursor:help;flex:none;
}
/* Só os dois extremos ganham cor: um combo que ganha o jogo e um que é
   piada de mesa precisam se distinguir de relance; o meio da escala não. */
.bracket.R,.bracket.B{border-color:var(--red);color:#F2AFA1;}
.bracket.E{border-color:var(--border);color:#6F6490;}
.combo .rodape a{color:var(--text-muted);font-size:11px;text-decoration:none;}
.combo .rodape a:hover{color:var(--gold-light);text-decoration:underline;}
/* A peça é `<span>` com prévia de arte no hover. Sublinhado pontilhado é a
   convenção de "passe o mouse aqui" sem parecer link — link prometeria
   levar pra fora da página. */
.peca[data-arte]{cursor:help;text-decoration:underline dotted rgba(167,155,199,.5);
  text-underline-offset:2px;}
.peca[data-arte]:hover{text-decoration-color:var(--gold-light);}
/* O que o combo pede ANTES de funcionar (`notablePrerequisites`): estado de
   jogo, não carta. Fica visualmente separado do "resulta em" porque um é
   condição e o outro é consequência, e trocar os dois é ler o combo ao
   contrário. */
.combo .precisa{
  font-size:11.5px;color:var(--text-muted);margin-top:5px;line-height:1.5;
  padding-left:9px;border-left:2px solid var(--border);
}
.combo .precisa b{color:var(--text);font-weight:600;}
.combo .custo{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;
  border:1px solid var(--border);border-radius:999px;padding:2px 8px;
  color:var(--text-muted);flex:none;cursor:help;
}
.combo .custo.fechar{border-color:var(--gold);color:var(--gold-light);}
.combo-mexido{
  font-size:11.5px;color:#A8D8BC;background:rgba(76,154,107,.10);
  border:1px solid rgba(76,154,107,.45);border-radius:8px;
  padding:7px 10px;margin-bottom:8px;line-height:1.5;
}
.add-peca{
  margin-left:auto;border:1px solid var(--gold);background:rgba(233,199,101,.10);
  color:var(--gold-light);border-radius:999px;padding:4px 11px;font-size:11px;
  cursor:pointer;flex:none;
}
.add-peca:hover{background:rgba(233,199,101,.2);}
.add-peca:disabled{opacity:.45;cursor:not-allowed;}
.combo-desatualizado{
  font-size:11.5px;color:var(--gold-light);background:rgba(233,199,101,.10);
  border:1px dashed var(--gold);border-radius:8px;padding:7px 10px;margin-bottom:8px;
}

/* ---------------- tokens ----------------
   Grade de artes, não lista de nomes: ficha se reconhece pela imagem, e
   quem chega nesta aba já sabe o nome — o que ele quer é ver o que precisa
   levar pra mesa. O título de cada bloco é a CARTA QUE CRIA, e não a ficha:
   sem ele, uma tela com seis "Token Creature — Soldier" de artes parecidas
   não diz de onde saiu nenhuma, nem o que acontece se a carta sair do deck. */
#tokens-resultado{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
.token-grupo{border:1px var(--border) dashed;border-radius:8px;padding:8px;}
.token-grupo:last-child{margin-bottom:0;}
.token-grupo h3{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-size:12.5px;font-weight:600;color:var(--text);
}
.token-grupo h3 .quantas{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:400;
  color:var(--text-muted);border:1px solid var(--border);
  border-radius:999px;padding:1px 7px;flex:none;
}
/* Coluna de largura FIXA, e não `1fr`: o zoom do hover é um `scale` de
   número fechado (160px -> os 250px que a prévia de arte usa no resto da
   tela), e ele só cai no tamanho certo se a miniatura sempre partir dos
   mesmos 160px. Com `1fr` a mesma ficha ficaria maior ou menor conforme a
   largura da janela. */
.token-grade{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.token{
  display:block;width:160px;aspect-ratio:488/680;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);position:relative;
  transition:transform .13s ease-out,box-shadow .13s ease-out;
}
/* `scale`, e não largura de verdade: crescer a caixa re-fluiria a grade e
   as fichas vizinhas dançariam a cada passada de mouse. A ficha da borda
   cresce por cima do painel, e é assim mesmo — é o gesto da prévia de arte,
   que também flutua sobre a tela. Recuar a grade pra caber o zoom deixaria
   uma faixa vazia dos dois lados o tempo todo, por uma carta de cada vez. */
.token:hover{
  transform:scale(1.5625);z-index:20;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85);
}
/* Em tela de toque não existe hover: o `:hover` que o toque acende ficaria
   preso na última ficha tocada, grande, até tocar outra coisa. E sem zoom
   some a razão de a coluna ser fixa em 160px — no telefone ela passa a
   esticar, senão cabe UMA ficha por linha com meia tela sobrando ao lado. */
@media (hover:none){
  .token:hover{transform:none;box-shadow:none;}
  .token-grade{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  .token{width:100%;}
}

/* ---------------- prévia da arte (só no mouse) ---------------- */
/* Contêiner e não <img> porque carta de duas faces mostra as duas lado a
   lado: ver só a frente de um transform é ver metade da carta. */
.previa{
  position:fixed;z-index:60;pointer-events:none;display:flex;gap:8px;
  opacity:0;transition:opacity .12s;
}
.previa.mostra{opacity:1;}
.previa img{
  display:block;width:250px;border-radius:11px;border:1px solid var(--border);
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85);background:var(--surface);
}
.previa img.vazia{display:none;}
/* Carta partida é impressa deitada: a Scryfall entrega a arte em pé, com o
   texto de lado. Girar aqui é o que faz a carta ser lida sem torcer o
   pescoço — e deitada ela cabe mais larga, que é o que deixa o texto das
   duas metades legível. A largura da caixa é a ALTURA da imagem girada, e
   vice-versa; os números saem de PREVIA_LARGA/PREVIA_ALTA no script. */
.previa.deitada{width:487px;height:349px;}
.previa.deitada img{
  position:absolute;top:0;left:0;width:349px;
  transform-origin:top left;transform:rotate(90deg) translateY(-100%);
}

/* ---------------- orçamento ---------------- */
.fonte{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:8px 0;border-bottom:1px dashed var(--border);
}
.fonte:last-child{border-bottom:none;}
.fonte .rot{font-size:12px;color:var(--text-muted);}
.fonte .tot{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--gold-light);}
.caras{margin-top:10px;display:flex;flex-direction:column;gap:2px;}
.caras .cara{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;
  color:var(--text-muted);padding:2px 0;}
.caras .cara b{color:var(--text);font-weight:500;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.caras .cara span{font-family:'IBM Plex Mono',monospace;flex:none;}

.nota{font-size:11px;color:var(--text-muted);line-height:1.55;}
.nota a{color:var(--gold-light);}
/* A conta é heurística nossa, e quem lê um número tem direito de saber de
   onde ele veio. Fica no fim do painel, fora do caminho de quem só queria o
   número. */
.rodape-conta{
  margin-top:14px;padding-top:10px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-muted);line-height:1.55;
}
.rodape-conta b{color:var(--text);font-weight:600;}
.vazio{color:var(--text-muted);font-size:12.5px;line-height:1.6;text-align:center;padding:22px 8px;}

.aviso-base{
  background:rgba(233,199,101,.10);border:1px dashed var(--gold);border-radius:10px;
  padding:11px 13px;margin-bottom:14px;font-size:12.5px;line-height:1.55;color:var(--gold-light);
}

.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(14px);
  bottom:24px;z-index:70;background:var(--surface-2);border:1px solid var(--gold);
  color:var(--text);border-radius:10px;padding:11px 16px;font-size:13px;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.8);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;max-width:90vw;text-align:center;
}
.toast.mostra{opacity:1;transform:translateX(-50%) translateY(0);}

/* No celular o cabeçalho é grudado no topo, então cada linha dele é espaço
   que some do deck pro resto da sessão. Os medidores viram uma fita que
   rola de lado em vez de quebrarem em três linhas. */
@media (max-width:600px){
  .topo-in{padding:8px 12px;gap:9px;}
  .btn{padding:7px 10px;}
  .titulo-deck input{font-size:15px;}
}

/* Em tela estreita a linha do deck não cabe inteira, e aí é preciso
   escolher o que sai. Sai o preço: em toque o ✕ e os controles ficam
   sempre visíveis (não há hover pra escondê-los), e sem esta regra
   um "Badgermole Cub" vira "Badgermol…" pra caber num número que o
   subtotal do grupo e o total do cabeçalho já dizem — os dois continuam na
   tela. Nome truncado, não. */
@media (max-width:480px){
  .linha .valor{display:none;}
}

/* Lado a lado num telefone, o seletor de ordem só cabe truncado — e
   "Custo — menor pri…" não diz qual das duas ordens de custo está valendo,
   que é a única coisa que ele existe pra dizer. Uma linha pra cada. */
@media (max-width:560px){
  .ferramentas-lista{flex-wrap:wrap;}
  .campo-ordem{max-width:100%;width:100%;}
}

/* Entre 900 e 1200 não cabem três colunas com o deck em duas: o trilho da
   direita recolhe o maybeboard sozinho e fica só a curva. Encolher uma
   coluna é melhor do que espremer as três até nenhuma servir. */
@media (max-width:1200px){
  .corpo{grid-template-columns:330px minmax(0,1fr) 250px;gap:14px;}
  .corpo.talvez-fechado{grid-template-columns:330px minmax(0,1fr) 44px;}
}

/* ---------------- o celular ----------------
   Aqui não existem colunas nem barra de abas de região: existe o DECK, e
   tudo o mais é uma tarefa que se abre por cima dele. A busca é uma folha
   que sobe do botão fixo; a análise, a mana base e os combos são as
   mesmas abas do computador, na mesma fita que rola de lado; o trilho
   (curva e maybeboard) desce pro fim da página, que é onde se confere
   depois de montar.

   Não há barra de abas de região: dividir o telefone em quatro telas de
   uma coisa só, três delas de apoio, faria a sessão inteira ser trocar de
   aba pra pôr uma carta e voltar. */
@media (max-width:900px){
  .corpo{
    grid-template-columns:minmax(0,1fr);gap:14px;
    padding:14px 14px 96px;
  }
  .corpo > .principal{order:1;}
  .corpo > .trilho{order:2;}
  .corpo > .lateral{order:3;}

  .corpo > .trilho{position:static;max-height:none;}
  .painel-talvez{flex:none;}
  .talvez-lista{max-height:none;}
  /* No telefone a coluna nunca nasce recolhida: aqui ela é uma seção no fim
     da página, e não uma coluna que rouba largura de ninguém. */
  .corpo.talvez-fechado{grid-template-columns:minmax(0,1fr);}
  .corpo.talvez-fechado .trilho-conteudo{display:flex;}
  .corpo.talvez-fechado .trilho-vertical{display:none;}
  .trilho-conteudo{overflow-y:visible;}
  #btn-recolher-talvez{display:none;}

  /* A coluna da busca vira folha de baixo. */
  .lateral{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:61;
    max-height:86dvh;gap:0;
    background:var(--surface);border-top:1px solid var(--border);
    border-radius:18px 18px 0 0;
    box-shadow:0 -24px 48px -24px rgba(0,0,0,.9);
    padding:8px 12px calc(12px + env(safe-area-inset-bottom));
    transform:translateY(101%);transition:transform .22s ease-out;
    overflow-y:auto;
  }
  .lateral.aberta{transform:translateY(0);}
  .lateral > .painel{
    background:transparent;border:none;box-shadow:none;padding:0;
  }
  .lateral .resultados{max-height:none;}
  /* A alça de arrastar: diz "isto sobe e desce" antes de qualquer texto. */
  .puxador{
    display:block;width:38px;height:4px;border-radius:999px;
    background:var(--border);margin:2px auto 10px;flex:none;
  }
  .barra-mobile{display:flex;}
  .previa{display:none;}
  /* Sem hover em toque: o ✕ e os controles da linha ficam sempre à vista,
     senão não haveria como tirar a carta. */
  .linha .ctrl{
    position:static;opacity:1;
    flex:none;padding-left:0;background:none;
  }
  .linha .so-celular{display:flex;}
  .linha{padding:7px 6px;}
  .mini{width:28px;height:28px;font-size:15px;}
  .gf-lista-linha .mini{min-height:30px;font-size:12.5px;}
}