` entre
eles, com o mesmo corpo e a mesma medida — lida como terceira linha do argumento em vez da
conclusão dele.
Centrada, em serifa e maior, com filete em cima e embaixo para separá-la do texto corrido
sem virar card. SEM negrito: o peso vem do tamanho e do espaço em volta, e `` num
parágrafo inteiro é ênfase que não distingue nada. `text-wrap: balance` porque frase curta
e centrada com uma palavra órfã na segunda linha perde exatamente o efeito que se quer. */
/* As margens de 2rem aqui, 2rem/1rem nos `.blocos` e 2rem nas `.acoes` são A RÉGUA DA HOME, e
ela foi MEDIDA em 2026-08-10 pelo mesmo método do /status. ` ` dentro de `.blocos`, e `.blocos p { margin: 0 }` tem especificidade
(0,1,1) contra (0,1,0) da classe sozinha. A margem de 0,75rem computava ZERO e o selo
encostava no título — a regra estava escrita, e escrita não é aplicada. Qualificar pela
tag empata a especificidade, e vindo depois no arquivo, ganha.
A folga é 0,85rem e não 0,75 por ser ÓPTICA e não geométrica: o selo é uma caixa com borda,
e caixa com borda fecha o próprio espaço — o vão até a serifa do título parece menor que o
mesmo número entre duas linhas de texto. */
/* A APARÊNCIA vale para qualquer tag, e a MARGEM só para o ` `. A versão anterior qualificava
a regra inteira por tag para vencer o `.blocos p`, e no dia em que a etiqueta virou ``
na lista de artigos ela apareceu como texto solto, sem moldura — a especificidade que
consertava a margem levou junto a borda, que não precisava dela. */
.selo-estado {
display: inline-block;
font-family: var(--mono); font-size: var(--t--2);
letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.15rem 0.5rem; border: 1px solid var(--filete); border-radius: 2px;
color: var(--texto-2);
}
p.selo-estado { margin: 0 0 0.85rem; } /* (0,1,1) para vencer `.blocos p { margin: 0 }` */
.selo-estado.vivo { color: var(--acento); border-color: var(--acento); }
/* ── placas do acervo (status) ───────────────────────────── */
/* 2×2 dentro da coluna de texto: alinha com título e prosa em vez de virar
uma faixa larga de dashboard atravessando a página. */
/* O GAP E O PADDING SÃO OS DOS `.blocos`, DE PROPÓSITO — e eram diferentes por acidente, não
por escolha: 1rem/1,35rem aqui contra 1,5rem/1,5rem lá. As duas grades têm a MESMA largura
(832px medidos) e ficam a 200px uma da outra na mesma página; duas réguas de vão nessa
distância não leem como duas famílias de componente, leem como desalinho. Medido em
2026-08-10. Se um dia divergirem de novo, que seja com uma razão escrita aqui. */
.painel {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1.5rem; margin: 2rem 0 1rem;
}
@media (max-width: 62rem) { .painel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .painel { grid-template-columns: 1fr; } }
/* O padding VERTICAL é o dos blocos; o HORIZONTAL é menor, e isso é conta e não gosto: com o
gap em 1,5rem cada célula fica com (832−72)/4 = 190px, e 1,6rem dos dois lados deixariam
138px de conteúdo para uma data que mede ~145px em mono de 22px — "Oct 2, 2026" quebrava em
duas linhas. Em 1,25rem sobram 150px e ela cabe. O painel é dado denso em quatro colunas, os
blocos são prosa em três: o vão entre eles é que precisa ser o mesmo, não a folga interna. */
.painel div { padding: 1.5rem 1.25rem; }
.painel strong {
display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 1.375rem; font-weight: 500; color: var(--acento); line-height: 1.2;
}
/* A quarta placa não é do mesmo tipo das outras três: as três dizem o que o pool É, ela diz o
que vem. Filete âmbar por DENTRO (`inset`, o mesmo gesto de `.posto.aberto`) e não borda —
borda mudaria a largura da célula e desalinharia a fileira em 3px. */
.painel .destaque { box-shadow: var(--sombra), inset 3px 0 0 var(--acento); }
.painel span {
display: block; margin-top: 0.4rem;
font-size: var(--t--2); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--texto-2);
}
/* Corpo do artigo: a data e a etiqueta ficam ACIMA do `h1`, e por isso o `h1` perde a margem
de topo — senão sobra um vão de título entre duas coisas que são o mesmo cabeçalho. */
.artigo-corpo > .artigo-topo { margin: 0 0 0.6rem; }
.artigo-corpo > h1 { margin-top: 0; }
.artigo-corpo h2 { margin-top: 2.5rem; }
/* ── a lista de artigos (/news) ───────────────────────────────
Linha inteira clicável, filete só ENTRE as linhas (não em cima da primeira nem embaixo da
última, senão a lista vira uma tabela fechada no meio de uma página que não tem tabelas).
Data e etiqueta na mesma fileira, título embaixo: é a ordem em que se decide se vale abrir —
quando foi, do que é, e só então o quê. */
.artigos { list-style: none; padding: 0; margin: 1rem 0 0; }
.artigos li + li { border-top: 1px solid var(--filete); }
.artigo {
display: block; padding: 1.1rem 0; text-decoration: none; color: inherit;
border-radius: 2px;
}
/* O hover mexe no TÍTULO e não no fundo da linha: fundo inteiro acendendo numa página sem
nenhuma outra superfície interativa lê como seleção, não como link. */
.artigo:hover .artigo-titulo { color: var(--acento); }
.artigo-topo { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.artigo-data {
font-family: var(--mono); font-size: var(--t--2); font-variant-numeric: tabular-nums;
color: var(--texto-2);
}
/* A etiqueta aqui é a MESMA peça dos cards abaixo, e por isso ela perde a margem de baixo:
lá ela fica sobre o título, aqui ao lado da data. */
.artigo .selo-estado { margin: 0; }
.artigo-titulo {
display: block; margin-top: 0.45rem;
font-family: var(--serif); font-size: var(--t-1); line-height: 1.3;
color: var(--titulo-pagina); transition: color 0.15s;
}
.artigo-resumo {
display: block; margin-top: 0.3rem;
font-size: var(--t--1); line-height: 1.6; color: var(--texto-2);
}
/* ── a régua vertical do /status ──────────────────────────────
MEDIDA em 2026-08-10, e o que ela mostrou é que ninguém tinha decidido nada: os vãos entre
os blocos da página eram 56 · 16 · 64 · 12 · 16 · 72 · 104 · 68 · 80 · 24. Não é ritmo, é
soma — `` mora DENTRO do `
`. É permitido (o modelo de conteúdo do summary aceita um
elemento de cabeçalho) e é o que mantém o esqueleto do documento: quem navega por cabeçalho
continua achando as seções, mesmo fechadas. */
.secao {
background: var(--painel);
border: 1px solid var(--borda);
border-radius: 3px;
margin: 0.75rem 0;
}
.secao > summary {
padding: 0.9rem 1.25rem;
color: inherit; /* o `summary` genérico é âmbar; aqui quem manda é o h2 */
list-style: none; /* o triângulo padrão vira o nosso, abaixo */
display: flex; align-items: center; gap: 0.75rem;
}
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary h2 { margin: 0; font-size: var(--t-1); }
.secao > summary:hover h2 { color: var(--acento); }
/* O sinal de aberto/fechado. `::after` e não `::marker` porque marker não aceita transform em
todos os navegadores, e um triângulo que não gira não diz nada. */
.secao > summary::after {
content: ''; margin-left: auto; flex: none;
width: 0.55rem; height: 0.55rem;
border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2);
transform: rotate(45deg) translate(-2px, -2px);
/* a duração mora no bloco de MOVIMENTO, junto das outras, para o site ter um sotaque só */
}
.secao[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* O filete só existe quando a seção está aberta: fechado, ele desenharia uma linha solta
embaixo do título. */
.secao[open] > summary { border-bottom: 1px solid var(--filete); }
.secao-corpo { padding: 0.25rem 1.25rem 1.25rem; }
.secao-corpo > :first-child { margin-top: 1rem; }
.secao-corpo h3 { font-size: var(--t-0); margin-top: 1.75rem; }
/* log de revisões */
.historico { margin-top: 2rem; max-width: var(--medida); }
.historico summary {
cursor: pointer; font-size: var(--t--2);
text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-2);
}
.historico summary:hover { color: var(--texto); }
.historico ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.historico li { margin-bottom: 1.75rem; }
.rev-titulo { margin: 0 0 0.4rem; font-weight: 600; }
.rev-data { font-size: var(--t--1); color: var(--texto-2); margin-right: 0.6rem; }
.rev-saiu, .rev-entrou { font-family: var(--mono); font-size: var(--t--1); margin: 0.15rem 0; }
.rev-saiu { color: var(--erro); }
.rev-entrou { color: var(--ok); }
.rev-nota { color: var(--texto-2); font-size: var(--t--1); line-height: 1.7; margin: 0.6rem 0 0; }
/* ── nome de carta + popup ──────────────────────────────── */
.carta {
cursor: pointer;
text-decoration: underline; text-decoration-style: dotted;
text-decoration-color: var(--borda); text-underline-offset: 0.2em;
}
.carta:hover { text-decoration-color: var(--acento); }
#carta-popup { position: fixed; z-index: 30; display: flex; gap: 6px; pointer-events: none; }
/* obrigatório: o `display: flex` acima é regra de autor e venceria o `[hidden]` do
navegador, deixando o popup na tela para sempre. Sem esta linha, esconder não esconde. */
#carta-popup[hidden] { display: none; }
#carta-popup img, #carta-popup .esqueleto {
width: min(19rem, 44vw); /* dupla face: duas imagens dividem a tela */
aspect-ratio: 488 / 680;
border-radius: 4.75% / 3.5%;
box-shadow: 0 8px 28px rgb(0 0 0 / 0.45);
}
#carta-popup img:only-child, #carta-popup .esqueleto:only-child { width: min(19rem, 85vw); }
#carta-popup .esqueleto { background: var(--painel); border: 1px solid var(--borda); }
/* ── validador ──────────────────────────────────────────── */
/* resultado à esquerda, sob a caixa; botão à direita da mesma linha */
/* `flex-wrap: wrap` DESDE 2026-08-11, e ele conserta rolagem lateral a 375px — medida, não
suposta: a fileira media 366px numa viewport de 356. A causa eram duas ausências que só
juntas estouram: `.validador-botoes` tem `flex: none` (não encolhe) e esta caixa era
`nowrap` (não quebra), então a linha não tinha para onde ceder e vazou pela direita.
Os dois botões JÁ tinham `flex-wrap: wrap` entre si, e ele nunca disparava — com o pai
sizing por max-content, os filhos nunca precisavam quebrar.
Medido nas quatro larguras: a 375 o vão sai de 10px para ZERO e os botões passam a duas
linhas; a 414, 768 e 1280 o resultado é IDÊNTICO ao de antes, byte por byte de geometria. */
.validador-acao {
display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start;
margin-top: 1rem;
}
.validador-acao #resultado { flex: 1; }
.validador-acao button { flex: none; margin-top: 0; }
/* Os dois botões andam juntos, com vão PRÓPRIO: soltos dentro do `.validador-acao` eles
herdariam o gap de 2rem, que existe para separar o resultado da ação — e 32px entre duas
ações da mesma caixa as faz parecer de blocos diferentes. */
/* `flex: 0 1 auto` e não `none`: precisa PODER encolher para que o `flex-wrap` de dentro
sirva para alguma coisa. Com `none` ele media sempre max-content, e os dois botões nunca
quebravam — a caixa só ficava maior que a tela. */
.validador-botoes { display: flex; gap: 0.75rem; flex: 0 1 auto; flex-wrap: wrap; }
/* altura fixa e sem alça de redimensionar: uma lista de 75 cartas não caberia em caixa
nenhuma, então o rolamento interno é inevitável — melhor uma caixa de tamanho estável
do que uma que o usuário arrasta e desalinha o layout. */
#lista {
width: 100%; height: 24rem; resize: none;
font-family: var(--mono); font-size: var(--t--1); line-height: 1.7;
background: var(--painel); color: var(--texto);
border: 1px solid var(--borda); border-radius: 3px;
padding: 1rem 1.25rem;
}
/* o exemplo dentro da caixa tem que ler como exemplo, não como conteúdo já digitado */
/* 0.8 e não 0.55: a 55% o exemplo caía para 2,26:1 no tema claro — e este placeholder não
é enfeite, é a explicação do formato que a caixa espera. Ainda fica abaixo do texto real,
que é o que faz ler como exemplo. */
#lista::placeholder { color: var(--texto-2); opacity: 0.8; }
/* Mesmo tratamento do `.botao` — e esta linha de comentário já estava aqui antes de ser
verdade. Em 2026-08-10 o `.botao` da home deixou de ser bloco chapado e virou moldura, e a
promessa "o validador não tem um botão de outra família" passou a ser falsa: o botão do
validador continuou sendo o único retângulo de âmbar sólido do site. Trocado aqui, na regra
COMPARTILHADA, e não no validador — corrigir só a página que se estava olhando criaria um
terceiro estilo de botão em vez de acabar com o segundo.
SEM o filete interno a −5px que o `.botao` tem: naquele ele cabe porque é um botão de herói
com 58px de altura; num controle de 30px o `outline-offset` negativo se cruza e desenha
sujeira. O que unifica é a MOLDURA — superfície de painel, borda âmbar, rótulo âmbar —, e
ela funciona em qualquer tamanho.
A fonte fica `inherit` (sem serifa) e a serifa fica só no `.botao`: aquele é uma chamada
dentro de uma página de títulos serifados, este é controle dentro de formulário. Os botões
densos da mesa e do /admin já pedem `--mono` por cima desta regra, e continuam pedindo. */
button {
background: var(--painel); color: var(--acento);
border: 1px solid var(--acento); border-radius: 2px;
padding: 0.7rem 1.75rem;
font-size: var(--t-0); font-family: inherit; font-weight: 600; letter-spacing: 0.01em;
cursor: pointer; margin-top: 1rem;
transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
button:hover { color: var(--titulo); border-color: var(--titulo); }
.ok { color: var(--ok); font-weight: 600; }
.erro { color: var(--erro); font-weight: 600; }
.problemas { color: var(--erro); list-style: none; padding: 0; }
.problemas li { margin-bottom: 0.3rem; }
li.banida::after, li.desconhecida::after {
font-family: var(--mono); font-size: 0.85em; color: var(--erro);
}
li.banida::after { content: ' — banned'; }
li.desconhecida::after { content: ' — not legal or misspelled'; }
/* ── telas estreitas ────────────────────────────────────────
A escala acima é calibrada para desktop. No celular o corpo cai para 17px, os títulos
encolhem mais que o corpo (num espaço curto, título grande come a tela), e os cards
perdem respiro lateral para o texto não virar uma coluna de duas palavras. */
@media (max-width: 46rem) {
:root {
--t--2: 0.75rem;
--t--1: 0.875rem;
--t-0: 1.0625rem;
--t-1: 1.1875rem;
--t-2: 1.5rem;
--t-3: 2rem;
}
/* O cabeçalho comia 172px de uma tela de 800 — 21% do primeiro rolo era navegação, em
TODAS as páginas, e o
só começava em 204px. Medido: 460px de itens contra 224px
só de vãos (28px × 8). O vão custava metade do que o conteúdo custa, e era ele que
jogava os links para uma terceira fileira. */
/* PISO DE 16px EM CAMPO DE FORMULÁRIO — a correção de celular que não se vê no desktop.
O Safari do iOS dá ZOOM no viewport ao focar qualquer input, select ou textarea com fonte
MENOR que 16px, e não desfaz o zoom ao sair do campo: a pessoa fica com a página torta e
rolando de lado até recarregar. Medido aqui: o textarea do validador estava em 14px, os
dois selects do metagame em 14, os campos de `/admin` em 12. Só `.form-conta input` já
estava certo, em 17.
A regra é UMA e larga de propósito, em vez de uma lista de seletores: lista envelhece no
primeiro campo novo, e o defeito volta calado. `--t-0` (17px aqui) e não 16px cravado
porque é o tamanho que o campo do `/account` já usava — o piso passa a ser o mesmo número
que a página que estava correta.
E o `!important` é o ponto, não preguiça: sem ele a regra PERDE para `#lista` e `#nomes`
(seletores de id) e para `.campo-periodo select` e `.admin-linha input` (classe + tipo).
Escrevi a versão sem ele primeiro e MEDI: os dois textareas continuaram em 14px. Media
query não muda especificidade. É o mesmo uso que `prefers-reduced-motion` já faz aqui —
piso de plataforma que tem de vencer qualquer ajuste local. */
input, select, textarea { font-size: var(--t-0) !important; }
/* 0,5rem e não 0,85: com o link levando 0,7rem de padding próprio (ver abaixo), a folga da
barra passou a ser paga DUAS vezes — a do link, que é área tocável, e a do `nav`, que não
é. Medido: sem este corte o cabeçalho ia a 123px; com ele, 112. */
header nav { gap: 0.15rem 1rem; padding: 0.5rem 1.25rem; }
/* O selo é decoração e sai antes do que é dado — mesma regra da faixa de arte do deck. */
.nav-selo { display: none; }
/* O alvo de toque do link tinha 22px de altura. O padding cresce o alvo e o vão entre
fileiras encolhe na mesma medida, então quem dá o respiro visual passa a ser o padding do
próprio link, que é área tocável.
0,7rem E NÃO 0,35rem desde 2026-08-10: a 0,35 o alvo media 33px, e a diretriz da Apple pede
44 para controle isolado — abaixo disso o erro de toque sobe, e a barra é o único caminho
entre páginas no celular. O custo foi MEDIDO e é 15px de cabeçalho (101 → 116 numa tela de
812, de 12,4% para 14,3% do primeiro rolo). Foi por causa desse custo que o item ficou em
aberto desde 01/08; com o número na mão, 15px é barato pelo alvo que a plataforma pede. */
/* `:not(.marca)` porque o wordmark já nasce com 42px de alvo (o emblema o infla), e levar o
mesmo padding o punha em 53 — 22px de cabeçalho pagos por um alvo que já estava bom. */
header nav a:not(.marca) { padding: 0.7rem 0; }
/* Numa página cujo conteúdo É o número, ele saía menor (22px) que o título da página
(32px). O bloco também era 65% ar: 97px de altura para 34px de conteúdo. */
.painel div { padding: 1.1rem 1.25rem; }
.painel strong { font-size: 1.75rem; }
/* `padding-block` e não só `padding-top`: a regra base promete "mesmo respiro acima e abaixo
do conteúdo", e no celular só o de cima encolhia — medi 32px em cima contra 48 embaixo. A
promessa estava escrita e quebrada. */
main { padding-block: 2rem; }
.hero { padding: 1rem 0 0.5rem; }
/* O carrossel é o ÚLTIMO elemento do hero, e o `0.5rem` acima foi dimensionado quando o
hero terminava numa linha de texto miúdo. Com uma fileira de cartas ali, medi 8px entre
a base das imagens e "Modern was born…" — contra 56, 96 e 104px nos outros vãos da mesma
página. 1.5rem + os 0.5rem do hero = 2rem, que é exatamente o respiro de topo do `main`
no celular: o número não é novo, é o que a página já usa para separar bloco de bloco. */
.carrossel { margin-bottom: 1.5rem; }
.brasao { width: 130px; } /* em tela curta o brasão não pode empurrar o resto para fora */
/* .deck NÃO leva padding: sobra do design antigo, quando o deck era um card sempre aberto.
Depois da compressão quem tem padding é o > summary, e o padding aqui empurrava a faixa
de arte para dentro da moldura (ela precisa encostar) e somava ao do summary. */
.destaque-deck { padding-left: 1rem; }
.carrossel img { width: 8rem; margin-right: 1rem; }
.acoes { gap: 1.25rem; margin: 2rem 0 3rem; }
}
/* ── cabeçalho em duas FILEIRAS, de propósito ────────────────
Os números, medidos a 375px com as fontes já reduzidas por `46rem`:
marca 93px + vão 16 + cinco links 292 + padding 40 = 441px para caber numa linha
só os cinco links + padding = 332px
Entre 332 e 441 a barra quebrava sozinha, e quebrava FEIO: a marca tem `margin-right:auto`,
então a fileira de cima empurrava Rules/Decks/Metagame para a direita e Validator/Status
caíam à esquerda embaixo — duas fileiras desalinhadas uma da outra, lidas como defeito. A
altura ia a 106px, o dobro do cabeçalho de uma linha.
Aqui a quebra deixa de ser acidente: a marca toma a primeira fileira inteira e os cinco
links ficam CENTRADOS na segunda, todos com o mesmo peso. Ninguém perde alvo de toque —
o `padding: 0.35rem 0` de cima continua valendo.
28rem = 448px, logo acima dos 441 medidos. Abaixo de 20rem (320px, o iPhone SE) nem os
links sozinhos cabem em 332, então ali o vão e o padding lateral encolhem o suficiente e
nada mais: 228 de texto + 4 vãos + padding tem de fechar abaixo de 320. */
@media (max-width: 28rem) {
/* O padding vertical cai de 0.85 para 0.6rem porque quem dá respiro entre as duas fileiras
agora é o `row-gap` mais o padding tocável do próprio link. Somados, os 0.85 devolviam um
cabeçalho de 109px numa tela de 812 — 13% do primeiro rolo só para navegar. */
header nav { justify-content: center; row-gap: 0.35rem; padding-block: 0.6rem; }
header nav a.marca { flex: 1 0 100%; margin-right: 0; }
}
@media (max-width: 20rem) {
header nav { padding-inline: 1rem; column-gap: 0.9rem; }
}
/* ── rodapé ─────────────────────────────────────────────── */
/* Mesmo grid do main: o rodapé ocupa exatamente a coluna da página, então acompanha
sozinho as páginas que usam coluna mais larga (home e decks, via classe no body). */
footer {
display: grid;
grid-template-columns: 1fr min(var(--coluna), calc(100% - 3rem)) 1fr;
max-width: var(--largura);
margin: 0 auto; padding: 1.5rem 0 3rem; /* o respiro vem do padding do main, não daqui */
border-top: 1px solid var(--borda);
color: var(--texto-2); font-size: var(--t--2); line-height: 1.7;
}
footer > * { grid-column: 2; }
/* ── mesa do organizador ─────────────────────────────────────
Ferramenta, não texto: campos grandes o bastante para dedo em balcão de loja, e nada
que exija precisão de mouse. A coluna é a de leitura mesmo assim — a tabela de
classificação tem sete colunas estreitas e cabe. */
.pagina-torneio .campo { display: block; margin: 2rem 0 0; }
.pagina-torneio .campo span {
display: block; margin-bottom: 0.4rem;
font-family: var(--mono); font-size: var(--t--2); color: var(--texto-2);
text-transform: uppercase; letter-spacing: 0.1em;
}
/* `.form-conta input` entra aqui em vez de ganhar regra própria: caixa de texto do site é
uma só, e duplicar as declarações é como as duas famílias de botão quase nasceram.
Os campos do `/admin` entraram na MESMA lista em 2026-08-06, e não por elegância: eles
tinham nascido sem regra nenhuma e o navegador os desenhava BRANCOS, no meio de um site
escuro. Não apareceu lendo o CSS — apareceu na captura de tela depois de a grade ficar
pronta. Escrever um segundo bloco para eles seria a duplicação que este comentário já
avisava, e a diferença de tamanho dentro da linha da tabela mora numa regra à parte,
sobrescrevendo só o que muda. */
/* A REGRA DEIXOU DE SER UMA LISTA DE IDs EM 2026-08-10, e a razão está no comentário logo
acima: ele descreve ESTE MESMO defeito acontecendo antes, e o defeito voltou. `#codigo-evento`,
o campo de código do /tournament, nasceu fora da lista e o navegador o desenhava BRANCO, com
texto preto e borda de 2px, no meio de um site escuro — e em 13,3px, abaixo do piso de 16 que
faz o Safari do iOS dar zoom. Apareceu na captura de tela, como da outra vez; ler o CSS não
mostra o campo que a lista não menciona.
Lista de seletores envelhece no primeiro campo novo, e o defeito volta calado. Esta é a mesma
escolha que a regra de piso de 16px já tinha feito, pela mesma razão, e agora as duas cobrem
o mesmo conjunto: TODO campo de texto, por tipo.
`:is()` com os tipos escritos, e não `input` puro: caixa de seleção não é campo de texto, e
pintá-la de painel com padding de 0,6rem a transformaria num retângulo cinza sem marca. */
input:is([type="text"], [type="email"], [type="date"], [type="number"],
[type="search"], [type="url"], [type="tel"], [type="password"]),
select, textarea {
font-family: inherit; font-size: var(--t-0);
background: var(--painel); color: var(--texto);
border: 1px solid var(--borda); border-radius: 3px; padding: 0.6rem 0.9rem;
}
/* A LARGURA continua sendo lista, e a divisão é proposital: o que falhava calado era a
APARÊNCIA (campo branco em site escuro, que só a captura de tela denuncia), e é ela que
precisa da regra larga. Largura é layout — quando está errada, aparece na hora e no lugar.
E larga aqui QUEBRARIA: os dois selects do /metagame vivem lado a lado numa fileira, e
`width: 100%` os empilharia. Campo que deve ocupar a linha inteira pede por isso. */
#nome-torneio, #nomes, #lista, #deck-escolhido,
.form-conta input, .admin-linha input, .admin-linha select, .linha-form input { width: 100%; }
#nomes { font-family: var(--mono); font-size: var(--t--1); line-height: 1.7; resize: vertical; }
#nome-torneio::placeholder, #nomes::placeholder, .form-conta input::placeholder {
color: var(--texto-2); opacity: 0.8;
}
/* aviso de revanche: o motor nunca trava, mas quando repete confronto tem de dizer */
.aviso-revanche {
border-left: 3px solid var(--erro); background: var(--painel);
padding: 0.75rem 1rem; margin: 1.5rem 0; font-size: var(--t--1);
}
/* uma coluna só: cada inscrito abre uma decklist inteira, e coluna estreita não comporta */
.inscritos { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.inscritos li {
display: flex; align-items: start; gap: 0.5rem;
padding: 0.15rem 0; border-bottom: 1px solid var(--filete); font-size: var(--t--1);
}
.inscritos .inscrito { flex: 1; min-width: 0; }
.inscritos summary {
display: flex; align-items: baseline; gap: 0.6rem;
padding: 0.35rem 0; color: var(--texto);
}
.inscritos summary:hover .quem-nome { color: var(--titulo); }
.quem-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* o estado da lista é a informação que o organizador varre a mesa procurando */
.inscritos summary em {
font-family: var(--mono); font-size: var(--t--2); font-style: normal; white-space: nowrap;
}
.sem-lista { color: var(--texto-2); }
.lista-ok { color: var(--ok); }
.lista-erro { color: var(--erro); }
.lista-deck {
width: 100%; margin: 0.3rem 0 0.6rem; resize: vertical;
font-family: var(--mono); font-size: var(--t--2); line-height: 1.7;
background: var(--fundo); color: var(--texto);
border: 1px solid var(--borda); border-radius: 3px; padding: 0.6rem 0.8rem;
}
.inscritos .problemas { margin: 0 0 0.7rem; font-size: var(--t--2); }
.tirar {
background: none; border: none; color: var(--texto-2); cursor: pointer;
font-size: var(--t-0); line-height: 1; padding: 0 0.2rem; margin: 0;
}
.tirar:hover { color: var(--erro); }
/* parágrafo de estado vazio não pode ocupar espaço: o resumo e o "faltando" só existem
depois que há jogador ou rodada */
#resumo:empty, #faltando:empty { display: none; }
.acoes-torneio { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* …MENOS quando a fileira tem um campo com rótulo: `.campo` é o `` do rótulo MAIS o
input, e mede ~70px contra os 50 do botão. Centrado, o botão ficava na altura do rótulo e
cruzando o topo do campo — 30px acima da base dele, medidos. Alinhado pela BASE, botão e
campo terminam na mesma linha, que é onde o olho espera.
O `center` continua valendo nas outras duas fileiras, que são botões mais um `