/* ===========================================================================
   Quem esta no mundo agora -- o minimapa do cliente na home
   ---------------------------------------------------------------------------
   Duas partes: o CABECALHO a esquerda, onde o numero de quem esta jogando e o
   protagonista, e o MINIMAPA na lateral DIREITA, no formato do cliente --
   moldura redonda, furo circular, jogador no centro. As duas colunas valem em
   TODA largura, inclusive no celular (ver o bloco de 760px): empilhar custava
   230px de primeira tela e deixava meia tela vazia dos dois lados.

   A imagem do mapa e a MESMA que o guia de Experiência usa, e o ponto sai da
   mesma conta -- entao o jogador e o bicho que ele caca aparecem no mesmo
   sistema de coordenadas.
   =========================================================================== */
/* DISCRETA E ACIMA DO HERO (pedido do dono, 2026-09-24): e a prova de vida do
   servidor, primeira coisa que quem chega quer saber -- mas NAO pode competir
   com a arte do hero, que vem logo abaixo. Por isso faixa fina: metade do
   respiro das outras secoes, numero menor e minimapa menor. */
/* ===================================================== a primeira visao =====
   --faixa-mundo e o CONTRATO de altura entre esta faixa e o hero: o hero
   subtrai exatamente este valor (c-hero.css, regra `.c-mundo + .c-hero`) para
   que os dois caibam juntos na primeira tela. Por isso o token mora no :root e
   nao em `.c-mundo` -- irmao nao herda variavel de irmao.

   Quem mexer na altura da faixa mexe AQUI, e o hero acompanha sozinho. Quem
   deixar a faixa passar deste valor empurra o hero para fora da tela de novo:
   e o que acontecia antes (a 1920x1080 sobravam 95px para fora, e a 720p o hero
   quase nao aparecia).

   Escala por `svh`, nao por `vw`: o problema e de ALTURA. Em 2K a faixa para de
   crescer no teto de 15rem -- passar disso so aumenta espaco vazio, porque o
   conteudo dela e um minimapa e tres linhas de texto. `svh` (e nao `vh`) porque
   no celular a barra do navegador conta: com `vh` a conta mente e a faixa
   invade o hero quando a barra aparece. */
:root {
	--faixa-mundo: clamp(8.5rem, 23svh, 15rem);
}

