/*
	Ajustes de responsividade pra celular/tablet. O tema original
	(style.css + tibia.css, ~3900 linhas) é todo de largura fixa, sem
	nenhum @media query - esse arquivo é aditivo, carregado DEPOIS dos
	dois originais, e só atua abaixo de 900px de largura. Em telas
	maiores (desktop normal) nada aqui tem efeito - o visual continua
	exatamente igual ao de antes.

	2026-10-05: primeira versão - sem scroll horizontal forçado, texto
	legível, colunas empilhando.

	2026-10-09: revisão de verdade navegando o site no celular - três
	bugs visuais reais encontrados e corrigidos (fundo da página sem
	escala, mostrando um recorte gigante/cortado da arte; menus de
	navegação aparecendo inteiros ANTES do conteúdo da página, exigindo
	rolar bastante pra achar algo; texturas de fundo das caixas
	(widget_bg.png / mid_*.png) não cobrindo a largura cheia da caixa
	quando ela deixa de ter a largura fixa do desktop, mostrando a arte
	de fundo da página vazando por trás). Ver nota do vault "Versão
	Mobile Melhorada de Verdade".
*/

@media (max-width: 900px) {

	/* O fundo do site (bg.jpg) é uma arte única de 1920x1175 com o logo
	   desenhado dentro da própria imagem, sem background-size definido
	   no tema original - em telas estreitas isso mostra um recorte
	   minúsculo, ampliado, da imagem (ex.: só um pedaço do "B" gigante),
	   em vez da arte inteira. "cover" escala pra caber a largura da tela
	   mantendo a proporção. Achado navegando o site de verdade no
	   celular (ver nota do vault "Versão Mobile Melhorada de Verdade"). */
	body {
		background-size: cover !important;
		background-position: center top !important;
		/* "fixed" (ver polish.css) fica travado/com jank em vários
		   navegadores mobile mais antigos - no celular a rolagem já é
		   rápida e a imagem ocupa a tela toda mesmo, então o efeito de
		   "nunca acaba" não faz falta; volta pro comportamento normal
		   (rola junto com a página). */
		background-attachment: scroll !important;
	}

	/* Container principal (3 colunas lado a lado, 1170px fixos) vira
	   fluido e as colunas empilham em vez de ficar lado a lado. */
	.container_main {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		max-width: 100%;
		margin: 120px auto 0 auto !important;
		padding: 0 10px;
		box-sizing: border-box;
	}

	/* No desktop a ordem no HTML é esquerda/menu, meio/conteúdo,
	   direita/menu - empilhado sem reordenar isso faria o visitante
	   rolar a página inteira pelos menus (Notícias, Conta, Comunidade,
	   Biblioteca, Shop...) antes de ver o conteúdo de verdade da
	   página. Com flexbox dá pra manter a ordem do HTML (importante
	   pra leitores de tela/SEO) e só mudar a ordem VISUAL: conteúdo
	   principal primeiro, menus de navegação depois. */
	.container_mid {
		order: -1;
	}

	.container_left,
	.container_mid,
	.container_right {
		float: none !important;
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* .content dos widgets de menu (News, Account, Community...) usa
	   uma textura (widget_bg.png, 206px de largura, repete só na
	   vertical - pensada pra coluna fixa de 200px do desktop). Quando a
	   caixa vira full-width no celular, a parte além dos 206px fica sem
	   fundo nenhum e mostra a arte do body por trás, parecendo um
	   recorte de imagem quebrado dentro do menu. Uma cor sólida no
	   mesmo tom escuro, por trás da textura (que continua repetindo só
	   na vertical, sem distorcer o desenho original), cobre essa
	   sobra sem precisar de asset novo. */
	.left_box .content,
	.right_box .content {
		background-color: #323230;
		width: auto !important;
	}

	/* Mesmo problema, mesma causa: .center_box .content_bg (usada pelas
	   caixas de conteúdo principal, incluindo as que a própria
	   downloads.php usa) tem largura fixa de 608px no tema original via
	   3 imagens empilhadas (mid_top/mid_mid/mid_bot, todas 608px de
	   largura, repetem só na vertical ou nem repetem). Cor sólida no
	   mesmo tom pergaminho das imagens (amostrado de mid_mid.png,
	   #fdecd1) cobre a sobra lateral da mesma forma. */
	.center_box .content_bg {
		background-color: #fdecd1;
		width: auto !important;
	}

	/* .footer_cnt tem "width: 1170px" FIXO no style.css original (sem
	   nenhum responsivo) - sozinho já forçava a página inteira a ter
	   scroll horizontal de ~1170px em qualquer tela menor. Achado
	   navegando o site de verdade no celular (ver ANALISE_E_PLANO.md). */
	.footer_cnt {
		width: 100% !important;
		float: none !important;
	}

	/* .top-bar é position:fixed + width:100% - resolução de % pra
	   elemento fixed pode variar entre engines/ferramentas de emulação;
	   left/right:0 é a forma robusta de garantir 100% da tela de
	   verdade, independente disso. */
	.top-bar {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
	}

	/* Qualquer elemento com largura fixa em px vira no máximo 100% da
	   tela - cobre os diversos .content/.widget/etc espalhados pelo
	   tema que têm largura fixa em pixel. */
	img {
		max-width: 100%;
		height: auto;
	}

	/* Tabelas (usadas em quase toda página: loja, highscores, contas,
	   fórum etc.) - em vez de forçar a página inteira a ter scroll
	   horizontal, só a tabela em si rola de lado. */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	/* Fonte um pouco menor no corpo pra caber mais conteúdo sem
	   quebrar layout de forma feia. */
	body {
		font-size: 14px;
	}

	/* Botões/links de ação (comprar, enviar formulário etc.) com área
	   de toque mínima confortável pra dedo. Exceto .loginbtn/.createbtn
	   (botão de Log In/Register do Quick Login) - são sprites de imagem
	   com 23px de altura fixa (login_btn.png/register_btn.png, duas
	   posições empilhadas pro hover); esticar a altura pra 40px sem
	   background-size definido fazia o background-repeat (padrão do
	   navegador) preencher a sobra repetindo a sprite, dando a impressão
	   de dois botões "Log In" empilhados. Achado testando o visual no
	   celular depois do polish.css (ver nota do vault "Retoques Visuais
	   Gerais do Site"). */
	input[type="submit"]:not(.loginbtn),
	input[type="button"]:not(.loginbtn),
	button,
	.inputbtn {
		min-height: 40px;
		padding: 8px 12px;
	}
}

@media (max-width: 480px) {
	.container_main {
		margin-top: 90px !important;
	}

	body {
		font-size: 13px;
	}
}