/* ===================================================================== SELEÇÃO E CRIAÇÃO DE PERSONAGEM — fluxo inicial (27/09) --------------------------------------------------------------------- Pedido do autor: "MAGIC GLADIATOR e DARK LORD estão visualmente desalinhados; as caixas saltam para fora da composição". Medido em 1366x768 (antes): a arte do Gladiador começava 49 px acima da dos outros e a do Dark Lord 39 px, saindo pelo topo do card e por cima do título. CAUSA: cada card era uma coluna ancorada EMBAIXO (flex-end) com a altura do próprio texto. O aviso "🔒 Requer N Resets" ocupa 2 linhas (zona do nome 74 px contra 35 px) e a descrição do Gladiador é a maior (110 px contra 100): tudo o que vinha acima era empurrado para cima. Trocar um número só mudaria qual card fica torto no próximo texto. CORREÇÃO: os cinco cards dividem as MESMAS três linhas da grade (`subgrid`): arte / nome / descrição+botão. A linha do nome tem a altura do MAIOR nome, igual para todos; a arte fica com o que sobra, e os heróis pisam na mesma linha — com qualquer texto, bloqueado ou não. Também aqui: - Escolha de classe e tela do nome usam a mesma janela de tela cheia da lista (Fase 102): o título não pula de lugar entre as três telas e a subida calibrada da fileira (Editor V3, selecao:fileira) não joga os cards por cima dele. - A lista de personagens fica em uma fileira de 4 em toda tela larga (em 1024x768 virava 2x2 e o herói de cima batia no título). - Celular / janela estreita: a escolha de classe herdava 6 colunas em 390 px (tudo sobreposto). Vira uma lista, arte ao lado do texto. - Tela do nome: o card ficava preso na 1ª coluna, à esquerda; centraliza. A calibração do autor (visual-config / Editor) não é tocada. ===================================================================== */ /* ---- Tela larga: a mesma medida da Fase 102 (styles/ui-scale.css) ---- */ @media (min-width:901px) and (min-height:540px){ #profileModal:is([data-selecao-modo="classPick"],[data-selecao-modo="nameEntry"]){align-items:stretch!important} #profileModal:is([data-selecao-modo="classPick"],[data-selecao-modo="nameEntry"]) .profile-modal-card{ height:100dvh!important;max-height:100dvh!important;justify-content:flex-start!important; padding-top:14px!important;padding-bottom:0!important;overflow:visible!important} #profileModal:is([data-selecao-modo="classPick"],[data-selecao-modo="nameEntry"]) .profile-modal-card>.modal-title-row{margin-top:0!important} #profileModal:is([data-selecao-modo="classPick"],[data-selecao-modo="nameEntry"]) .profile-cards{overflow:visible!important;padding-bottom:0!important} #profileModal[data-selecao-modo="slots"] #profileCards{grid-template-columns:repeat(4,minmax(0,1fr))!important} /* As três linhas compartilhadas: arte / nome / descrição e botão, ancoradas embaixo (no chão do cenário). */ #profileCards:has(.profile-class-pick-card){grid-template-rows:auto auto auto!important;align-content:end!important} #profileCards .profile-class-pick-card{grid-row:1 / span 3!important;display:grid!important;grid-template-rows:subgrid!important; height:auto!important;min-height:0!important;row-gap:0!important} #profileCards .profile-class-pick-card>.profile-character-visual{grid-row:1;min-height:0!important;align-self:stretch} #profileCards .profile-class-pick-card>.profile-identity-zone{grid-row:2;align-self:stretch} /* O nome no TOPO da faixa (o aviso de bloqueio vem logo abaixo): os cinco nomes na mesma linha. */ #profileCards .profile-class-pick-card>.profile-identity-zone,#profileCards .profile-class-pick-card .profile-new-identity{display:flex!important;flex-direction:column!important;justify-content:flex-start!important} #profileCards .profile-class-pick-card>.profile-character-copy{grid-row:3} #profileCards:has(.profile-class-pick-card)>.profile-back-card{grid-row:3!important;align-self:end!important} #profileCards:has(.profile-name-entry-card){grid-template-columns:minmax(0,440px)!important;justify-content:center!important; grid-template-rows:auto!important;align-content:end!important;align-items:end!important} } /* ---- Janela estreita ou baixa: lista, arte ao lado do texto ---- */ @media not all and (min-width:901px) and (min-height:540px){ #profileCards:has(.profile-class-pick-card){grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))!important; grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;gap:10px!important;align-content:start!important; /* style.css (Fase 16x) limita a fileira a 100dvh-130px e os cards têm min-height:0: a grade ESPREMIA as 6 linhas em 108 px cada e o texto vazava. Com os cards em min-height:auto as linhas têm a altura do conteúdo e a lista ROLA por dentro (a janela corta o que passa). */ overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain} #profileCards .profile-class-pick-card{display:grid!important;grid-template-columns:minmax(92px,34%) minmax(0,1fr)!important; grid-template-rows:auto 1fr!important;grid-template-areas:"arte nome" "arte texto";column-gap:10px; height:auto!important;min-height:auto!important;padding:10px 10px 12px!important; border:1px solid rgba(104,112,124,.55)!important;border-radius:10px!important;background:rgba(9,13,20,.82)!important} #profileCards .profile-class-pick-card::after{display:none!important} #profileCards .profile-class-pick-card>.profile-character-visual{grid-area:arte;height:auto!important;min-height:0!important;max-height:none!important; display:flex!important;align-items:flex-end!important;justify-content:center!important} #profileCards .profile-class-pick-card .profile-icon{width:100%!important;height:150px!important;margin:0!important} #profileCards .profile-class-pick-card>.profile-identity-zone{grid-area:nome;padding:2px 0 4px!important;text-align:left!important} #profileCards .profile-class-pick-card .profile-new-identity{align-items:flex-start!important;text-align:left!important} #profileCards .profile-class-pick-card>.profile-character-copy{grid-area:texto;padding:0!important} #profileCards .profile-class-pick-card .profile-character-copy>p{min-height:0!important;text-align:left!important;font-size:13px!important;line-height:1.4!important} #profileCards .profile-class-pick-card .profile-class-name{display:block;text-align:left!important} #profileCards .profile-class-pick-card .profile-actions{justify-content:flex-start!important;margin-top:8px!important} #profileCards .profile-class-pick-card .profile-actions button{min-height:44px!important} #profileCards:has(.profile-class-pick-card)>.profile-back-card{grid-column:1 / -1!important;min-width:0!important;min-height:0!important;align-self:start!important} } /* Tela do nome: VOLTAR e CRIAR são as únicas ações da tela. A regra do Salão que só mostra as ações com o mouse em cima (pensada para 4 heróis lado a lado) deixava os dois apagados. */ #profileCards .profile-name-entry-card .profile-actions{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important} /* "Trocar personagem" abre a seleção POR CIMA do jogo: o chat do jogo continuava flutuando no canto da seleção. Some enquanto ela está aberta e volta sozinho ao fechar. */ body:has(#profileModal:not(.hidden)) #colChatPanel{display:none!important}