` sem tabindex, game.js:2842), então nunca havia
como um foco entrar ali — e o `:focus-within` deste seletor era código
morto desde que foi escrito.
A correção separa as duas coisas que estavam misturadas:
- ESCONDER só acontece onde o hover EXISTE (@media hover:hover). Onde não
existe, as ações ficam sempre visíveis — que é o comportamento certo, não
um fallback degradado.
- Onde esconde, esconde por OPACIDADE, nunca por `visibility`. O botão
continua focável, o Tab chega nele, e aí sim o `:focus-within` revela o
grupo. O desenho da Fase 16g fica intacto para quem usa mouse. */
@media (hover: hover) and (pointer: fine){
.profile-actions{opacity:0!important;pointer-events:none}
.profile-card:hover .profile-actions,
.profile-card:focus-within .profile-actions{opacity:1!important;pointer-events:auto}
}
@media (hover: none),(pointer: coarse){
.profile-actions{opacity:1!important;pointer-events:auto!important;visibility:visible!important;
transform:none!important}
}
/* O card de VOLTAR não é um herói: ele mostra a ação sempre. */
.profile-back-card .profile-actions{opacity:1!important;pointer-events:auto;visibility:visible}
/* "SEM DADOS" some: um slot preenchido sem preview não precisa se anunciar. */
.profile-card:not(.profile-slot-empty) .profile-empty-slot{display:none!important}
/* ---------------------------------------------------------------------
CATÁLOGO DE CLASSES — o pódio tem 6 lugares aqui (VOLTAR + 5 classes),
não 4 como o Salão. Herdar as 4 colunas quebrava a fila em duas linhas
e as descrições subiam por cima dos nomes.
--------------------------------------------------------------------- */
#profileCards:has(.profile-class-pick-card){grid-template-columns:auto repeat(5,minmax(0,1fr))!important;
align-items:stretch!important;gap:4px!important}
/* Os cinco cards de classe dividem a MESMA linha de grade.
Antes era `align-items:end`: cada card ficava com a altura do proprio texto
e so as bases coincidiam, entao os topos -- e com eles a arte, o nome e a
borda do painel -- ficavam em alturas diferentes. As descricoes variam de
50px (Dark Lord) a 87px (Gladiador Magico), o que espalhava os topos por
37px. Com `stretch` os cinco assumem a altura da linha; o rodape continua
colado embaixo porque .profile-character-copy ja e flex:1 e
.profile-actions ja tem margin-top:auto. O card de voltar nao participa
dessa linha: ele fica ancorado na base. */
#profileCards:has(.profile-class-pick-card)>.profile-back-card{align-self:end}
#profileCards:has(.profile-class-pick-card) .profile-class-pick-card{height:100%}
.profile-class-pick-card{padding-bottom:14px!important}
.profile-class-pick-card .profile-icon{width:150px!important;height:196px!important}
.profile-class-pick-card::after{bottom:104px;width:112px}
.profile-class-pick-card .profile-character-visual{min-height:206px}
/* A descrição fica ABAIXO do nome, com fôlego e fundo próprio de leitura. */
.profile-class-pick-card .profile-character-copy{padding:0 8px!important;gap:8px}
/* A descricao reserva a altura da MAIOR das cinco (Gladiador Magico, 4 linhas).
Sem isso o bloco de texto media de 58px (Dark Lord) a 97px, e como ele fica
ancorado embaixo, o nome da classe subia ou descia junto -- 463 no Gladiador
contra 505 no Dark Lord. Reservando a altura, o nome cai no mesmo lugar nos
cinco cards e sobra respiro para textos futuros um pouco maiores. */
.profile-class-pick-card .profile-character-copy>p{min-height:100px!important;margin:0!important}
.profile-class-pick-card .profile-character-copy>p{margin:2px 0 9px!important;padding:8px 9px!important;
border-radius:4px;background:rgba(4,7,13,.72);backdrop-filter:blur(3px);
line-height:1.45!important;text-align:center}
/* Escolher é a ação principal desta tela: sempre visível, nunca no hover. */
.profile-class-pick-card .profile-actions{opacity:1!important;visibility:visible!important;
pointer-events:auto!important;transform:none!important}
.profile-class-pick-card .profile-actions button{min-height:34px!important;padding:8px 18px!important;
border-color:#c79a4a!important;background:linear-gradient(180deg,#d8a34a,#7d5410)!important;
color:#fff3cd!important;font-weight:900}
.profile-back-card .profile-actions{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.profile-back-card{min-width:150px}
@media(max-height:760px){
.profile-class-pick-card .profile-icon{width:120px!important;height:158px!important}
.profile-class-pick-card .profile-character-visual{min-height:168px}
.profile-class-pick-card::after{bottom:84px}
.profile-class-pick-card .profile-character-copy>p{font-size:calc(8.5px * var(--text-scale, 1))!important}
}
/* ---------------------------------------------------------------------
PÓDIO — respiro entre nome, status e ações (Fase 16f, ajuste de QA).
Relatado no jogo: "os nomes se sobrepondo". Com o herói ocupando 266px e
as três faixas de texto logo abaixo sem folga, nome, nível e botões se
encostavam. Aqui o bloco de identidade ganha altura própria e o herói
cede o espaço, em vez de disputar.
--------------------------------------------------------------------- */
.profile-card{padding-bottom:26px!important;gap:0}
.profile-icon{width:188px!important;height:236px!important}
.profile-card::after{bottom:172px;width:138px}
.profile-character-visual{min-height:262px}
.profile-identity-zone{padding:14px 8px 6px!important;min-height:52px}
.profile-character-name{margin-bottom:3px;line-height:1.15}
.profile-class-name{display:block;line-height:1.3}
.profile-status{margin:9px 0 11px!important;gap:7px!important}
.profile-actions{gap:6px!important}
/* Slot vazio: o rótulo precisa do mesmo respiro, senão encosta no chão. */
.profile-slot-empty .profile-identity-zone{padding-top:22px!important}
.profile-slot-empty .profile-class-name{color:#93a6c4!important;letter-spacing:2px}
@media(max-height:760px){
.profile-icon{width:150px!important;height:190px!important}
.profile-character-visual{min-height:212px}
.profile-card::after{bottom:140px}
.profile-character-name{font-size:calc(16px * var(--text-scale, 1))}
}
/* =====================================================================
CABER NA TELA — Fase 16f (QA do usuário)
---------------------------------------------------------------------
Reportado jogando: "em opções existe uma opção de subir a resolução,
aqui está em 130%, mas mesmo em 100% não aparece tudo".
Medido em 1366x768 com escala de texto 1,3: a entrada precisava de 773px
de altura numa janela de 768 e transbordava 29px; no Salão, ENTRAR /
RENOMEAR / APAGAR caíam abaixo da borda.
A causa era o layout ter medidas FIXAS em px enquanto a escala de texto
(--text-scale) empurra tudo para baixo. Aqui o tamanho passa a responder
à ALTURA da janela, e sobra rolagem como rede de segurança -- em nenhum
caso um botão fica inalcançável.
===================================================================== */
.main-menu-screen{overflow:auto!important;align-content:center}
.main-menu-frame{max-height:none!important;padding-block:max(12px,2vh)!important}
/* O logo cede espaço primeiro: ele é o maior bloco e o mais elástico. */
.main-menu-logo{width:min(340px,66vw,34vh)!important;margin-bottom:min(-6px,-0.4vh)!important}
.main-menu-kicker{margin:0.4vh 0 min(22px,2.4vh)!important}
.main-login-form{gap:min(9px,1.1vh)!important}
.main-login-form input{padding:min(11px,1.3vh) 13px!important}
.main-menu-actions{margin-top:min(14px,1.6vh)!important}
.main-menu-actions button{min-height:min(44px,5.4vh)!important}
.main-menu-primary{min-height:min(48px,5.8vh)!important}
.main-account-status{margin-top:min(14px,1.5vh)!important}
.main-menu-frame small{margin-top:min(16px,1.6vh)!important}
/* SALÃO DOS HERÓIS: o pódio vive dentro da altura real da janela, e os
botões do herói nunca caem para fora. */
.profile-modal-card{grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important}
.profile-cards{height:auto!important;min-height:0!important;
max-height:calc(100dvh - 92px)!important;overflow:visible!important}
.profile-card{padding-bottom:min(26px,3vh)!important}
.profile-icon{width:min(188px,20vh)!important;height:min(236px,26vh)!important}
.profile-character-visual{min-height:min(262px,29vh)!important}
.profile-card::after{bottom:min(172px,19vh)}
.profile-identity-zone{padding:min(14px,1.6vh) 8px min(6px,.7vh)!important;min-height:0}
.profile-status{margin:min(9px,1vh) 0 min(11px,1.2vh)!important}
.profile-actions button{min-height:min(34px,4vh)!important;padding:min(8px,.9vh) 12px!important}
.profile-class-pick-card .profile-icon{width:min(150px,17vh)!important;height:min(196px,22vh)!important}
.profile-class-pick-card .profile-character-visual{min-height:min(206px,23vh)!important}
.profile-class-pick-card::after{bottom:min(104px,12vh)}
.profile-class-pick-card .profile-character-copy>p{padding:min(8px,.9vh) 9px!important}
.auth-optional{color:#7e8799;font-size:.82em;font-weight:400;letter-spacing:.04em}
/* ==========================================================================
TRANSBORDO DE TEXTO NAS ESCALAS DE UI (110% / 120% / 130%)
--------------------------------------------------------------------------
Medido com tools/audit/ui-overflow.mjs em 1366x768. Em 120% -- a escala que
o jogo usa por padrao no teste -- estas caixas cortavam ou derramavam texto:
#sidebarPassive altura 44px com overflow hidden, texto pedindo
133px: a passiva da classe ficava CORTADA.
#openEquipmentPanelButton rotulo 20px mais largo que o botao, cortado.
.battle-skill-icon emoji 4px maior que a caixa, DERRAMANDO por
cima do vizinho (overflow visible).
Sao dois defeitos diferentes: `hidden` esconde o texto, `visible` empurra o
texto para fora. A correcao segue a natureza de cada caixa -- a passiva pode
crescer (a tela ja rola), o botao passa a caber o rotulo, e o icone ganha a
caixa do tamanho do glifo.
========================================================================== */
/* #sidebarPassive NAO entra aqui: a passiva e truncada de proposito em duas
linhas por `-webkit-line-clamp:2` (styles/battle.css). Forcar overflow visivel
quebraria a reticencia e derramaria o texto sobre o painel. O texto completo
da classe fica no painel do personagem. */
#openEquipmentPanelButton{white-space:normal;line-height:1.2;padding-left:8px;padding-right:8px}
.battle-skill-icon,.starter-quest-icon{line-height:1;display:grid;place-items:center}
/* --------------------------------------------------------------------------
SALAO DOS HEROIS EM ZOOM ALTO / JANELA BAIXA
Reproduzido no video do usuario (janela 1600x848 com zoom do navegador):
os botoes ENTRAR / RENOMEAR / APAGAR sumiam dos cards de personagem.
Causa: `.profile-cards` tinha ALTURA FIXA -- min(600px, 100dvh - 96px). Com
zoom, a viewport em pixels CSS encolhe (848px a 125% viram ~678px), o
contêiner cai para ~582px, e o card -- arte + nome + nivel + area + tres
botoes -- passa a nao caber. O que sobra e cortado, e o que fica de fora sao
justamente os botoes, que ficam no rodape do card.
Correcao: o contêiner deixa de ter altura fixa e passa a ter LIMITE. Quem
cede espaco quando aperta e a moldura da arte, que e a parte elastica --
assim o rodape do card continua na tela em vez de sumir. Nada aqui rola.
-------------------------------------------------------------------------- */
/* A sobra era CONSTANTE (22px em todas as escalas de texto), ou seja, nao vinha
do tamanho da fonte nem da arte: a subtracao de 96px simplesmente nao cobria
o cabecalho do painel mais as margens. 130px cobre com folga e o contêiner
para de rolar por dentro. */
#profileCards{height:auto!important;max-height:calc(100dvh - 130px)!important;min-height:0!important;
/* SEM barra de rolagem fantasma -- mas SEM cortar conteudo tambem.
A primeira versao usava overflow:hidden e cortou a fileira de botoes dos
cards de personagem, que e conteudo real. `clip` no eixo X mata a barra
horizontal fantasma da sombra sem tocar no eixo vertical. */
Medido: o contêiner tem 357px de conteudo e 388px de scrollHeight, mas
NENHUM elemento ultrapassa a borda inferior (verificado varrendo os filhos).
Os 31px de diferenca vem do pseudo-elemento ::after de sombra dos cards,
que entra no scrollHeight e nao aparece no DOM. Com overflowY:auto isso
virava uma barra de rolagem que revela sombra -- o jogador rola atras de
informacao e nao encontra nada. Clipar a decoracao nao perde conteudo. */
overflow:visible!important}
#profileCards .profile-card{min-height:0!important}
/* 26vh deixava o conteudo 22px mais alto que o contêiner, e o painel passava a
rolar por dentro -- a "informacao oculta" que exigia scroll. Medido em
1600x848: 22vh zera a sobra em todas as quatro escalas de texto. */
#profileCards .profile-character-visual{height:clamp(120px,22vh,238px)!important;min-height:0!important}
#profileCards .profile-icon{height:auto!important;max-height:100%!important}
/* Pontos da barra de etapas: os ja alcancados sao clicaveis e fixam o farm. */
.stage-dot-clicavel{cursor:pointer}
.stage-dot-clicavel:hover{filter:brightness(1.5);transform:scale(1.15)}
.stage-dot-clicavel:focus-visible{outline:2px solid #ffd56a;outline-offset:2px}
.stage-dot-fixada{box-shadow:0 0 0 2px #ffd56a,0 0 8px rgba(255,213,106,.6)}
/* ==========================================================================
BUG-007 DIALOGO DO JOGO no lugar de prompt()/confirm() nativos.
Reaproveita .modal-backdrop e .modal-card de proposito: nao existe um
segundo sistema de modal, so um conteudo novo dentro do que ja havia.
========================================================================== */
.col-dialog-backdrop{z-index:4000}
.col-dialog-card{width:min(460px,100%)}
.col-dialog-titulo{margin:0;font-size:calc(17px * var(--text-scale, 1))}
.col-dialog-corpo p{margin:0 0 10px;color:#c9ced9;font-size:calc(12px * var(--text-scale, 1));line-height:1.6}
.col-dialog-corpo p:last-child{margin-bottom:0}
.col-dialog-campo{display:block;margin:14px 0 0}
.col-dialog-campo span{display:block;margin-bottom:5px;color:#8d95a8;font-size:calc(10px * var(--text-scale, 1))}
.col-dialog-campo span:empty{display:none}
.col-dialog-input{width:100%;padding:11px 12px;border:1px solid #3a4050;border-radius:8px;
background:#151820;color:#e8ecf4;font:inherit;font-size:calc(13px * var(--text-scale, 1))}
.col-dialog-input:focus{outline:2px solid #6b5fd2;outline-offset:1px}
.col-dialog-erro{margin:7px 0 0;color:#ff9d9d;font-size:calc(11px * var(--text-scale, 1))}
.col-dialog-acoes{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.col-dialog-acoes button{min-height:40px;padding:10px 18px;font-size:calc(11px * var(--text-scale, 1))}
.col-dialog-cancelar{background:#343947}
.col-dialog-ok{background:#4b6cd4}
.col-dialog-ok.perigoso{background:#8c3a3a}
@media(max-width:520px){.col-dialog-acoes{flex-direction:column-reverse}.col-dialog-acoes button{width:100%}}
/* Fase 21 — classe avancada ainda nao conquistada. Aparece na lista, apagada,
com o requisito legivel: esconder seria o jogador nunca saber que ela existe. */
.profile-card.profile-class-locked{opacity:.55;filter:grayscale(.65)}
.profile-card.profile-class-locked .profile-icon{filter:grayscale(1) brightness(.7)}
.profile-card.profile-class-locked button[disabled]{cursor:not-allowed;opacity:.8}
.profile-class-lock{display:block;margin-top:4px;font-size:.78em;font-weight:700;color:#ffb84d;letter-spacing:.02em}
/* ===== MOLDURA DE PERFIL (cosm�tico) =====
A arte da moldura EXTRAPOLA a caixa do retrato de proposito: as molduras tem
pontas e dragoes que saem da borda, e recorta-las mataria o desenho. Por isso
ela e um
![]()
em position:absolute com escala maior que 100%, e o retrato
ganha overflow:visible enquanto houver moldura.
pointer-events:none garante que a moldura nunca rouba o clique do retrato. */
.col-frame-art{position:absolute;left:50%;top:50%;width:168%;height:168%;
transform:translate(-50%,-50%);pointer-events:none;z-index:3;
image-rendering:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));}
.has-col-frame{position:relative;overflow:visible;}
/* A MOLDURA TRANSBORDA; O CONTEUDO DO RETRATO, NAO. (Fase 39)
-----------------------------------------------------------------------
`overflow:visible` acima existe porque a arte da moldura tem pontas e
dragoes que saem da borda de proposito. So que ele desliga o recorte para
TUDO -- e foi assim que ligar uma moldura passou a jogar o sprite do
personagem por cima do nome, do nivel e das barras.
MEDIDO antes da correcao (tools/audit/moldura-retrato-probe.mjs): num
retrato de 52x52 o sprite tinha 285x143 e escapava 91px a esquerda, 142px a
direita e 125px abaixo. `styles/hud-layout.css` o punha em `scale:2.7` com
`translate:-5px 75px`, e o `overflow:hidden` escondia isso desde sempre. A
moldura nao criou o defeito: ela tirou a tesoura.
A causa foi corrigida na FONTE (a entrada do Editor em
`src/editor/editor-layout.js`, re-assada com bake-hud-layout). Esta regra e a
REDE: qualquer imagem do retrato que nao seja a moldura fica presa na caixa,
venha o tamanho de onde vier. Assim "deixar a moldura aparecer" e "segurar o
sprite" param de ser mutuamente exclusivos. */
.has-col-frame > img:not(.col-frame-art){
width:100%!important;height:100%!important;
max-width:100%!important;max-height:100%!important;
object-fit:cover!important;translate:none!important;scale:none!important;
}
/* Sem moldura o retrato continua com a borda e o corte de sempre; com moldura
a borda some, porque quem desenha a borda agora e a arte. */
/* A CAUSA REAL (medida no CSSOM, nao suposta): a linha 1289 declara
"overflow:hidden!important" para .hero-identity .class-summary-icon. Nenhuma
centrada mas com 62% dela CORTADA exatamente as pontas que ela existe para
-- exatamente as pontas que ela existe para mostrar. Por isso aqui tambem
usa !important, e so quando ha moldura equipada. */
.class-summary-icon.has-col-frame,.profile-card-avatar.has-col-frame,.hero-identity .class-summary-icon.has-col-frame{border-color:transparent;background:transparent;overflow:visible!important;}
.nav-mail-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:9px;
background:#e04b4b;color:#fff;font-size:calc(11px * var(--text-scale, 1));font-style:normal;font-weight:700;text-align:center;}
.mail-item{align-items:flex-start;gap:12px;}
.mail-unread{border-left:3px solid #5d65ff;}
.mail-important{background:linear-gradient(90deg,rgba(255,209,102,.07),transparent 60%);}
.mail-body{margin:4px 0 0;color:#a6aec0;line-height:1.4;font-size:calc(13px * var(--text-scale, 1));}
.mail-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.mail-attachment{padding:3px 8px;border:1px solid rgba(255,215,0,.35);border-radius:8px;
background:rgba(255,215,0,.08);color:#ffeb3b;font-size:calc(12px * var(--text-scale, 1));}
.mail-attachment.claimed{border-color:#3a4356;background:rgba(255,255,255,.04);color:#8c95a8;}
/* ==========================================================================
O RETRATO DO PERFIL MOSTRA O ROSTO, NAO O BONECO INTEIRO (Fase 43)
Pedido do autor, com print: "deveria ser so a parte mais proxima da face do
personagem no perfil e nao uma miniatura dele".
O NUMERO FOI MEDIDO, NAO ESCOLHIDO NO OLHO (tools/audit/rosto-do-sprite-probe.mjs).
A sonda le o ALFA de cada arte num canvas e devolve a caixa real do corpo:
warrior corpo 78x190 em (61,5) mage corpo 76x188 em (63,7)
archer corpo 73x195 em (67,2) mg corpo 79x193 em (62,3)
dark_lord corpo 79x188 em (62,8) set BD corpo 84x194 em (59,1)
Duas coisas caem dai. O corpo comeca entre y=1 e y=8 num sprite de 200px,
entao 30% DO SPRITE (y=0..60) cobre cabeca e ombros em todas as classes E
nos overrides de set -- que trocam a arte inteira e por isso tinham de entrar
na medida. E o centro horizontal do corpo cai entre 101 e 103,5 num sprite
cujo centro e 100: centrar pelo sprite erra no maximo 3,5px.
A DETECCAO AUTOMATICA DE OMBRO FOI DESCARTADA, e o motivo fica registrado: a
sonda tentava achar onde a silhueta alarga, e o set Black Dragon tem um chifre
de 2px no topo que vira a "largura da cabeca" de referencia -- o ombro saia em
3% e o recorte cortaria a cabeca fora. Caixa do corpo e medida robusta;
silhueta por linha nao e.
COMO: a arte fica 1/0,30 = 3,333x a caixa e ancora no topo. Deslocar
-116,65% na horizontal recentra ((333,3-100)/2).
========================================================================== */
/* A caixa que corta. Ela e IRMA da moldura, nao a moldura em si: por isso o
retrato pode continuar com overflow visivel (a moldura precisa disso) sem
que o rosto vaze. */
.perfil-rosto{
display:block;position:relative;
width:100%;height:100%;overflow:hidden;border-radius:inherit;
}
.perfil-character-sprite{
display:block;
/* 20% DO SPRITE: cabeca e ombros. A primeira versao usou 30% e a foto
mostrou o corpo ate a cintura -- longe de "so a parte mais proxima da
face". As medidas da sonda sustentam os 20%: a cabeca comeca entre 0,5% e
4% e o ombro mais baixo das cinco classes esta em 17,5% (dark_lord 17%,
mage 17,5%), entao y=0..40 pega cabeca e ombros em todas sem cortar
nenhuma. 1/0,20 = 5x a caixa; o deslocamento recentra ((500-100)/2). */
width:500%!important;max-width:none!important;height:auto!important;
margin-left:-200%;
object-fit:contain!important;
image-rendering:pixelated;
}
/* ESPACO PARA A MOLDURA TRANSBORDAR (Fase 43).
Nos prints do autor a moldura cobre o texto "PERFIL DO PERSONAGEM". Medido
no runtime: retrato 96x96 em x=14, arte da moldura 158x158 em x=-17 -- ou
seja, 31px de transbordo por lado, e a borda direita dela chega a x=141
enquanto o cabecalho comeca em x=126.
O transbordo NAO e defeito: a moldura existe para cercar o retrato, e por
isso ela e maior que ele. O que faltava era RESERVAR o espaco dela. Encolher
a arte "resolveria" tirando da moldura justamente as pontas que o autor
comprou para ver. 31/96 = 32,3% do lado da caixa. */
.perfil-retrato{margin:calc(34px * var(--ui-scale,1));}
.perfil-retrato:not(.has-col-frame){margin:0;}
/* A guarda `.perfil-retrato.has-col-frame{overflow:hidden}` foi RETIRADA ao
inves de mantida: ela cortaria a propria moldura, que existe para
transbordar a borda. Quem corta agora e `.perfil-rosto`, que e irmao dela. */
/* ---- CORREIO no topo, junto do logo (Fase 43) ---- */
.top-mail-button{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;}
/* ==========================================================================
O PONTO DE NOVIDADE (Fase 43)
Pedido do autor: "todo menu que tiver algo novo pro player conferir, poderia
ter esse iconezinho vermelho... so em menus que de fato ele precisa verificar
sabe? se nao fica confuso".
O MODELO JA EXISTIA E NUNCA TINHA SIDO LIDO. `dirtyGameViews` (game.js) e
escrito em quinze lugares -- descoberta de set, contrato, bestiario, party,
combate -- e ATE AQUI nenhuma linha do jogo o consultava. O ponto abaixo e a
primeira leitura desse estado, nao um sistema novo.
O CORREIO fica de fora de proposito: ele ja tem contador com numero
(`.nav-mail-badge`), e dois marcadores no mesmo botao seriam dois avisos para
a mesma coisa.
========================================================================== */
.nav-button{position:relative;}
.nav-novidade{
position:absolute;top:6px;right:8px;
width:8px;height:8px;border-radius:50%;
background:#e04b4b;box-shadow:0 0 0 2px rgba(10,12,18,.85);
pointer-events:none;
}
/* O menu MAIS carrega o ponto dos destinos escondidos dentro dele: sem isto o
jogador so descobriria a novidade abrindo o menu. */
.nav-more-button .nav-novidade{top:8px;right:10px;}
/* ==========================================================================
FICHA DO JOGADOR (Fase 95) — src/ui/player-card-ui.js
O retrato e o lutador do duelo (`.pvp-fighter-anchor`, 150px), entao a
calibracao `duelo:
` do Editor vale aqui tambem. A caixa do retrato
deixa espaco embaixo para a aura, que desce do chao do lutador.
========================================================================== */
.col-ficha-fundo{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;
padding:16px;background:rgba(4,6,10,.72);}
.col-ficha-card{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;
background:linear-gradient(180deg,#1d212c,#12151c);border:1px solid rgba(215,169,68,.45);border-radius:12px;
padding:18px 18px 12px;box-shadow:0 18px 50px rgba(0,0,0,.6);color:var(--text);}
.col-ficha-fechar{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:6px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;}
.col-ficha-placa{display:flex;align-items:center;justify-content:center;height:72px;margin:0 32px 6px;}
.col-ficha-placa-arte{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));}
.col-ficha-placa-texto{font-weight:700;color:#ffd700;letter-spacing:.5px;text-shadow:0 0 6px rgba(0,0,0,.9);}
.col-ficha-corpo{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.col-ficha-retrato{flex:0 0 190px;height:230px;display:flex;align-items:flex-start;justify-content:center;
padding-top:34px;overflow:hidden;border-radius:10px;
background:radial-gradient(ellipse at 50% 85%,rgba(215,169,68,.16),transparent 65%),rgba(0,0,0,.35);}
.col-ficha-lutador{position:relative;width:150px;height:150px;display:flex;align-items:flex-end;justify-content:center;}
.col-ficha-dados{flex:1 1 220px;min-width:0;}
.col-ficha-nome{margin:0;font-size:1.25rem;color:#fff;overflow-wrap:anywhere;}
.col-ficha-voce{color:#63c887;font-size:.8rem;font-weight:600;}
.col-ficha-classe{margin:2px 0 8px;color:var(--muted);font-size:.85rem;}
.col-ficha-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.col-ficha-chips span{font-size:.72rem;color:var(--muted);background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px 9px;}
.col-ficha-chips strong{color:#ffb84d;}
.col-ficha-linhas{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 8px;font-size:.82rem;}
.col-ficha-linhas dt{color:var(--muted);}
.col-ficha-linhas dd{margin:0;color:#e9ebf0;overflow-wrap:anywhere;}
.col-ficha-bio{margin:6px 0 0;font-style:italic;color:#cfd3dc;font-size:.82rem;overflow-wrap:anywhere;}
.col-ficha-nota{margin:12px 0 0;text-align:center;color:#6f7688;font-size:.7rem;}
.col-ficha-editar{display:block;margin:12px auto 0;}
@media (max-width:480px){.col-ficha-retrato{flex-basis:100%}}
/* O nome clicavel nas listas e no chat: parece nome, e nao botao. */
.col-ficha-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
text-decoration:underline dotted rgba(255,255,255,.3);text-underline-offset:3px;}
.col-ficha-link:hover,.col-ficha-link:focus-visible{text-decoration-color:currentColor;outline:none;}
.col-chat-titulo{margin-left:6px;font-size:.68rem;font-weight:600;color:#ffd56a;}
/* O TITULO NO PERFIL, logo abaixo do nome. */
.perfil-titulo{display:flex;align-items:center;min-height:0;margin:2px 0 6px;}
.perfil-titulo img{height:54px;max-width:220px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));}
.perfil-titulo span{font-weight:700;color:#ffd700;}
.perfil-ficha-btn{margin-top:8px;}
/* Galerias do Perfil: o titulo e uma faixa 3:1, e a aura mostra so o 1o quadro da tira 4x1. */
/* A galeria das asas pinta o icone quadrado e `pixelated`: numa faixa de titulo
isso deixava a arte com 44px e serrilhada. */
/* A coluna do icone e do GRID do item (54px): alargar so o icone o punha por
cima do nome, visto no print do contrato. */
.wing-craft-item.perfil-titulo-item{grid-template-columns:132px minmax(0,1fr) minmax(180px,auto)!important;}
.wing-craft-item .wing-icon.perfil-titulo-icone{width:132px!important;min-width:0;}
@media(max-width:620px){
.wing-craft-item.perfil-titulo-item{grid-template-columns:96px minmax(0,1fr)!important;}
.wing-craft-item .wing-icon.perfil-titulo-icone{width:96px!important;}
}
.wing-craft-item .perfil-titulo-icone .wing-card-art{width:100%;height:100%;object-fit:contain;image-rendering:auto;}
.perfil-aura-quadro{display:block;width:60px;height:80px;margin:auto;background-repeat:no-repeat;
background-size:400% 100%;background-position:0 0;}
/* ==========================================================================
GvG V2 — ONDA 5 (Fase 97) — src/ui/gvg-ui.js
========================================================================== */
.gvg-cabecalho{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;
background:rgba(0,0,0,.45);border:1px solid rgba(255,184,77,.3);border-radius:8px;padding:14px 16px;margin-bottom:12px;}
.gvg-cabecalho h3{margin:2px 0 4px;color:#ffd56a;font-size:1.15rem;}
.gvg-cabecalho p{margin:0;color:#cfd3dc;font-size:.85rem;max-width:560px;}
.gvg-overline{font-size:.68rem;letter-spacing:.12em;color:var(--muted);}
.gvg-semana{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.gvg-semana li{font-size:.68rem;color:#8f97aa;text-align:center;padding:6px 9px;border-radius:6px;
border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);min-width:74px;}
.gvg-semana li b{color:#cfd3dc;font-weight:600;}
.gvg-semana li.atual{border-color:#ffb84d;background:rgba(255,184,77,.12);color:#ffd56a;}
.gvg-semana li.feito{opacity:.6;}
.gvg-bloco{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.gvg-bloco h4{margin:0 0 6px;color:#ffb84d;font-size:.95rem;}
.gvg-bloco p{margin:0 0 6px;font-size:.85rem;color:#e4e6ec;}
.gvg-bloco small{color:#8f97aa;font-size:.74rem;}
.gvg-inscricao{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.gvg-inscricao>div{flex:1 1 260px;}
.gvg-forca{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;margin-bottom:12px;}
.gvg-forca h4{margin:0 0 8px;color:#ffb84d;font-size:.95rem;}
.gvg-forca-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:6px;}
.gvg-forca-grade div{background:rgba(255,255,255,.04);border-radius:6px;padding:7px 9px;}
.gvg-forca-grade span{display:block;font-size:.64rem;letter-spacing:.1em;color:var(--muted);}
.gvg-forca-grade strong{color:#fff;font-size:.95rem;}
.gvg-forca small{color:#8f97aa;font-size:.72rem;}
.gvg-formacao-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.gvg-botoes{display:flex;gap:6px;flex-wrap:wrap;}
.gvg-tabela{overflow-x:auto;margin-top:6px;}
.gvg-tabela table{width:100%;border-collapse:collapse;font-size:.82rem;}
.gvg-tabela th{text-align:left;color:#8f97aa;font-weight:600;font-size:.7rem;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.1);}
.gvg-tabela td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.05);color:#e4e6ec;white-space:nowrap;}
.gvg-tabela tr.gvg-eu td{background:rgba(255,184,77,.08);}
.gvg-tabela tr.gvg-inelegivel td{color:#7c8292;}
.gvg-tabela code{font-size:.72rem;color:#9aa3b8;}
.gvg-ok{color:#8fe3a8!important;}
.gvg-aviso{color:#ffb4a0!important;}
.gvg-vazio{color:#8f97aa;text-align:center;padding:24px 0;}
/* DURABILIDADE (Fase 99). Peca quebrada: icone avermelhado em todo lugar que usa itemArtHtml;
no Ferreiro, a barra de integridade e os botoes de reparo. */
.item-quebrado{filter:grayscale(.55) sepia(1) hue-rotate(-45deg) saturate(3.2) brightness(.82)!important;outline:1px solid rgba(255,70,70,.55);outline-offset:-1px}
.forge-reparo{margin-top:10px;padding:9px 10px;border:1px solid rgba(205,170,110,.25);border-radius:8px;background:rgba(0,0,0,.25)}
.forge-reparo.quebrado{border-color:rgba(255,80,80,.6);background:rgba(90,10,10,.35)}
.forge-reparo-barra{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.forge-reparo-barra>span{display:block;height:100%;background:linear-gradient(90deg,#c0392b,#e0b04a 45%,#5fbf6a)}
.forge-reparo-linha{margin:6px 0;font-size:calc(12px * var(--text-scale, 1))}
.forge-reparo.quebrado .forge-reparo-linha strong{color:#ff6b6b}
.forge-reparo-acoes{display:flex;flex-wrap:wrap;gap:6px}
.forge-reparo-acoes button{flex:1 1 auto;min-width:0}
/* GvG V2, ONDA 6 (Fase 100): a batalha. Duas colunas no desktop; no celular, uma por vez
pelas abas NOS/ELES (auditoria 2.8). Toque, nunca hover: o ATACAR e um botao. */
.gvg-barra{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;margin:0 0 10px;padding:9px 12px;border-radius:8px;background:rgba(20,14,6,.92);border:1px solid rgba(255,184,77,.35);font-size:.74rem;letter-spacing:.08em;color:#cfd3dc}
.gvg-barra b{color:#ffd56a;font-size:.9rem;letter-spacing:0}
.gvg-avisos{margin:0 0 10px;line-height:1.35}.gvg-avisos small{color:#8f97aa;font-size:.74rem}
.gvg-resultado.vitoria{border-color:rgba(112,220,130,.5)}.gvg-resultado.vitoria h4{color:#8ff0a0}.gvg-resultado.derrota h4{color:#ff8a80}
.gvg-abas{display:none;gap:6px;margin-bottom:8px}.gvg-abas button{flex:1;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfd3dc;font-size:.74rem;letter-spacing:.06em}
.gvg-abas button.ativa{border-color:#ffb84d;background:rgba(255,184,77,.14);color:#ffd56a}
.gvg-guerra{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.gvg-lado{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px;min-width:0}
.gvg-lado h4{margin:0 0 8px;color:#ffb84d;font-size:.9rem}.gvg-lado h4 span{display:block;color:#8f97aa;font-size:.7rem;font-weight:500}
.gvg-lado-eles{border-color:rgba(255,110,110,.25)}
.gvg-defensores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.gvg-def{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.035)}
.gvg-def.gvg-eu{background:rgba(255,184,77,.1)}.gvg-def.zerado{opacity:.55}
.gvg-def-pos{color:#8f97aa;font-size:.72rem}.gvg-def-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;color:#e4e6ec}
.gvg-def-nome small{display:block;color:#8f97aa;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gvg-def-estrelas{color:#ffd56a;letter-spacing:1px;font-size:.9rem}.gvg-def-ataques{color:#8f97aa;font-size:.68rem;white-space:nowrap}
.gvg-atacar{padding:6px 10px;border-radius:6px;border:1px solid #ff8a5c;background:rgba(255,110,60,.18);color:#ffd2bf;font-size:.72rem;font-weight:700;letter-spacing:.05em;min-height:32px}
.gvg-feed{list-style:none;margin:0;padding:0;font-size:.78rem;color:#cfd3dc;display:flex;flex-direction:column;gap:3px}
.gvg-ataque-fundo{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72)}
.gvg-ataque{width:min(460px,100%);max-height:90dvh;overflow:auto;padding:16px;border-radius:12px;background:#15110b;border:1px solid rgba(255,184,77,.45);color:#e4e6ec}
.gvg-ataque h3{margin:0 0 4px;color:#ffd56a}.gvg-ataque p{font-size:.85rem;margin:6px 0}.gvg-ataque small{color:#8f97aa;font-size:.72rem}
.gvg-ataque-opcoes{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.gvg-ataque-opcoes button{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e4e6ec;text-align:left}
.gvg-ataque-opcoes button.ativa{border-color:#ffb84d;background:rgba(255,184,77,.14)}
.gvg-ataque-opcoes b{color:#ffd56a}.gvg-ataque-opcoes em{font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.05em}
.prog-favoravel{color:#8ff0a0}.prog-equilibrado{color:#ffd56a}.prog-arriscado{color:#ffae70}.prog-improvavel{color:#ff8a80}
.gvg-luta{width:min(900px,100%);max-height:94dvh;overflow:auto;padding:12px;border-radius:12px;background:#0d0b08;border:1px solid rgba(255,184,77,.35);display:flex;flex-direction:column;gap:10px;align-items:center}
.gvg-visualizador{position:relative;width:100%}.gvg-luta-resultado{margin:0;color:#ffd56a;font-weight:700}
@media (max-width:767px){.gvg-abas{display:flex}.gvg-guerra{grid-template-columns:1fr}.gvg-guerra[data-aba="nos"] .gvg-lado-eles,.gvg-guerra[data-aba="eles"] .gvg-lado-nos{display:none}}
/* GOLDEN LADDER (Fase 101): o selo de poder estimado em cima do golden que nasceu na horda. */
.golden-horda-selo{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;padding:3px 8px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:#ffe9a8;background:rgba(40,28,6,.86);border:1px solid rgba(255,200,90,.6);box-shadow:0 0 10px rgba(255,190,60,.35)}
.golden-horda-selo[data-viavel="0"]{color:#ffc4bd;border-color:rgba(255,110,90,.65)}
.golden-horda-selo[hidden]{display:none}
/* O BALÃO DE AVISO (Fase 136): nem FALHA (nada falhou) nem CONFIRMADO (nada
foi feito). É a recusa que explica o porquê — a trava de viagem da Fase 134
era invisível para quem clicava no seletor. Âmbar, entre o vermelho da falha
e o verde da confirmação. */
.action-feedback.aviso{border-color:rgba(214,168,74,.55)}
.action-feedback.aviso .action-feedback-copy>span{color:#f0c97a}
.action-feedback.aviso .action-feedback-icon{background:rgba(214,168,74,.16);color:#f4d99a}