.c-mundo {
	/* `min-height` e nao `height`: se um dia o conteudo crescer, ele empurra em
	   vez de ser cortado -- e ai a conta do hero e que fica desatualizada, o que
	   se ve na hora. Cortar texto nao se ve. */
	min-height: var(--faixa-mundo);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(.7rem, 1.4vw, 1.2rem);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ======================================================= a faixa VAZIA =====
   Sem ninguem no mundo, a faixa deixa de reservar a altura do layout com
   minimapa. O :root:has() e de proposito: --faixa-mundo mora no :root porque
   o HERO o subtrai de 100vh (c-hero.css) e irmao nao herda variavel de irmao
   -- entao para encolher a faixa de verdade e preciso encolher o TOKEN, senao
   o hero continua descontando ate 15rem de uma faixa que agora tem 4.

   Quem tem JS nem depende disto: o c-mundo.js mede a altura real e grava
   --faixa-mundo-real no <html>, e o hero prefere a medida. Isto aqui e o
   caminho SEM JS, que e justamente onde o erro de 11rem apareceria. */
/* A FAIXA RECOLHIDA entra na MESMA regra, e nao e economia de linha: ela tem
   exatamente o mesmo problema. Fechar o minimapa sem encolher o TOKEN deixaria
   o hero descontando 15rem de uma faixa que agora tem 4 -- e o buraco apareceria
   entre as duas secoes, nao aqui, que e o que torna esse erro dificil de achar.
   Ver o pedido do dono em inc/sections/mundo.php (o bloco `.c-mundo__recolhida`). */
:root:has(.c-mundo--vazio),
:root:has(.c-mundo--recolhido) {
	--faixa-mundo: clamp(3.25rem, 8svh, 4.5rem);
}

.c-mundo--vazio,
.c-mundo--recolhido {
	/* O justify-content: center herdado da .c-mundo continua valendo, e e ele
	   que mantem a linha no meio da faixa fina. */
	padding-block: clamp(.6rem, 1.1vw, .9rem);
}

.c-mundo__vazioLinha {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .2rem .55rem;
	margin: 0;
}

/* Cinza e PARADO. A faixa acesa tem ponto pulsante; aqui nao -- animacao chama
   o olho, e o que se quer e exatamente o contrario. */
.c-mundo__pontoOff {
	align-self: center;
	width: .42rem;
	height: .42rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
}

/* <h2>, mas com peso de legenda: o elemento precisa existir para o sumario do
   documento e para o aria-labelledby da secao -- a IMPORTANCIA visual e que
   nao. */
.c-mundo__vazioTit {
	margin: 0;
	font: 400 .95rem/1.3 var(--font-primary, Cinzel), serif;
	color: rgba(255, 255, 255, .62);
}

.c-mundo__vazioPe {
	font-size: .8rem;
	color: rgba(255, 255, 255, .33);
}

@media (max-width: 480px) {
	/* No celular a segunda frase e a primeira a sair: a linha ja diz o
	   essencial, e duas linhas de cinza no topo da home nao valem o espaco. */
	.c-mundo__vazioPe { display: none; }
}
.c-mundo__eyebrow {
	margin: 0 0 .25rem;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ouro, #d9b45a);
}

.c-mundo__titulo {
	margin: 0;
	font: 400 clamp(1rem, 2vw, 1.25rem)/1.15 var(--font-primary, Cinzel), serif;
}

.c-mundo__semNinguem {
	margin: .8rem 0 0;
	font-size: .9rem;
	color: rgba(255, 255, 255, .45);
}

/* Lado do minimapa. Uma variavel so, porque tudo aqui dentro (moldura, furo,
   marca) e proporcao dela. */
.c-mundo__grade {
	/* O minimapa cabe dentro de --faixa-mundo, nao da largura da tela.
	   Abaixo dele ainda entram o nome, a linha de reino/nivel e as setas --
	   cerca de 5rem. Por isso 0.56 da faixa, e nao a faixa inteira: a 720p a
	   faixa vale 8.5rem e o minimapa fica em 5.5rem, que e o piso. Medir por
	   `vw` como antes dava 11vw = 211px a 1920 e estourava a faixa em telas
	   largas e baixas (o 1920x1080 de monitor comum, justamente). */
	--minimapa: clamp(5.5rem, calc(var(--faixa-mundo) * 0.56), 10.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.6rem);
}

/* ============================================== a faixa no celular ==========
   PEDIDO DO DONO (2026-09-24): "pensa na view mobile tambem com a feature
   minimap" -- header e faixa nao podem comer a tela antes do hero.

   O layout empilhado media 502px num iPhone de 812: com os 79px do header
   antigo, o hero so comecava aos 581px -- 72% da primeira tela gasta antes da
   arte. O vilao nao era o conteudo, era o EMPILHAMENTO: texto centralizado em
   coluna unica e minimapa de 12rem embaixo, um abaixo do outro, com meia tela
   de largura sobrando dos dois lados.

   Aqui a faixa continua sendo as MESMAS duas colunas do desktop, so que
   estreitas -- nada de layout proprio de celular para envelhecer sozinho. O
   desenho que o dono aprovou (moldura, furo, marca, area de texto embaixo) nao
   muda em nada: muda o tamanho e o arranjo das setas.

   Medido em 375x812: a faixa cai de 502px para 326px e o hero sobe de 581px
   para 387px -- de 72% para 48% da primeira tela.
   =========================================================================== */
@media (max-width: 760px) {
	.c-mundo__grade {
		/* 9rem contra as 12rem de antes. Abaixo disso a greca da moldura, que e
		   arte de 136px, comeca a perder o relevo. */
		--minimapa: min(38vw, 9rem);
		gap: 1rem;
	}

	/* As setas do cabecalho SOMEM no celular -- nao o bloco todo, que ainda diz
	   em que mapa esta quem aparece. Folhear a mesma lista por dois pares de
	   setas na mesma tela e repeticao; ficam as de baixo do minimapa, que sao as
	   do jogo e estao ao lado da arte que elas trocam. */
	.c-mundo__folhear > .c-mundo__navBtn { display: none; }

	.c-mundo__folhearN { display: none; }

	/* A coluna de texto tem ~184px num telefone de 375. Nesta largura o eyebrow
	   quebrava em "AO VIVO NO / SERVIDOR" e o rodape em cinco linhas -- os dois
	   encolhem o suficiente para caberem em uma e em quatro. */
	.c-mundo__eyebrow { font-size: .64rem; letter-spacing: .12em; }

	.c-mundo__pe { font-size: .66rem; }

	/* AQUI MUDOU EM 2026-10-06: as setas voltaram para a MESMA linha do nome.
	   O arranjo de duas linhas existia porque, com setas de 2.2rem numa area de
	   texto presa aos 9rem do minimapa, sobravam 48px para o nome. Hoje a seta
	   tem 1.5rem (a arte no tamanho nativo) e a area de texto nao herda mais a
	   largura do minimapa -- cabem os tres na mesma linha, que e o arranjo do
	   jogo. Na segunda linha as setas acabavam nas duas pontas, longe do nome
	   que elas trocam. */
	.c-mundo__seletor {
		gap: .35rem;
	}

	/* "Esc fecha" num aparelho sem teclado e uma instrucao impossivel. O
	   "arraste para mover" fica, e o X da barra de titulo continua la. */
	.c-mundo__atlasEsc { display: none; }

	/* O visor do mapa grande sobe no celular: a tela e alta e estreita, e a
	   janela com 62svh deixava metade da altura para moldura e rodape. */
	.c-mundo__atlasVisor { height: min(68svh, 34rem); }
}

/* ------------------------------------------------------------ cabecalho -- */
.c-mundo__painel {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

/* O numero e o assunto da secao. */
.c-mundo__placar {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	margin: .4rem 0 0;
}

.c-mundo__placarN {
	font: 400 clamp(1.9rem, 4vw, 2.6rem)/.9 var(--font-primary, Cinzel), serif;
	color: var(--ouro, #d9b45a);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 22px rgba(217, 180, 90, .25);
}

.c-mundo__placarTxt {
	font-size: .98rem;
	color: rgba(255, 255, 255, .72);
}

.c-mundo__pe {
	margin: .2rem 0 0;
	font-size: .72rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .38);
	max-width: 32rem;
}

/* As setas do cabecalho: folheiam a MESMA lista das setas de baixo. No meio,
   o mapa de quem esta na tela -- e ele que responde "que mapa tem gente". */
.c-mundo__folhear {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: .3rem;
}

/* Nao ha versao centralizada deste bloco: como as duas colunas valem tambem no
   celular, o texto alinhado a esquerda e o que mantem a coluna estreita legivel
   -- centralizado, cada linha quebrada vira um degrau. */

.c-mundo__folhearMeio {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	min-width: 0;
	flex-wrap: wrap;
}

.c-mundo__mapaAtual {
	font: 400 clamp(1rem, 2vw, 1.25rem)/1.2 var(--font-primary, Cinzel), serif;
	color: #fff;
	/* Sem isto o nome de mapa mais longo estoura a coluna de texto do cabecalho
	   em telas estreitas -- agora que a pilha mede sempre o MAIOR, o maior
	   precisa saber quebrar. */
	text-wrap: balance;
}

/* ================================================= A PILHA, E O TREMOR ======
   O DEFEITO (relatado em 2026-10-09: "conforme passa de jogador ele se move
   poucos pixels pro lado e pro outro"): os rotulos trocavam por `hidden`, que
   TIRA DO FLUXO. A caixa media entao o nome ATUAL, e como cada nome tem um
   comprimento, ela encolhia e crescia a cada clique -- e as setas, que sao as
   colunas vizinhas de um grid de largura de conteudo, andavam junto. Nao era
   animacao nem arredondamento: era a caixa mudando de tamanho.

   A CORRECAO: todos na MESMA celula, um sobre o outro, e quem troca e a
   VISIBILIDADE. O grid dimensiona a celula pelo maior item, entao a caixa passa
   a ter a largura (e a altura) do nome mais largo -- a mesma, sempre, qualquer
   que seja o jogador na tela. Medido com cinco jogadores de "Rô" a
   "gustavobonitolouco123": a largura do seletor nao varia um pixel ao folhear
   pelos cinco. Com `hidden` variava.

   `visibility: hidden` e nao `opacity: 0`: o invisivel continua fora da arvore
   de acessibilidade (um leitor de tela nao le os outros quatro jogadores) e
   nao recebe clique -- que era exatamente o que o `hidden` dava.

   O terceiro lugar que troca, o QUADRO do mapa, continua com `hidden` de
   proposito: ele e `position: absolute`, nao empurra ninguem, e `display: none`
   e o que segura o download das imagens dos outros jogadores. */
.c-mundo__pilha {
	display: grid;
	/* `minmax(0, 1fr)` E OBRIGATORIO, e a falta dele custou uma rodada de
	   fotos. A coluna implicita de um grid e `auto`, que vale MAX-CONTENT: os
	   rotulos empilhados paravam de quebrar linha e passavam POR BAIXO das
	   setas -- o "agora" e o sublinhado do nome sumiam atras do triangulo. Na
	   medicao isso nao aparece (a caixa continua com a largura certa, quem
	   vaza e o conteudo); apareceu na imagem.

	   Com `minmax(0, 1fr)` a coluna recebe a largura que o seletor deu, os
	   rotulos voltam a quebrar dentro dela, e o grid continua PEDINDO o
	   tamanho do maior -- que e o que segura a caixa parada. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "pilha";
	min-width: 0;
}

.c-mundo__pilha > * {
	grid-area: pilha;
	min-width: 0;
}

.c-mundo__pilha > :not(.is-ativo) {
	visibility: hidden;
}

.c-mundo__folhearN {
	font-size: .74rem;
	color: rgba(255, 255, 255, .4);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ====================================================== o minimapa redondo ==
   A moldura e a arte `minimap` do layout do jogo (136x137), a mesma que foi
   para o APK. O miolo dela e transparente e o mapa aparece pelo furo: por isso
   ela entra POR CIMA, e o furo (128x128 a partir de 4,5 -- valores do
   uiscript/minimap.py) e recortado em circulo, como o minimap_image_filter faz
   no cliente.

   Dentro do furo, a arte do mapa vem ampliada e deslocada pelo PHP
   (mundo_lente) para o jogador cair sempre no CENTRO. Encaixar o mapa inteiro
   num circulo cortaria os quatro cantos -- e quem estivesse num deles sumiria.
   =========================================================================== */
/* O VISOR NAO TEM A LARGURA DO MINIMAPA.
   Ele empilha a lente redonda e, embaixo, a area de texto (setas + nome +
   reino/nivel). Enquanto o visor media `--minimapa`, a area de texto media o
   mesmo -- e, descontadas as duas setas, sobravam 86px para o nome a 1080p e
   32px a 720p. O nome quebrava em TRES linhas e a faixa inteira engordava
   100px por causa disso.

   Na janela do jogo o nome tambem passa da borda do mapa: a largura do texto
   nao e a largura do mapa. Entao a lente fica com `--minimapa` e a area de
   texto tem a sua propria, e o visor acompanha a maior das duas. */
.c-mundo__visor {
	width: auto;
	flex: none;
}

.c-mundo__lente {
	position: relative;
	width: var(--minimapa);
	margin-inline: auto;
	aspect-ratio: 136 / 137;
}

.c-mundo__moldura {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* A arte tem 136 px: ampliada, o filtro suave borra a greca. */
	image-rendering: -webkit-optimize-contrast;
}

.c-mundo__quadro {
	position: absolute;
	left: 2.941%;    /* 4/136   */
	top: 3.650%;     /* 5/137   */
	width: 94.118%;  /* 128/136 */
	height: 93.431%; /* 128/137 */
	border-radius: 50%;
	overflow: hidden;
	background: #0d0b09;
}

.c-mundo__quadro[hidden] { display: none; }

/* Largura, altura e canto vem inline, de mundo_lente(): dependem do arquivo e
   da posicao do jogador, e nao cabem em folha. */
.c-mundo__arte {
	position: absolute;
	max-width: none;
	opacity: .92;
}

.c-mundo__semMapa {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0 14%;
	text-align: center;
	font-size: .76rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .38);
}

/* A marca do jogador -- a playermark do cliente, aqui na cor do reino, que e o
   que identifica quem e sem ler. `left`/`top` vem inline, de mundo_lente(): no
   meio do furo quase sempre, e fora do meio so quando a arte travou na borda do
   mapa. */
.c-mundo__marca {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border-radius: 50%;
	background: var(--reino, #fff);
	box-shadow: 0 0 0 2px rgba(10, 10, 12, .8), 0 0 10px var(--reino, #fff);
}

@media (prefers-reduced-motion: no-preference) {
	.c-mundo__marca {
		animation: c-mundo-pulsa 2s ease-in-out infinite;
	}
}

@keyframes c-mundo-pulsa {

	0%,
	100% {
		box-shadow: 0 0 0 2px rgba(10, 10, 12, .8), 0 0 6px var(--reino, #fff);
	}

	50% {
		box-shadow: 0 0 0 2px rgba(10, 10, 12, .8), 0 0 16px var(--reino, #fff);
	}
}

/* Ponto que a conversao teve de grampear na borda do mapa: fica quadrado e
   apagado, para nao afirmar uma posicao que a imagem nao mostra. */
.c-mundo__marca--incerta {
	border-radius: 2px;
	opacity: .7;
	animation: none;
}

/* ------------------------------------------------ a area de texto, embaixo --
   Setas + nome do jogador logo abaixo da arte, como no minimapa do jogo. */
.c-mundo__seletor {
	display: grid;
	/* As colunas tem a largura do CONTEUDO (`auto`) e o conjunto e centrado:
	   assim as setas ficam coladas no nome, como na janela do jogo, em vez de
	   abertas nas duas pontas de uma caixa larga. Com `1fr` no meio, a coluna
	   de texto esticava ate o fim e empurrava as setas para as bordas.

	   O `max-width` e o teto: nunca mais estreita que o minimapa, nunca mais
	   larga que 13rem -- que e o que o nome mais longo precisa para caber em
	   duas linhas. O `minmax(0, auto)` deixa o nome quebrar em vez de estourar
	   esse teto. */
	width: auto;
	max-width: max(var(--minimapa), 13rem);
	justify-content: center;
	margin-inline: auto;
	grid-template-columns: 1.5rem minmax(0, auto) 1.5rem;
	align-items: center;
	gap: .35rem;
	margin-top: .5rem;
}

/* ------------------------------------------------- a seta, arte do jogo -----
   Era o caractere `‹` num circulo. Agora e a seta de folhear da janela da Alma
   de Dragao do cliente (dragonsoul/page_left_01.png, 16x15), copiada para
   assets/hud/ -- mesma funcao e mesma paleta da greca que esta logo acima.

   A arte tem 16px e e desenhada em DOBRO (32px) com `pixelated`: ampliar pixel
   art com o filtro suave do navegador transforma o bisel preto num borrao
   cinza. Em dobro exato cada pixel vira um quadrado de 2x2 e a forma continua a
   do jogo.

   ALVO DE TOQUE: o botao continua com os 2.2rem (35px) que a area de texto do
   minimapa sempre teve -- esticar a caixa a 44px esmagaria o nome do jogador
   entre as duas setas, e o desenho de 32px cabe nos 35 sem folga nenhuma. Os
   44px exigidos vem do ::after transparente, que estende a area CLICAVEL 5px
   para cada lado sem ocupar espaco no grid: 45x45 de alvo, 35x35 de caixa. */
/* TAMANHO 1x, E SEM CIRCULO (pedido do dono, 2026-10-06: "ficou muito grande
   e o radial quando hover nao faz sentido").

   Era 2.2rem de caixa com a arte em DOBRO (32x30). Numa faixa que existe para
   ser discreta, uma seta de 32px ao lado de um nome de 13px pesava mais que o
   nome. Agora e o tamanho NATIVO da arte do jogo (16x15), que com `pixelated`
   sai pixel a pixel -- mais nitido que o dobro, nao menos.

   E o circulo saiu: o jogo nao desenha botao em volta dessa seta, e um pill
   redondo com brilho dourado em volta de uma arte retangular de 16px era um
   elemento estranho inventado aqui. O aceso agora e o que ja era fiel -- o
   proprio ouro da seta ganhando halo.

   ALVO DE TOQUE: a caixa encolheu, entao o ::after cresceu na mesma medida.
   Continuam 44px de area clicavel, que e o minimo, sem ocupar espaco no grid
   nem espremer o nome do jogador entre as duas setas. */
.c-mundo__navBtn {
	appearance: none;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	line-height: 1;
	cursor: pointer;
	transition: filter var(--transicao, .2s), transform var(--transicao, .2s);
}

/* O alvo de toque de 45px. Transparente, sem desenho nenhum. */
.c-mundo__navBtn::after {
	content: "";
	position: absolute;
	inset: -10px;          /* 24 + 10 + 10 = 44px de alvo */
	border-radius: 999px;
}

.c-mundo__navSeta {
	display: block;
	width: 16px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 15px;
	image-rendering: pixelated;
}

/* seta-ant.png E O `page_left_02` DO JOGO, NAO O `_01`.
   Na convencao do cliente 01 e normal e 02 e "sobre" -- mas o 01 foi pintado
   para o fundo CINZA das janelas do jogo e, sobre o quase-preto deste site, o
   bisel escuro come o ouro e a seta vira um borrao. O 02 e a MESMA arte com o
   ouro saturado: e ele que, aqui, da o contraste que o 01 da la. Trocar de arte
   e mais fiel do que clarear a do jogo com filtro. */
.c-mundo__navBtn[data-mundo-ant] .c-mundo__navSeta {
	background-image: url("/assets/hud/seta-ant.png");
}

.c-mundo__navBtn[data-mundo-prox] .c-mundo__navSeta {
	background-image: url("/assets/hud/seta-prox.png");
}

/* Aceso: so a seta acende -- halo dourado e um passo na direcao para onde ela
   leva. Sem circulo, sem fundo: a arte e o botao. */
.c-mundo__navBtn:hover:not(:disabled) .c-mundo__navSeta,
.c-mundo__navBtn:focus-visible .c-mundo__navSeta {
	filter: drop-shadow(0 0 4px rgba(217, 180, 90, .8));
}

.c-mundo__navBtn[data-mundo-ant]:hover:not(:disabled)  { transform: translateX(-1px); }
.c-mundo__navBtn[data-mundo-prox]:hover:not(:disabled) { transform: translateX(1px); }

/* O foco por teclado precisa de contorno visivel -- o halo sozinho nao basta
   para quem navega com Tab. Fica no ::after, que e a area de toque. */
.c-mundo__navBtn:focus-visible { outline: none; }

.c-mundo__navBtn:focus-visible::after {
	outline: 2px solid var(--ouro, #d9b45a);
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.c-mundo__navBtn:hover:not(:disabled) { transform: none; }
}

/* Desligado: o `dis` do jogo. Com um jogador so nao ha o que folhear. */
.c-mundo__navBtn[data-mundo-ant]:disabled .c-mundo__navSeta {
	background-image: url("/assets/hud/seta-ant-off.png");
}

.c-mundo__navBtn[data-mundo-prox]:disabled .c-mundo__navSeta {
	background-image: url("/assets/hud/seta-prox-off.png");
}

.c-mundo__navBtn:disabled {
	opacity: .45;
	cursor: default;
}

.c-mundo__quem {
	text-align: center;
	min-width: 0;
}

.c-mundo__rotulo {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	align-items: center;
}

.c-mundo__rotulo b {
	font-size: .95rem;
	/* O fio do reino aparece aqui como sublinhado curto: identifica sem poluir. */
	border-bottom: 2px solid var(--reino, transparent);
	padding-bottom: .1rem;
	/* NOME DE JOGADOR NAO TEM ESPACO, e "gustavobonitolouco123" nao cabe em
	   13rem. Sem isto ele nao quebra em lugar nenhum: passa por cima das duas
	   setas, com o fio do reino junto. `anywhere` e nao `break-word` porque so
	   ele conta na largura minima da caixa -- com `break-word` o grid ainda
	   reservaria a palavra inteira e o estouro voltaria por outro caminho. */
	overflow-wrap: anywhere;
}

.c-mundo__rotulo em {
	font-style: normal;
	font-size: .6rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ouro, #d9b45a);
}

.c-mundo__rotulo small {
	font-size: .7rem;
	color: rgba(255, 255, 255, .45);
}

/* ============================= OS QUATRO BOTOES DA MOLDURA (M, X, -, +) =====
   Eles ja estavam DESENHADOS na arte desde o primeiro dia -- o minimap.png do
   cliente traz os quatro na greca -- e nenhum fazia nada. "Os controles do
   minimap nao funcionam" era literalmente isso.

   O que entra aqui e o ALVO: um <button> transparente em cima de cada desenho,
   na coordenada exata do uiscript/minimap.py (ver o comentario no PHP). O
   desenho continua sendo o da moldura; o botao so acende a versao `over` do
   jogo por cima quando o ponteiro chega.

   Em PORCENTAGEM e nao em px porque o minimapa muda de tamanho com a faixa
   (de 5rem a 10.5rem): em px o alvo descolaria do desenho em metade das telas. */
.c-mundo__hud {
	position: absolute;
	inset: 0;
	/* o container nao intercepta nada -- so os botoes dentro dele */
	pointer-events: none;
}

.c-mundo__hudBtn {
	position: absolute;
	appearance: none;
	padding: 0;
	border: 0;
	background: center / 100% 100% no-repeat;
	pointer-events: auto;
	cursor: pointer;
	/* a arte `over` e pixel art de 15px ampliada: o filtro suave a borraria */
	image-rendering: pixelated;
	opacity: 0;
	transition: opacity var(--transicao, .2s);
}

/* Em repouso o botao e invisivel: quem aparece e o desenho da moldura, embaixo.
   No hover/foco a arte `over` do jogo entra por cima, no mesmo lugar -- e o
   mesmo aceso que o cliente mostra. */
.c-mundo__hudBtn:hover,
.c-mundo__hudBtn:focus-visible {
	opacity: 1;
}

.c-mundo__hudBtn:focus-visible {
	outline: 2px solid var(--ouro, #d9b45a);
	outline-offset: 2px;
	border-radius: 50%;
}

/* O ALVO DE TOQUE, que o desenho de 15px nao da.
   Os insets sao ASSIMETRICOS de proposito: o `-` e o `+` sao vizinhos colados
   na arte do jogo, e crescer os dois para todo lado faria um cobrir o outro --
   com o `+`, que vem depois no HTML, vencendo a faixa do meio e trocando o
   zoom para o lado errado. Entao cada um cresce para FORA. */
.c-mundo__hudBtn::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.c-mundo__hudBtn--menos::after { inset: -8px -8px -2px -2px; }
.c-mundo__hudBtn--mais::after  { inset: -2px -2px -8px -8px; }

/* AtlasShowButton -- (12,12) 15x15 em 136x137 */
.c-mundo__hudBtn--atlas {
	left: 8.824%;
	top: 8.759%;
	width: 11.029%;
	height: 10.949%;
	background-image: url("/assets/hud/minimapa_atlas_over.png");
}

/* MiniMapHideButton -- (111,6) 19x20 */
.c-mundo__hudBtn--fechar {
	left: 81.618%;
	top: 4.380%;
	width: 13.971%;
	height: 14.599%;
	background-image: url("/assets/hud/minimapa_fechar_over.png");
}

/* ScaleDownButton -- (115,103) 15x15 */
.c-mundo__hudBtn--menos {
	left: 84.559%;
	top: 75.182%;
	width: 11.029%;
	height: 10.949%;
	background-image: url("/assets/hud/minimapa_menos_over.png");
}

/* ScaleUpButton -- (101,116) 15x15 */
.c-mundo__hudBtn--mais {
	left: 74.265%;
	top: 84.672%;
	width: 11.029%;
	height: 10.949%;
	background-image: url("/assets/hud/minimapa_mais_over.png");
}

/* DESLIGADO, E PRECISA PARECER.
   Aqui o `dis` do jogo nao serve: o desenho do botao nao e deste elemento, e
   da moldura embaixo -- baixar a opacidade do <button> transparente nao apaga
   nada. Entao o apagado e um veu escuro POR CIMA do desenho, que e o unico
   jeito de um alvo invisivel dizer que esta morto.

   Vale no fim da escada de zoom e na conta de equipe, que nao tem mapa para
   ampliar nem para abrir. */
.c-mundo__hudBtn:disabled {
	opacity: 1;
	background-image: none;
	cursor: default;
	pointer-events: none;
}

.c-mundo__hudBtn:disabled::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	background: rgba(12, 10, 9, .62);
}

/* ===================================================== A FAIXA RECOLHIDA ====
   O X da moldura fecha o minimapa e a secao vira UMA LINHA -- o `CloseWindow`
   do jogo, e o pedido do dono: "se fechar o minimapa fecha a section de online
   e fica so o header".

   O numero FICA. A secao existe para dizer que ha gente jogando; recolher pode
   tirar a arte, nao a resposta. */
.c-mundo__recolhida {
	/* escondida por padrao: quem a mostra e a classe no <section>, que so o JS
	   poe. Sem JS nao ha como recolher -- nem como voltar. */
	display: none;
	align-items: center;
	flex-wrap: wrap;
	gap: .2rem .7rem;
	margin: 0;
}

.c-mundo--recolhido .c-mundo__recolhida { display: flex; }
.c-mundo--recolhido .c-mundo__grade     { display: none; }

/* Aceso e pulsante, ao contrario do ponto cinza da faixa vazia: aqui TEM gente
   no jogo, e e essa a noticia. */
.c-mundo__ponto {
	width: .42rem;
	height: .42rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ouro, #d9b45a);
	box-shadow: 0 0 8px rgba(217, 180, 90, .7);
}

@media (prefers-reduced-motion: no-preference) {
	.c-mundo__ponto { animation: c-mundo-pisca 2.4s ease-in-out infinite; }
}

@keyframes c-mundo-pisca {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

.c-mundo__recolhidaTxt {
	margin: 0;
	font-size: .9rem;
	color: rgba(255, 255, 255, .72);
}

.c-mundo__recolhidaTxt b {
	font: 400 1.15rem/1 var(--font-primary, Cinzel), serif;
	color: var(--ouro, #d9b45a);
	font-variant-numeric: tabular-nums;
}

/* Voltar: o MiniMapShowButton do jogo (minimap_open_default, 32x32) com o
   rotulo ao lado -- so a arte seria um icone mudo no meio de uma linha de
   texto. */
.c-mundo__abrir {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .15rem .3rem;
	border: 0;
	border-radius: .35rem;
	background: none;
	color: rgba(255, 255, 255, .55);
	font: inherit;
	font-size: .78rem;
	cursor: pointer;
	transition: color var(--transicao, .2s);
}

.c-mundo__abrir:hover,
.c-mundo__abrir:focus-visible { color: var(--ouro, #d9b45a); }

.c-mundo__abrir:focus-visible {
	outline: 2px solid var(--ouro, #d9b45a);
	outline-offset: 1px;
}

.c-mundo__abrirArte {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background: url("/assets/hud/minimapa_abrir.png") center / contain no-repeat;
	image-rendering: pixelated;
}

/* ========================================================= O MAPA GRANDE ====
   O AtlasWindow do cliente: moldura escura com barra de titulo e X, o mapa
   inteiro dentro e a marca do jogador onde ele esta. A diferenca para o jogo e
   que aqui o mapa ABRE AMPLIADO e se ARRASTA -- a arte do guia tem 640 px ou
   mais, contra os 256 do atlas do cliente, entao ha mapa fora da janela e o
   arrasto e como se chega nele.

   O <dialog> cuida de Esc, do foco preso dentro e do fundo inerte. */
.c-mundo__atlas {
	width: min(92vw, 46rem);
	max-width: none;
	max-height: min(88svh, 42rem);
	padding: 0;
	border: 1px solid rgba(217, 180, 90, .35);
	border-radius: .5rem;
	background: #141210;
	color: #fff;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .7);
	overflow: hidden;
}

.c-mundo__atlas:not([open]) { display: none; }

.c-mundo__atlas::backdrop {
	background: rgba(6, 5, 4, .78);
	backdrop-filter: blur(2px);
}

.c-mundo__atlasBarra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem .7rem .55rem .9rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	background: linear-gradient(rgba(255, 255, 255, .05), transparent);
}

.c-mundo__atlasTitulo {
	margin: 0;
	font: 400 1.05rem/1.2 var(--font-primary, Cinzel), serif;
	color: var(--ouro, #d9b45a);
}

/* O X da barra de titulo. Aqui a arte do jogo ja e o botao INTEIRO (o
   minimap_close do cliente), entao ele aparece sempre -- nao e um alvo
   transparente sobre desenho, como os quatro da moldura. */
.c-mundo__atlasX {
	appearance: none;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url("/assets/hud/minimapa_fechar_over.png") center / 19px 20px no-repeat;
	image-rendering: pixelated;
	opacity: .8;
	cursor: pointer;
	transition: opacity var(--transicao, .2s);
}

.c-mundo__atlasX:hover,
.c-mundo__atlasX:focus-visible { opacity: 1; }

.c-mundo__atlasX:focus-visible {
	outline: 2px solid var(--ouro, #d9b45a);
	outline-offset: -2px;
}

/* O VISOR e a unica coisa da pagina com `touch-action: none`.
   Preso aqui dentro, o dedo que arrasta o mapa nao rola a pagina -- e o dedo
   que esta em qualquer outro lugar continua rolando normalmente. Posto no
   <body>, ou ate no <dialog> inteiro, isto sequestraria a rolagem do celular,
   que e exatamente o que nao pode acontecer. */
.c-mundo__atlasVisor {
	position: relative;
	height: min(62svh, 30rem);
	overflow: hidden;
	background: #0b0a09;
	touch-action: none;
	cursor: grab;
	overscroll-behavior: contain;
}

.c-mundo__atlasVisor[data-arrastando] { cursor: grabbing; }

.c-mundo__atlasTela {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.c-mundo__atlasArte {
	display: block;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* A mesma marca do minimapa, em dobro: no mapa grande ela e um ponto num campo
   muito maior, e no tamanho do minimapa some. */
.c-mundo__atlasMarca {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: var(--reino, #fff);
	box-shadow: 0 0 0 3px rgba(10, 10, 12, .85), 0 0 14px var(--reino, #fff);
	pointer-events: none;
}

/* Keyframes PROPRIO, e nao o c-mundo-pulsa do minimapa: aquele reescreve o
   box-shadow inteiro e trocaria o anel de 3px deste pelo de 2px do outro --
   num mapa de 1000px o anel fino some. */
@media (prefers-reduced-motion: no-preference) {
	.c-mundo__atlasMarca { animation: c-mundo-pulsa-atlas 2s ease-in-out infinite; }
}

@keyframes c-mundo-pulsa-atlas {

	0%,
	100% {
		box-shadow: 0 0 0 3px rgba(10, 10, 12, .85), 0 0 8px var(--reino, #fff);
	}

	50% {
		box-shadow: 0 0 0 3px rgba(10, 10, 12, .85), 0 0 22px var(--reino, #fff);
	}
}

.c-mundo__atlasPe {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .2rem .8rem;
	margin: 0;
	padding: .5rem .9rem .6rem;
	font-size: .76rem;
	color: rgba(255, 255, 255, .5);
	overflow-wrap: anywhere;   /* nome de jogador, que nao tem onde quebrar */
}

.c-mundo__atlasDica { color: rgba(255, 255, 255, .32); }

/* ============================================================ TELA BAIXA ====
   Notebook 1280x720 e 1366x768. Nao e celular -- o celular tem o bloco de
   760px, com outro desenho. Aqui a largura sobra e a ALTURA nao.

   Sem este bloco a faixa ficava com 239px de 720 (33% da tela) e empurrava o
   hero para fora: o minimapa nao encolhia (so olhava `vw`, e 1280 de largura e
   bastante) e o nome do jogador quebrava em TRES linhas, porque a area de
   texto herda a largura do minimapa e, com ele em 5rem, sobravam 32px entre as
   duas setas.

   Por isso o visor se solta da largura do minimapa aqui: a lente continua
   redonda no tamanho de --minimapa, e so a area de texto fica mais larga que
   ela -- como na janela do jogo, onde o nome tambem passa da borda do mapa.

   O limite de 850px pega 720 e 768 e deixa 1080p de fora, que e o certo: a
   1080p ja cabe tudo sem apertar nada.

   ESTE BLOCO FICA NO FIM DO ARQUIVO DE PROPOSITO. Ele e `@media`, mas a
   especificidade e a MESMA das regras base (`.c-mundo__grade`, `.c-mundo__
   rotulo b`) -- entao quem vier depois ganha. Escrito antes delas, como estava
   na primeira tentativa, o `--minimapa: 5rem` era sobrescrito e nada mudava. */
@media (min-width: 761px) and (max-height: 850px) {
	.c-mundo {
		padding-block: .75rem;
	}

	.c-mundo__grade {
		--minimapa: 5rem;
		gap: clamp(.9rem, 2.4vw, 1.8rem);
	}

	.c-mundo__seletor { margin-top: .3rem; }

	/* Nome e reino/nivel em corpo menor: o que importa aqui e caber em duas
	   linhas, nao em tres. */
	.c-mundo__rotulo b { font-size: .85rem; }
	.c-mundo__rotulo   { gap: 0; }
	.c-mundo__titulo   { font-size: 1rem; }
	.c-mundo__pe       { display: none; }   /* a nota de rodape da faixa */
}