/* ============================================================ LARGURA.CSS — UMA COLUNA SÓ, PARA O SITE INTEIRO O PROBLEMA Cada tela tinha o seu número. No celular ninguém percebia, porque a tela é mais estreita que qualquer um deles e todos viram "100%". No computador a diferença aparecia toda de uma vez: header 620px lobby 620px sala 520px mesa 540px perfil / ranking 460px política, páginas 700px Trocar de aba mexia a coluna de lugar. O logotipo do header começava a 40px da borda enquanto o cartão do perfil começava a 120px — as duas coisas na mesma tela, desalinhadas uma da outra. Não era descuido de uma pessoa só: os números foram nascendo em momentos diferentes, cada um resolvendo a tela da vez, e nenhum deles sabia dos outros. A CORREÇÃO Um número, um lugar: --tm-largura. Toda coluna do site lê essa variável. Mudar a largura do site inteiro passa a ser mudar uma linha — e não há como uma tela ficar para trás, porque nenhuma tem número próprio. O valor é o do PERFIL, 460px, que era o mais estreito. Foi escolha do Paulo, e é a escolha certa: a coluna estreita é a que cabe no celular sem reflowar nada, e é a que dá linha de leitura curta na política de privacidade. Alargar teria sido pedir para o texto virar parede. POR QUE ESTA FOLHA MORA NO PLUGIN E CARREGA EM TODA PÁGINA O header aparece no login, no perfil, no ranking, na política — telas que não carregam o CSS do jogo. Se a variável morasse no tm-ui.css, metade do site ficaria sem ela e voltaria ao número antigo. Mesma lição das regras e do aviso de girar o celular: comportamento do produto não pode depender de qual folha aquela tela específica carrega. ============================================================ */ :root { --tm-largura: 460px; } /* ------------------------------------------------------------ AS COLUNAS !important aqui não é preguiça: é para vencer os números antigos espalhados em media queries de outros arquivos, que têm especificidade maior (`body.tm-jogo .tm-container`) e carregam depois. Eles ficaram no lugar, comentados, para não virarem um mistério na próxima leitura — mas quem manda é esta linha. ------------------------------------------------------------ */ .tm-header-inner, .tm-conteudo, .tm-container, .tm-lobby-container, .tm-sala-container, .tm-perfil-container, .tm-ranking-container, .tm-resultado-container, .tm-auth-container { max-width: var(--tm-largura) !important; margin-left: auto !important; margin-right: auto !important; /* `width: 100%` junto com o max-width, e não só o max-width. O do tema é uma coluna flex. Item de flex sem largura declarada encolhe até o tamanho do conteúdo — e aí `max-width` não faz nada, porque a caixa nunca chega perto do teto. Medindo, a página de resultado saía com 40px e a da política com 8px, cada uma do tamanho da palavra que tinha dentro. Quem tinha `width: 100%` por acaso, no tm-ui, dava 460 certinho; quem não tinha, murchava. */ width: 100%; box-sizing: border-box; } /* A faixa do header continua atravessando a tela toda — o que se alinha é o CONTEÚDO dela. Uma barra cortada no meio da tela pareceria erro; o que o olho compara é onde o logotipo começa e onde o cartão de baixo começa. */ .tm-header { width: 100%; } /* ------------------------------------------------------------ A MÃO E OS BOTÕES DA MESA Estes dois são `position: fixed`, então não herdam a largura do container: eles têm a própria conta, presa ao tamanho da mesa. Ficam de fora de propósito. Amarrá-los à coluna faria a fileira de cartas encolher junto e a mesa deixaria de caber na tela do jeito que foi medido. ------------------------------------------------------------ */ /* ============================================================ O TABLET "Faz um layout responsivo pra ipad, na resolução 768x1024." A coluna de 460px é a medida do celular, e no celular ela está certa: é a tela inteira. Num iPad ela vira uma tira de 460 no meio de um tampo de 768, com 154px de vazio de cada lado — e o vazio não é neutro, ele faz o jogo parecer um aplicativo de telefone esticado. Aqui a coluna vai a 640px. Não é a tela inteira de propósito: linha de leitura de 768px é parede na política de privacidade e no regulamento, e cartão de mesa da largura do tampo perde a forma de cartão. 640 é o que o conteúdo pede. POR QUE min-height JUNTO Sem ela, um celular DEITADO (844 de largura, 390 de altura) entraria aqui: ganharia coluna de 640 e mesa de tablet numa tela de 390 de altura. A condição é ser grande nos dois sentidos — que é o que "tablet" quer dizer. O TETO DE 1200px Acima disso é monitor, e no monitor esta conta atrapalha: numa tela de 1280x800 a mesa maior come a folga vertical, e o layout "mesa no topo" — que o administrador liga em Aparência — deixa de ficar acima do centralizado, porque não sobra topo para onde ir. O pedido era o iPad; o iPad cabe todo aqui (768, 810, 834 e 1024 de largura, nas duas orientações), e o monitor fica como estava. ============================================================ */ @media (min-width: 700px) and (max-width: 1200px) and (min-height: 600px) { :root { --tm-largura: 640px; } } /* ------------------------------------------------------------ A EXCEÇÃO DO LOBBY Partindo os 640px em duas colunas de mesa, cada cartão fica com 314 — mais APERTADO que no celular, onde ele tem 362. Medindo: o nome da mesa passa a ser cortado ("Sol e N...") e o botão de ficar na de fora espreme a etiqueta de pontuação. Duas colunas assim seriam pior do que uma. Então a lista de mesas usa a largura da tela (até 980px), e só ela. Não é capricho: 640 é medida de LEITURA, escolhida para a política e o regulamento não virarem parede. Cartão não se lê em linha, se varre com o olho — ali o que manda é caber o conteúdo. Mora AQUI, e não no tm-ui, porque é este arquivo que decide largura de coluna no site inteiro: uma exceção escrita em outro lugar seria a primeira peça do mesmo problema que este arquivo veio resolver — e, na prática, perderia, porque esta folha carrega depois. ------------------------------------------------------------ */ @media (min-width: 700px) and (max-width: 1200px) and (min-height: 600px) { /* O

do tema é quem segura a coluna: alargar só o container de dentro não faria nada, porque o pai continua em 640. Por isso os dois. O `:has` é o mesmo recurso que a mesa já usa para saber se a tela tem header. Em navegador que não o entenda, a lista inteira cai — e o lobby volta aos 640px de todo mundo, que é um recuo aceitável, não uma tela quebrada. */ .tm-conteudo:has(.tm-lobby-container), .tm-lobby-container { max-width: min(96vw, 980px) !important; } }