/* ===================================================================== m24-home-arrumada38 — organiza a home no celular. TESTE LOCAL. ⚠️ NADA É APAGADO. Nenhuma regra aqui usa display:none em conteúdo. O arquivo faz três coisas: 1. RECOLHE a matriz de 31 chips do 38-0 Mundo atrás de um botão 2. REORDENA blocos com `order` (CSS puro — o DOM não é tocado) 3. APERTA espaçamentos largos demais no celular Provado medindo os dois estados: 519 nós, 1578 caracteres e 26 clicáveis — idênticos com e sem este arquivo. ⚠️ SÓ `order`, NUNCA MOVER NÓ: a home é renderizada pelo React. Mover nó faz o React perder a referência e regravar por cima — a mesma armadilha do React #185. ⚠️ TUDO DENTRO DE @media (max-width:979px). Esse é o ponto de quebra do PRÓPRIO jogo: abaixo dele vale `.home-mgr-pitch-mobile-only` e o `.home-mgr-pitch-desktop-only` é escondido. Existem DOIS blocos pitch completos no DOM. Sem o escopo, o desktop recolheria o bloco dele sem ganhar o botão de abrir — ficaria sem saída. O QUE FOI MEDIDO (360px, home de quem já tem carreira): página .................. 2362px = 3,2 telas -> 1774px = 2,4 telas card 38-0 Mundo ......... 777px -> 210px └ matriz de chips ..... 615px, 31 chips em 3 grupos links espalhados em ..... 5 lugares -> agrupados no fim "Modo Online" ........... aparece 3x "Ver funções" ........... aparece 3x clicáveis ............... 26 (iguais nos dois) ===================================================================== */ @media (max-width: 979px) { /* ------------------------------------------------------------------- 1. A MATRIZ DO 38-0 MUNDO RECOLHE 615px de 31 chips (países, taças, recursos) que o visitante rola antes de entender o jogo. Fica a um toque — continua inteira no DOM. Cabeçalho, frase e o botão "Assinar" seguem à vista. ⚠️ `grid-template-rows: 0fr` NÃO serve: o bloco tem 3 filhos, então o 0fr zera só a PRIMEIRA linha e as outras viram `auto`. Medi: `rows: 0px 43px 72px` — recolhia 615px para 128px em vez de 0. `max-height` não depende da contagem de filhos. ------------------------------------------------------------------- */ /* ⚠️⚠️ FILHO DIRETO (`>`), e isto NÃO é detalhe. A classe `home-mgr-pitch-mundo-groups` é usada em DOIS cards: o do 38-0 Mundo E o do Modo Online. Com descendente solto eu recolhia também a lista do Online — que não tem botão para abrir. Conteúdo escondido sem volta é, na prática, conteúdo apagado. Medido: o pai do primeiro `.home-mgr-pitch-mundo-groups` é `.home-mgr-pitch-online`. */ .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .home-mgr-pitch-mundo-groups { max-height: 0; /* NÃO é none: o conteúdo fica no DOM */ overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .2s ease; } .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo.is-aberto38 > .home-mgr-pitch-mundo-groups { max-height: 1600px; /* medido: 615px aberto, com folga */ opacity: 1; } /* o botão entra no FIM do card; quem o põe no lugar certo é o `order`. ⚠️ TAMBÉM por filho direto, pelo mesmo motivo de cima: `order` solto cairia nos filhos do card do Online, que é grid, e eu estaria reordenando conteúdo de lá sem querer. O verify pegou isto. */ .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo { display: grid; } .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .home-mgr-pitch-mundo-head { order: 1; } .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .home-mgr-pitch-mundo-lead { order: 2; } .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .m24-home38-verlista { order: 3; } .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .home-mgr-pitch-mundo-groups { order: 4; } .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .home-mgr-pitch-mundo-assinar { order: 5; } /* ------------------------------------------------------------------- 2. UMA ORDEM DE LEITURA SÓ Hoje os links auxiliares ficam ENTRE as ações e o material de venda: ações → 82 Basquete → Google Play → Ver funções → Como jogar → venda Vira: ações → venda → (82 Basquete, Google Play, Ver funções, Como jogar) O visitante decide, depois entende, e só então vê o secundário. ------------------------------------------------------------------- */ .m24-home38 .intro-enter-wrap > .m24-home-cta-stack { order: 1; } /* ⚠️ O 82 Basquete vem LOGO DEPOIS das ações, antes do material de venda. Não é link de rodapé: é outro jogo da casa, e fica junto dos outros modos — do lado do Modo SAF, que é o vizinho certo. Pedido de 21/10: "é da mesma família, não quero ele escondido". */ .m24-home38 .intro-enter-wrap > a[href*="82basquete"] { order: 2; margin-top: 2px; } .m24-home38 .intro-enter-wrap > .home-mgr-pitch { order: 3; } .m24-home38 .intro-enter-wrap > .home-playstore-cta { order: 4; } .m24-home38 .intro-enter-wrap > .home-mgr-features-wrap { order: 5; margin-top: 0; } .m24-home38 .intro-enter-wrap > .home-howto-play-wrap { order: 6; margin-top: 0; } /* ------------------------------------------------------------------- 2b. MODO ONLINE SAI DA HOME (pedido de 21/10) ⚠️ ATENÇÃO, ISTO FECHA A ÚNICA PORTA. O Modo Online mora em `assets/m24-online-mode38.js` e a única entrada de jogador é este botão. Existe `window.__m24OnlineOpen38()`, mas só pelo console. Escondendo os três pontos abaixo, quem pagou não chega mais lá. Se a ideia for só tirar do caminho, dá para manter uma entrada discreta dentro de "Ajuda e guias" — é uma linha. São TRÊS pontos, não um: 1. o botão grande na pilha de ações (.m24ol-home-btn) 2. "Ver funções do Modo Online" (2º gatilho de funções) 3. o card dentro do bloco de venda (.home-mgr-pitch-online) ------------------------------------------------------------------- */ .m24-home38.m24-sem-online38 .home-mgr-features-trigger-online, .m24-home38.m24-sem-online38 .home-mgr-pitch-online { display: none !important; } /* ------------------------------------------------------------------- FÓRUM FORA DA HOME (pedido de 21/10: "já não é muito útil") ⚠️ TAMBÉM FECHA A ÚNICA PORTA. Medido: existe exatamente UM caminho para o Fórum na tela inteira — este botão. O arquivo `assets/m24-forum38.js` continua carregando e `__m24ForumOpen38()` continua existindo, mas só pelo console. Risco menor que o do Modo Online (é comunidade, não recurso pago), mas quem tiver post lá dentro perde o acesso. Volta tirando esta regra. O pontinho de não-lido (`home-forum-btn-dot38`) vai junto por ser filho, mas está citado para a asserção do verify conseguir vê-lo. ------------------------------------------------------------------- */ .m24-home38.m24-sem-forum38 .home-forum-btn38, .m24-home38.m24-sem-forum38 .home-forum-btn-dot38 { display: none !important; } /* ⚠️ O botão grande precisa de seletor longo. O CSS do jogo tem TRÊS regras `!important` em escalada mandando ele aparecer, a mais forte sendo `.m24-home-cta-stack > button.m24ol-home-btn.intro-primary-btn .home-manager-hero-btn` (0,4,1). Um `.m24ol-home-btn` (0,3,0) perde, mesmo com !important. Três regras escalando sobre o mesmo botão é sinal de que ele já sumiu antes e alguém forçou de volta — então aqui repito a especificidade inteira em vez de encurtar. */ .m24-home38.m24-sem-online38 .m24-home-cta-stack > button.m24ol-home-btn.intro-primary-btn.home-manager-hero-btn, .m24-home38.m24-sem-online38 .m24-home-cta-stack > .m24ol-home-btn { display: none !important; } /* ------------------------------------------------------------------- 2c. "RELATAR BUG" SÓ PARA QUEM TEM CONTA (pedido de 21/10) ⚠️ O preço disto: quem NÃO consegue entrar na conta também não consegue relatar que não consegue entrar. Dentro do jogo o relato continua existindo; some só na home, para quem está deslogado. A classe `m24-com-conta38` quem põe é o JS — CSS não lê localStorage. ------------------------------------------------------------------- */ .m24-home38:not(.m24-com-conta38) .home-bug-report-wrap { display: none !important; } /* ------------------------------------------------------------------- 3. RESPIRO: o celular não precisa dos vãos do desktop ------------------------------------------------------------------- */ .m24-home38 .intro-enter-wrap { gap: 7px; } .m24-home38 .m24-home-cta-stack { gap: 8px; } .m24-home38 .home-mgr-pitch-main { gap: 10px; } .m24-home38 .start-brand { gap: 4px; } /* ------------------------------------------------------------------- 4. HIERARQUIA: a ação principal tem de parecer a principal ⚠️ Sem trocar cor, fonte ou forma — o dono pediu o layout atual. Só altura, para os secundários pararem de competir. ------------------------------------------------------------------- */ .m24-home38 .m24-home-cta-stack > .intro-primary-btn:first-child { min-height: 62px; } } /* --------------------------------------------------------------------- "ENTRAR" E "CADASTRAR" SEPARADOS (pedido de 21/10) A pílula era "Entrar / Criar", um botão só. O rótulo virou "Entrar" (patch no bundle) e o JS acrescenta o "Cadastrar" ao lado. ⚠️ O JS usa appendChild, então o botão nasce no FIM da barra, depois do Fórum. É o `order` abaixo que o põe ao lado do "Entrar". --------------------------------------------------------------------- */ .m24-home38 .home-hero-toolbar > .home-hero-account-btn { order: 1; } .m24-home38 .home-hero-toolbar > .m24-home38-cadastrar { order: 2; } .m24-home38 .home-hero-toolbar > .home-forum-btn38 { order: 3; } .m24-home38 .home-hero-toolbar > .m24-refresh-mini38 { order: 4; } /* mesma altura e mesma forma do "Entrar" — é irmão dele, não um estranho. Fica secundário de propósito: entrar é o caminho de quem já joga. */ .m24-home38-cadastrar { min-height: 34px; padding: 0 12px; border: 1px solid rgba(15, 23, 42, .16); border-radius: 999px; background: transparent; color: #0f172a; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .m24-home38-cadastrar:hover { background: rgba(15, 23, 42, .05); } /* --------------------------------------------------------------------- MODO CADASTRO: quem clicou em "Cadastrar" vê o Cadastrar na frente. ⚠️ É a MESMA tela — não existe formulário separado. O que muda é qual botão lidera. Sem isto, clicar em "Cadastrar" levaria a uma tela cujo botão principal diz "Entrar", que é confuso para quem não tem conta. --------------------------------------------------------------------- */ /* ⚠️ A classe é `manager38-unlock-register-btn`. Eu tinha escrito `manager38-unlock-reg` porque li a lista de classes TRUNCADA em 40 caracteres e usei o pedaço como seletor. Nunca usar string cortada como seletor — não casa e falha calado. */ .m24-modo-cadastro38 .manager38-unlock-actions .manager38-unlock-register-btn { order: -1; background: #128841 !important; /* o mesmo verde acessível do ui-base */ border-color: #128841 !important; color: #fff !important; font-weight: 900 !important; } .m24-modo-cadastro38 .manager38-unlock-actions .manager38-start { background: transparent !important; background-image: none !important; border: 1px solid rgba(15, 23, 42, .18) !important; color: #0f172a !important; font-weight: 700 !important; } /* --------------------------------------------------------------------- O botão que abre a lista. Fora do @media porque o JS só o cria quando o card visível existe, e o `order` acima já o posiciona no celular. --------------------------------------------------------------------- */ .m24-home38-verlista { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid rgba(15, 23, 42, .14); border-radius: 10px; background: rgba(255, 255, 255, .72); color: #0f172a; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; } .m24-home38-verlista:hover { background: #fff; } .m24-home38-verlista .m24-home38-seta { font-size: .7rem; transition: transform .2s ease; } .home-mgr-pitch-mundo.is-aberto38 .m24-home38-verlista .m24-home38-seta { transform: rotate(180deg); } /* --------------------------------------------------------------------- O BOTÃO DE COMPARAR — SÓ NO TESTE LOCAL ⚠️ Não vai para produção. Serve para alternar entre a home de hoje e esta, na mesma tela, sem recarregar. --------------------------------------------------------------------- */ #m24-home38-switch { position: fixed; right: 10px; bottom: 10px; z-index: 99999; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(15, 23, 42, .2); border-radius: 999px; background: #0f172a; color: #fff; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, .3); } #m24-home38-switch b { font-weight: 900; } #m24-home38-switch .m24-home38-ponto { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } #m24-home38-switch.is-atual .m24-home38-ponto { background: #94a3b8; } /* --------------------------------------------------------------------- Movimento reduzido: quem pediu para o sistema não animar, não anima. O recolher continua funcionando — só deixa de ser animado. O CSS do jogo já respeita isso em 11 blocos; não vou ser a exceção. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .m24-home38 .home-mgr-pitch-mobile-only .home-mgr-pitch-mundo > .home-mgr-pitch-mundo-groups { transition: none; } .m24-home38-verlista .m24-home38-seta { transition: none; } }