/* * Tela do Bonus de recarga (/activity/RechargeBonus/) no tema AuroraPurple. * * ESCRITO DO ZERO PELA SEGUNDA VEZ, agora sobre pecas geradas UMA A UMA. A versao anterior saiu de uma * folha unica fatiada por deteccao de manchas, e o problema nao era o corte: era a PROPORCAO. A "linha" saia * 740x79 (9:1) para uma caixa que precisa de 2,5:1, entao ou esticava e borrava, ou cortava o texto. Nenhuma * regra de CSS conserta peca com proporcao errada - foi o que me custou tres reescritas. * * E como a tela de Convidar faz: ~20 arquivos separados, cada um pequeno, com UMA funcao, no tamanho exato * em que sera usado (bg-poster 783x818, treasure 126x138, bar-title 781x138, bg-amount 150x52...). O tema * nao tem UMA LINHA de CSS para aquela tela - ela e bonita porque cada arte ja nasceu certa. * * aurora37-rb-header.png 780x820 2,47:1 nao, 0,95:1 - a cena: arco, bau e os dois tigres * aurora37-rb-logo.png 740x278 logotipo desenhado "BONUS DE RECARGA" * aurora37-rb-titulo.png 780x285 barra ornamentada dos titulos de secao * aurora37-rb-degrau.png 730x296 painel de cada faixa de deposito * aurora37-rb-valor.png 320x109 placa atras do numero * * Cada `background-size` abaixo respeita a proporcao do arquivo: onde uso `100% 100%`, a caixa foi dimensionada * para cair na mesma proporcao da peca. Ainda faltam o bau, o botao, a moldura do painel e a quina. * * DUAS ANCORAS EM TUDO: `.theme-37` e o container da tela. As classes internas (`.main-content`, `.desc`, * `.row`, `.left`) tem nome generico e existem em varias outras telas - sem as duas, isto pintaria meio site. * E o container e `.recharge-bonus-container`: `.bg-image`, que parece o obvio, e o da tela da roda, e apontar * para ele nao aplica nada nem avisa nada. */ /* -------------------------------------------------------------------------------------------------- * Cena e largura * -------------------------------------------------------------------------------------------------- */ /* * 2026-09-16: a CENA da referencia do usuario (`aurora37-rb-cena.jpg`, 820x1457, 0,563:1 - o salao com * escadaria, bandeiroes, tochas e bauzinhos). Na referencia ela e o fundo da TELA INTEIRA, nao uma faixa * no topo, entao ela saiu do `.top-bg` e virou fundo do container. * * Salva em JPEG de proposito: nao tem alpha, e em PNG dava 1503 KB contra 213 KB - 7x. Unica peca da tela * em .jpg; todas as outras precisam de alpha e continuam .png. * * A cena tem 177,7% da largura da coluna do app em altura (1457/820). O gradiente que a dissolve no rodape * saiu do `background` e virou um `::before` com `aspect-ratio` - ver a nota na propria regra. Ele tem * exatamente essa altura: ele segura o fundo limpo ate 55% e so entao dissolve no #15042f, para a cena nao * cortar seco onde a imagem acaba. */ /* -------------------------------------------------------------------------------------------------- * A FONTE * * O app inteiro usa **Prompt** (Google Fonts, `@import` na linha 1 de `index-Cl834OsA.css`). * * 2026-09-16 (madrugada): a fonte desta tela era **Baloo 2** e estava ERRADA. Comparando o letreiro * "DE BONUS DISPONIVEL" da referencia com as candidatas na resolucao NATIVA dela (941px, caixa alta de * 19px, linha de 328px de largura), normalizando todas pela mesma caixa alta: * * Poppins 700 296px Prompt 700 299px Figtree 800 304px * Poppins 800 299px Prompt 800 300px Baloo 2 800 311px * Rubik 800 315px Nunito 900 318px Mulish 900 319px * Archivo 800 333px **Montserrat 800 339px** * * Mas o que decide nao e so a largura: a referencia tem uma **grotesca geometrica** de terminais RETOS e * contraformas amplas - "O" quase circular, "D" largo, "S" aberto. A Baloo 2 e o oposto disso: arredondada, * de caixa alta baixa e formas gordas, e por isso a linha saia curta e "mole" mesmo no peso 800 (o eixo de * peso da Baloo 2 quase nao muda a largura: "80%" mede 192,4 no peso 400 e 196,5 no 800). * * **Montserrat** e a que bate em forma e ritmo. Os 3,3 por cento que ela passa da referencia saem com * `letter-spacing: -.02em` na legenda. * * A caixa alta da Montserrat e 0,701em contra 0,629em da Baloo 2, entao TODOS os corpos desta tela foram * multiplicados por **0,897** ao trocar - senao o texto cresceria 11 por cento de uma vez. * * AUTO-HOSPEDADA de proposito, e nao por CDN como o resto: e fonte VARIAVEL, entao um arquivo por subset * cobre 400 a 900 (latin 37 KB + latin-ext 69 KB). Assim nao depende do Google no ar, nao entra na cascata * de `@import` que bloqueia a renderizacao, e continua 100% editavel aqui. * `latin-ext` e obrigatorio: e ele que traz os acentos do portugues. * * Escopo: SO esta tela, sob `.theme-37`. O resto da plataforma segue em Prompt. * -------------------------------------------------------------------------------------------------- */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .theme-37 .recharge-bonus-container, .theme-37 .recharge-bonus-container *:not([class*="icon"]):not(ion-icon):not(ion-icon *) { font-family: "Montserrat", Prompt, -apple-system, Roboto, sans-serif !important; } .theme-37 .recharge-bonus-container { /* * O gradiente saiu daqui e virou o `::before` logo abaixo. Ele precisa ter a MESMA altura da cena, que e * 177,7% da largura da COLUNA DO APP - e `vw` mede a janela inteira. No computador a coluna tem 486px * dentro de uma janela de 1440, entao `177.7vw` dava 2559px e o escurecimento do pe nunca chegava. * `aspect-ratio` num pseudo-elemento resolve sem depender da largura da janela. */ background: url("/assets/aurora37-rb-cena.jpg") top center / 100% auto no-repeat, #15042f; min-height: 100%; overflow-x: hidden; position: relative; } .theme-37 .recharge-bonus-container::before { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 820 / 1457; /* a mesma proporcao da cena */ background: linear-gradient(180deg, rgba(21, 4, 47, 0) 0%, rgba(21, 4, 47, 0) 55%, rgba(21, 4, 47, .80) 84%, #15042f 100%); pointer-events: none; z-index: 0; } /* A cena antiga (tigres) foi substituida pela da referencia, que agora e o fundo do container. */ .theme-37 .recharge-bonus-container .top-bg { display: none !important; } /* `.main-content` mede 449px num viewport de 375: largura fixa herdada do bundle. */ .theme-37 .recharge-bonus-content, .theme-37 .recharge-bonus-content .main-content, .theme-37 .recharge-bonus-content .desc2, .theme-37 .recharge-bonus-content .max-reward-amount-text, .theme-37 .recharge-bonus-content .reward-info-container, .theme-37 .recharge-bonus-content .reward-info-container .top, .theme-37 .recharge-bonus-content .reward-info-container .row, .theme-37 .recharge-bonus-content .recharge-item-container, .theme-37 .recharge-bonus-content .recharge-item-container * { max-width: 100%; box-sizing: border-box; } .theme-37 .recharge-bonus-content .main-content { width: 100%; padding-left: .75rem; padding-right: .75rem; } /* * A cena antiga (`aurora37-rb-header.png`, 780x810, os tigres) saiu quando a cena da referencia virou fundo * do container. O `.top-bg` recebeu `display: none` la em cima; o bloco que o pintava aqui ficou INERTE e foi * removido - ele so segurava 1079 KB de arte morta viva no repositorio. * O arquivo `aurora37-rb-header.png` continua em disco e agora e ORFAO. Apagar e decisao do usuario. */ .theme-37 .recharge-bonus-content { background: none; color: #fff; padding-top: 0; padding-bottom: 1.5rem; position: relative; } /* * O LOGOTIPO DESENHADO. E isto que a Mina Misteriosa tem e esta tela nao tinha: um nome de promocao * desenhado, e nao texto do app com sombra. Nao ha elemento livre no componente para recebe-lo, entao entra * como pseudo-elemento do proprio conteudo, entre a cena e a chamada. * * 2026-09-16: peca nova do usuario (820x578, 1,42:1), com alpha limpo. Ela NAO e so o nome: traz o bau * transbordando, moedas no ar e as folhas de louro. Por isso deixou de vir DEPOIS da cena e passou a vir * POR CIMA dela (margin-top 3.6rem em vez de 15.2rem) - senao ficavam dois baus na mesma tela, o da cena * e o do logotipo. A cena antiga (`top-bg`) continua atras, valendo como salao de fundo ate chegar a peca * de cenario definitiva. */ .theme-37 .recharge-bonus-content::before { content: ""; display: block; /* * 2026-09-16 (noite): medido contra a referencia com as duas telas na mesma escala (375px). La o letreiro * "BONUS DE RECARGA" ocupa y 78..135, ou seja 57px de altura, e o conjunto todo (bau + louros + letreiro) * cabe em ~130px. Nesta arte o letreiro vai de 0,50 a 0,85 da altura do arquivo, entao para ele fechar * em 57px a peca inteira tem de medir ~163px de alto = 231px de largura = 62% da tela. Estava em 86%, * o que dava 227px de altura e sozinho empurrava tudo o que vem abaixo em ~100px. */ width: 62%; aspect-ratio: 820 / 578; /* a proporcao do arquivo, sem depender do rem */ height: auto; margin: 0 auto -.35rem; /* * NAO usar `rem` na largura: o app recalcula o tamanho do rem conforme a largura da janela (aqui ele * pulou de 15,38px para 19,94px), e 19.5rem virou 388px dentro de um container de 375px - o `auto` * lateral entao virou margem NEGATIVA e o logotipo vazou. Porcentagem + `aspect-ratio` nao tem esse risco. */ background: url("/assets/aurora37-rb-logo.png") center / contain no-repeat; filter: drop-shadow(0 .35rem .8rem rgba(0, 0, 0, .6)); pointer-events: none; } /* * O bundle pinta `.desc2` de PRETO TRANSLUCIDO com `!important` (rgba(0,0,0,.6)), igual a `.row-text` e * `.desc-text2`: feito para o cartao branco do tema claro, sobre a cena escura some. Cor E margem desses so * mudam com `!important` tambem. */ /* * Comparado com a referencia lado a lado: ali a chamada e BRANCA E BOLD, com um halo roxo por tras que a * descola da escadaria. Estava em peso 400 e lavanda #cbb5f5, e sumia no fundo. O halo e feito com tres * `text-shadow` roxos empilhados (nao um so): um sozinho fica duro de um lado. */ .theme-37 .recharge-bonus-content .desc2 { color: #ffffff !important; margin-top: 0 !important; margin-bottom: 0 !important; /* medido na referencia: duas linhas, a primeira com 217px de largura e a segunda com 152px, e a mancha das duas juntas em ~20px. Com a Montserrat (mais larga que a Baloo 2) a caixa precisa de mais espaco, senao quebra em TRES linhas e empurra a placa 11px para baixo. */ font-size: 0.66rem !important; font-weight: 700 !important; /* sem `!important` o bundle mantem 1,75 de entrelinha: 46,2px nas duas linhas contra 33 da referencia */ line-height: 1.3 !important; max-width: 13.7rem; /* estreito o bastante para a linha 1 fechar em "mais", como na referencia */ margin-left: auto; margin-right: auto; position: relative; z-index: 2; /* * A referencia tem CONTORNO SOLIDO roxo no glifo; so `text-shadow` borrado nao chega la. O `-webkit-text-stroke` * engrossa a letra para dentro, entao vem junto com `paint-order: stroke fill`, que desenha o traco ANTES do * preenchimento e devolve a forma original da letra. Sem isso o texto fica gordo e fecha os contraformas. */ -webkit-text-stroke: .09rem #3d1180; paint-order: stroke fill; text-shadow: 0 0 .5rem rgba(76, 26, 150, .95), 0 0 1rem rgba(46, 12, 96, .9), 0 .12rem .25rem rgba(10, 2, 26, .85); } /* * A PLACA DO "ATE X%". Peca gerada a partir da referencia do usuario, mas VAZIA de proposito: na arte dele o * `80%` vinha queimado no pixel, e esse numero e dinamico (sai da configuracao da promocao). Aqui a placa e * so fundo e o texto continua sendo HTML - trocar o percentual no painel nao desencontra a arte. * * O DOM e `Ate 80%
de Bonus * Disponivel`. Por causa do `
`, flex/grid nesta caixa bagunca as linhas, entao ela continua * `display: block` e a centragem vertical e feita com `padding` em % (que se mede pela LARGURA, nao pela * altura - por isso os numeros nao sao intuitivos). * * MEDIDO NA REFERENCIA (`docs/referencia/recarga-mockup-referencia.png`, 941x1672, k = 375/941 = 0,3985): * a placa ocupa x 202..738 e y 478..643, ou seja 537x166 na arte = **214,0 x 66,2 px** numa tela de 375. * Proporcao 3,235:1. Ela e NOTAVELMENTE mais estreita que o painel do resumo logo abaixo (860 na arte = * 342,7 px), e nao da largura da tela como parecia. A arte tem 3% de margem transparente em cima e embaixo * e quase nenhuma nos lados, entao o canvas (760x274) precisa de 214,8 px para o desenho fechar em 214,0. */ .theme-37 .recharge-bonus-content .max-reward-amount-text { display: block; /* * `%` e nao `vw`: `vw` mede a JANELA, e no computador a coluna do app tem 486px dentro de uma janela de * 1440. Os pais desta tela escalam todos na mesma proporcao (375 -> 486, fator 1,296), entao a * porcentagem do pai da o mesmo resultado no celular e no computador. */ width: 57.3% !important; /* o bundle forca 323px aqui; sem `!important` ele vence */ max-width: 100%; aspect-ratio: 760 / 274; height: auto !important; box-sizing: border-box; /* a placa encosta na chamada: na referencia ela comeca em y=190,5 e a chamada acaba em 193 */ margin: -.24% auto 0 !important; /* sem `!important` o bundle zera a margem negativa */ /* * ARMADILHA: `padding` em % NAO se mede pela largura desta caixa, e sim pela do CONTAINER (375px aqui). * Com `11.5%` sobravam 128px de linha util numa placa de 215px e "ATE 80%" quebrava em duas linhas sem * dar nenhum sinal - a placa continuava fechando 77px porque a altura vem do `aspect-ratio`, e o texto * so vazava por cima. Em `vw` o numero e o que parece: 1vw = 3,75px numa tela de 375. * 6,5vw = 24,4px de cada lado deixam exatamente os 166,2px de vao interno que a referencia tem. */ padding: 4.08% 6.5% 0; /* o bundle pinta esta caixa com um gradiente rosa e forca 1.5rem: sem `!important` ele vence */ background: url("/assets/aurora37-rb-placa-pct.png") center / contain no-repeat !important; /* "ATE" na referencia tem 44px de arte de mancha (com o acento) = 17,5px de tela */ font-size: 1.1392rem !important; /* entrelinha ZERO: assim cada linha mede exatamente a caixa do seu proprio texto, e nao o "strut" da fonte do pai, que somava ~22px invisiveis na segunda linha e estourava a placa */ line-height: 0 !important; letter-spacing: 0; text-transform: uppercase; text-align: center; color: #efe6ff !important; /* * ARMADILHA CARA: o bundle poe `-webkit-text-stroke-width: 1.6px` BRANCO nesta caixa * (`.new-skin-symbol ... .max-reward-amount-text[data-v-177ec7d0]`), e `-webkit-text-stroke` **e * herdado**. Ou seja, ele caia no "80%" e na legenda tambem. Num numero de 48px um traco branco de * 1,6px come o miolo inteiro: o "80%" aparecia VAZADO, so contorno claro e centro escuro, e por muito * tempo isso passou por "o degrade nao pegou". Zerar aqui conserta as tres linhas de uma vez. */ -webkit-text-stroke: 0 !important; /* * ...e o mesmo seletor do bundle poe `-webkit-text-fill-color: transparent` com `background-clip: text`, * que TAMBEM e herdado. "ATE" e um no de texto solto: sem cor de preenchimento propria ele sumia de vez * assim que o traco branco saiu. */ -webkit-text-fill-color: #efe6ff !important; position: relative; z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .9); } /* * "ATE". Na referencia ele NAO e branco chapado: tem degrade de branco no alto para lilas embaixo, contorno * roxo quase preto e peso maior que o do resto. Amostrado na perna do "A" (arte de 941px): * y 61 (253,254,251) -> y 70 (229,214,253) -> y 82 (202,161,239), e o contorno em (24,4,51). * Precisa de elemento proprio para receber o degrade - o span vem de `useRechargeBonus.ts`. */ .theme-37 .recharge-bonus-content .max-reward-ate { display: inline-block; /* * ARMADILHA: o pai tem `line-height: 0` (e de proposito, ver la em cima). Num `inline-block` isso zera a * ALTURA DA CAIXA, e sem area o `background-clip: text` nao tem degrade para recortar - o "ATE" some da * tela sem erro nenhum. Entrelinha propria resolve. A legenda ja tinha a dela, por isso nunca sumiu. */ line-height: 1; font-weight: 900; background: linear-gradient(180deg, #F3EAF9 0%, #FDFEFB 14%, #EEE2FD 34%, #DCC7FA 66%, #CAA1EF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* contorno por `drop-shadow` e nao por `-webkit-text-stroke`: ver a armadilha no cabecalho da placa */ filter: drop-shadow(1px 0 0 #1E0540) drop-shadow(-1px 0 0 #1E0540) drop-shadow(0 1px 0 #1E0540) drop-shadow(0 -1px 0 #1E0540) drop-shadow(0 2px 3px rgba(10, 1, 28, .9)); text-shadow: none !important; /* idem: sombra sobre preenchimento transparente escurece o glifo */ } .theme-37 .recharge-bonus-content .max-reward-amount { display: inline; /* na referencia "80%" tem 78px de arte de mancha = 31,1px de tela, e 216px de largura = 86,1px */ font-size: 2.5744rem; /* na referencia os algarismos sao mais gordos que o 800: contraformas pequenas e ovais */ font-weight: 900; line-height: 1; /* o .055em do pai vale 2,4px por algarismo neste corpo e passava "80%" de 86 para 94px */ letter-spacing: normal; margin: 0 0 0 .27em; /* o vao entre "ATE" e o numero mede 8px na referencia; a folga lateral do glifo come parte da margem, entao .212em (8,4px) so rendia 6 na tela */ /* * Na referencia o numero grande NAO se apoia na mesma linha de base de "ATE": os dois ficam centrados um * no outro, e por isso o "80%" desce 8,3px (0,188 do proprio corpo) alem da linha de base. */ vertical-align: -.188em; /* * Cores amostradas na referencia, coluna a coluna dentro do traco do "8" (arte 941px): * topo (254,240,172) -> meio (253,196,51) -> base (250,142,21), e o contorno em (149,10,17). * O degrade antigo (#FFF3B0 -> #F5C542 -> #D68A0A) sem contorno nenhum deixava o numero com cara de * VAZADO: o miolo claro sumia no fundo roxo e so a sombra aparecia. O contorno e o que da corpo. */ background: linear-gradient(180deg, #FEF0AC 0%, #FDEE80 26%, #FDC433 56%, #FA8E1B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* * ARMADILHA: `-webkit-text-stroke` NAO combina com `background-clip: text`. O degrade e pintado ATRAS do * glifo e recortado por ele, enquanto o traco e desenhado como parte do glifo - resultado, o traco cobre * o degrade e o numero fica marrom escuro, mesmo com `paint-order: stroke fill`. O contorno aqui sai de * quatro `drop-shadow` sem borrao, que agem sobre o texto JA recortado e por isso preservam o degrade. */ filter: drop-shadow(1px 0 0 #A4200D) drop-shadow(-1px 0 0 #A4200D) drop-shadow(0 1px 0 #A4200D) drop-shadow(0 -1px 0 #A4200D) drop-shadow(0 2px 3px rgba(52, 4, 6, .9)); /* * ARMADILHA IRMA DA DE CIMA: o `text-shadow` do pai (preto a 90%) e herdado, e sobre um texto de * preenchimento TRANSPARENTE o Chrome desenha a sombra com a forma do glifo por cima do degrade * recortado - o "80%" saia oliva escuro, como se o degrade estivesse errado. Nao estava. */ text-shadow: none !important; } /* * A SEGUNDA LINHA DA PLACA. Antes era um no de texto solto depois do `
` - sem elemento, nenhum seletor * chegava nela, e ela herdava o corpo de "ATE". Na referencia ela e bem menor e creme/dourada, enquanto * "ATE" e branca arroxeada. O span vem de `useRechargeBonus.ts`. * * Medido na referencia: cabeca de letra de 17px de arte = 6,8px de tela (fonte ~0,62rem) e a linha inteira * ocupa 335px de arte = 133,5px de tela. */ .theme-37 .recharge-bonus-content .max-reward-legend { display: inline-block; /* alvo: a linha toda com 130,7px, como na referencia (328px na arte de 941) */ font-size: .7rem; font-weight: 800; line-height: 1; /* a fonte da referencia e bem mais larga que a Baloo 2: as duas linhas tem a MESMA largura la (327px de arte = 130,3px de tela). Sem este espacamento a linha 2 fecharia em 83px. */ /* a Montserrat ja tem a largura da referencia: com ela a linha fecha em 339 contra 328, entao o espacamento e NEGATIVO. Com a Baloo 2 era preciso +.29em para chegar perto, o que espalhava as letras e deixava a linha com outra cara. */ letter-spacing: -.02em; margin-right: .02em; /* * ARMADILHA DOS ACENTOS: com `background-clip: text`, so o que cai DENTRO da caixa de fundo e pintado. * Numa caixa de `line-height: 1` o circunflexo de "BONUS" e o agudo de "DISPONIVEL" ficam ACIMA dela e * somem - a linha aparece como "DE BONUS DISPONIVEL", e parece erro de fonte ou de subset. O `padding` * vertical estica a caixa de fundo (o fundo cobre a padding-box) e a `margin` negativa devolve o layout. */ padding: .4em 0; margin-top: -.4em; margin-bottom: -.4em; /* a linha 1 reserva a altura do corpo de 2,87rem; sem isto a linha 2 cai 6,5px abaixo do lugar */ position: relative; top: -.408em; /* em `vw` isto encolhia no computador; `em` do proprio corpo escala junto com o texto */ background: linear-gradient(180deg, #FFFFFF 0%, #FFF3DC 45%, #F3CE93 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* mesmo contorno por `drop-shadow` do numero (ver a armadilha la em cima), so que mais leve */ filter: drop-shadow(.7px 0 0 #6E2410) drop-shadow(-.7px 0 0 #6E2410) drop-shadow(0 .7px 0 #6E2410) drop-shadow(0 -.7px 0 #6E2410) drop-shadow(0 1px 2px rgba(0, 0, 0, .75)); text-shadow: none !important; /* mesma razao do numero */ } /* -------------------------------------------------------------------------------------------------- * O painel central * * O que a Mina e o Bau de Indicacao tem e esta tela nao tinha: UM painel pousado sobre a cena, com todo o * conteudo dentro. Cartao solto empilhado da silhueta de lista, por mais bonita que seja cada linha. * * A moldura veio como `border-image` pede: miolo VAZADO, lados com padrao repetitivo e o ornamento so nos * quatro cantos. Sem miolo vazado a peca seria inutil aqui, porque `fill` pintaria o centro. * * 2026-09-16: peca REFEITA (900x871, alpha real, miolo medido em (0,0,0,0) - transparente mesmo; no * visualizador do gerador ele parece branco, que e so o fundo da pagina). Medido nesta peca: a barra lisa * da lateral tem 58px e o ornamento de canto vai ate ~240px no arquivo de origem (1159px de largura), * o que da slice 186 depois de reduzir para 900. A borda subiu de 15px para 20px: com 15px o ornamento de * canto era espremido em 15px e sumia, porque o `border-image` encaixa a fatia inteira na largura da borda. * -------------------------------------------------------------------------------------------------- */ /* * Medido na referencia (`docs/referencia/recarga-mockup-referencia.png`, 941x1672, k=0,3985 para 375px): * os paineis ocupam **91% da largura da tela** (341px de 375). Estavamos em 323px = 86%, porque o * `.main-content` somava margem propria + `padding: .75rem` herdado do bundle. Zerado os dois aqui, e a * largura passa a ser definida pelos paineis, um por um. */ .theme-37 .recharge-bonus-content > .main-content { background: none !important; border: 0; border-image: none; border-radius: 0; /* * o bundle poe 3,5625rem em cima e embaixo: 54,8px de vao entre a placa e o painel, contra 2,8 na * referencia. Sem `!important` ele vence. * * As laterais TEM de ficar em `auto`: escrever `0` nelas junto com o `!important` tirou a centragem que * vinha do bundle, e todos os paineis passaram a encostar na esquerda (x 2,4 contra 31 de sobra do lado * direito). Na referencia o painel e centrado, com 16px de folga de cada lado. */ margin: 0 auto 1rem !important; padding: 0 !important; box-shadow: none; position: relative; z-index: 1; } .theme-37 .recharge-bonus-content .reward-info-container, .theme-37 .recharge-bonus-content .recharge-item-container { width: 98.6%; /* 341,3 de 346,1 do `.main-content`; era 91vw, que no computador virava 100% */ max-width: 100%; margin-left: auto !important; margin-right: auto !important; } /* * 2026-09-16, virada de estrutura. Antes: UMA moldura gigante em volta de tudo (resumo + degraus + regras). * A referencia do usuario nao tem isso - nela o resumo e uma CAIXA EMOLDURADA propria e os degraus ficam * soltos sobre a cena, cada um com a sua moldura. Entao o painel externo perdeu a moldura e ela veio para ca. * * Reusa de proposito a MESMA peca do degrau (`aurora37-rb-degrau.png`, slice 34): na referencia o resumo e os * degraus tem exatamente o mesmo acabamento de ouro. Peca nova aqui so faria as duas molduras brigarem. */ .theme-37 .recharge-bonus-content .reward-info-container { /* a moldura da referencia tem ~4px de espessura; 7px somavam 6px de altura a toa nas duas pontas */ /* * 2026-09-17: o resumo NAO usa a moldura do degrau. Medido na referencia, na borda esquerda de cada um: * resumo x 40..41 de ouro (2px = 0,8 css), depois um filete violeta (137,71,229) e o miolo; * degrau x 42..57 de ouro (16px = 6,4 css), a moldura ornamentada inteira. * Reusar a peca do degrau aqui deixava o resumo com uma moldura oito vezes mais grossa que a da * referencia. Aqui e filete: 1px dourado por fora e 2px violeta por dentro. */ border: 1px solid #f2c88f; border-image: none; border-radius: .85rem; box-shadow: inset 0 0 0 2px #7b36f0; background: #2b1165 !important; /* (37,15,93)..(44,18,109), amostrado ENTRE as celulas na referencia */ background-clip: padding-box; margin: 0 0 .75rem; /* com a moldura fina o painel perdeu os 8px que a borda de 5px dava; o recuo devolve a altura de 119,6 */ padding: .27rem .4rem; height: auto !important; overflow: hidden; /* segura a `.line`, que vaza 6,1px por fora da moldura */ } .theme-37 .recharge-bonus-content .reward-info-container::before, .theme-37 .recharge-bonus-content .reward-info-container::after { display: none; } /* * O `.top` vinha com `padding: .625rem` DO BUNDLE - 9,6px em cima e embaixo, 19px de altura invisivel dentro * de um painel que precisa fechar em 120px. Sem `!important` o bundle vence (ver a armadilha 1 no topo). * Na referencia as duas linhas de celulas ficam a 8px uma da outra e colam na moldura. */ .theme-37 .recharge-bonus-content .reward-info-container .top { display: flex; flex-direction: column; gap: .52rem; padding: 0 !important; } /* * 2026-09-16: as QUATRO celulas do resumo viram caixas independentes com icone, como na referencia. * * O DOM do bundle e: `.top > .row > (.row-item + div)` - ou seja, DUAS linhas de DUAS celulas, e a segunda * celula de cada linha NAO tem classe. Por isso os seletores abaixo usam `:nth-child` em cima do `.row`, e * nao nomes de classe: nome nao existe para metade das celulas. * * Os icones sao `::before` de cada celula. Eles foram recortados da arte do usuario (o painel de status * veio inteiro, com os quatro icones ja dentro) e tiveram o roxo do fundo removido por distancia de cor. */ .theme-37 .recharge-bonus-content .reward-info-container .row { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 0; display: flex; gap: .3rem; color: #f4ecff; } /* * Comparado com a referencia: la o VALOR fica EMBAIXO do rotulo, nao ao lado, e o icone ocupa a altura das * duas linhas. Vira grade de 2 colunas x 2 linhas com o icone atravessando as duas. * * Tem de ser `grid` e nao `flex` por causa do DOM: na primeira celula o rotulo e um ``, mas na segunda * ("Bonus ") ele e um NO DE TEXTO solto. Em grid o no de texto vira item anonimo e cai na * celula certa sozinho; em flex nao da para posiciona-lo. */ .theme-37 .recharge-bonus-content .reward-info-container .row > * { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .45rem; row-gap: 0; /* * Medido contra a referencia (painel de 1403px reduzido para 323px, k = 0,2303): * - miolo: ref `#1D0A3D` OPACO, nao `rgba(...,.55)`; * - contorno: ref VIOLETA `#7B36F0`, nao ouro - o ouro aqui era invencao minha; * - as quatro celulas tem a MESMA altura na referencia; aqui saiam 42,1 / 46,9 / 50,8 / 55,6 porque a * altura vinha do conteudo. `min-height` + `align-items: center` iguala. */ background: #1d0a3d; border: 1px solid #7b36f0; border-radius: .7rem; /* * TENTATIVA REVERTIDA: `height: 2.35rem` fixo aqui PIOROU o painel (151 -> 182px), porque as celulas * ficaram mais altas e o aviso quebrou em mais linhas. Voltou para `min-height`. */ /* na referencia cada celula mede 30px de altura; aqui o corpo de .63rem em duas linhas da 22,3px */ padding: .3rem .35rem; margin-bottom: 0 !important; /* o bundle poe 4,8px aqui e vence sem `!important` */ min-height: 1.35rem; font-size: .46rem; /* "Deposito" ocupa 31,9px na referencia; a 0,5651rem saia com 39,1 */ line-height: 1.15; } .theme-37 .recharge-bonus-content .reward-info-container .row > *::before { content: ""; grid-column: 1; grid-row: 1 / span 2; /* o icone atravessa rotulo e valor */ width: 1.12rem; height: 1.12rem; background: center / contain no-repeat; } /* o valor vai para a segunda linha, sempre na coluna do texto */ /* * ACHADO SO VISIVEL LOGADO: o bundle pinta `.amount` de `rgb(99,0,168)` e `.amount-main` de laranja. O roxo * sobre o miolo `#1d0a3d` da **contraste 1,80:1** - o valor simplesmente some. Deslogado ninguem ve, porque * o texto e um "-". Precisa de `!important` e precisa pegar as DUAS classes. */ .theme-37 .recharge-bonus-content .reward-info-container .row > * > .amount, .theme-37 .recharge-bonus-content .reward-info-container .row > * > .amount-main { grid-column: 2; grid-row: 2; color: #ffd964 !important; font-weight: 700; font-size: 0.6279rem; } .theme-37 .recharge-bonus-content .reward-info-container .row:nth-child(1) > *:nth-child(1)::before { background-image: url("/assets/aurora37-rb-icone-deposito.png"); } .theme-37 .recharge-bonus-content .reward-info-container .row:nth-child(1) > *:nth-child(2)::before { background-image: url("/assets/aurora37-rb-icone-bonus.png"); } .theme-37 .recharge-bonus-content .reward-info-container .row:nth-child(2) > *:nth-child(1)::before { background-image: url("/assets/aurora37-rb-icone-resgatado.png"); } .theme-37 .recharge-bonus-content .reward-info-container .row:nth-child(2) > *:nth-child(2)::before { background-image: url("/assets/aurora37-rb-icone-hoje.png"); } .theme-37 .recharge-bonus-content .reward-info-container .desc { color: #b9a6e6; padding: 0; font-size: 0.5561rem; line-height: 1.35; display: flex; align-items: flex-start; gap: .5rem; /* * Na referencia o aviso mora em CAIXA ARREDONDADA propria, como as quatro celulas - nao solto embaixo * com uma risca por cima. Medido: 35,5 de altura equivalente contra 78,58 aqui (+121%). */ background: #1d0a3d; border: 1px solid #7b36f0; border-radius: .7rem; padding: .24rem .4rem; margin: .52rem 0 0; /* 8px, como a distancia entre as linhas de celulas na referencia */ } /* a risca do bundle nao existe na referencia, e era ela que vazava por fora da moldura */ .theme-37 .recharge-bonus-content .reward-info-container .line { display: none !important; } .theme-37 .recharge-bonus-content .reward-info-container .desc::before { content: ""; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .05rem; background: url("/assets/aurora37-rb-icone-aviso.png") center / contain no-repeat; } /* -------------------------------------------------------------------------------------------------- * Degraus * * 2026-09-16: peca REFEITA, gerada sob medida (880x193, 4,56:1, alpha real). Moldura medida no arquivo * final: 18/19/18/17 px - uniforme. Mas o slice NAO e 18: os cantos sao arredondados e a curva so termina * em ~30px, entao slice 18 esticaria a curva. Slice 34 cobre a curva inteira com folga. * Miolo roxo liso e vazio de proposito - quem escreve em cima e o HTML, com os valores da promocao. * * A peca so ficou usavel depois de recortada direito. `Image.getbbox()` corta pelo alpha > 0, e o glow em volta * da arte mantinha 44% da imagem em folga vazia: a moldura nunca encostava na borda da caixa e o rollover * parecia transbordar. Recortando pelo alpha > 45, a peca passou de 2,47:1 para 4,03:1 - ou seja, a proporcao * que eu vinha tentando casar com a caixa era a da FOLGA, nao a da arte. * -------------------------------------------------------------------------------------------------- */ .theme-37 .recharge-bonus-content .recharge-item-container { position: relative; z-index: 1; /* * A peca nova da moldura tem o miolo VAZADO (alpha 0), como `border-image` pede. Entao o fundo do degrau * tem de vir daqui - com `fill` a arte so pinta transparencia e a cena apareceria por tras. Cores * amostradas em pontos vazios do degrau 1 da referencia: (55,21,113) no alto, (78,46,139) no centro. */ background: radial-gradient(120% 150% at 50% 62%, #532694 0%, #3c1679 100%) !important; background-clip: padding-box; border: 7px solid transparent; /* * 2026-09-17: peca REFEITA a partir da propria referencia (o degrau 1 ocupa x 40..899, y 962..1228 na * arte de 941). A anterior era uma moldura LISA; a da referencia tem ornamento em cada canto e um filete * claro por dentro, e as laterais sao mais grossas que o topo (19 contra 11 na arte). * * `border-image-width` e OBRIGATORIO aqui: a fatia de 56px espremida nos 7px do `border-width` esmaga o * ornamento do canto ate ele sumir. Com 22px a fatia e encaixada nessa largura e o ouro sai em * 22 x 19/56 = 7,5px nas laterais e 22 x 11/56 = 4,3px em cima - exatamente a referencia. O layout * continua mandado pelo `border-width: 7px`; o que passa disso e o filete translucido, nao ouro. * A unidade `px` e obrigatoria: numero puro seria multiplicador do `border-width`. */ border-image: url("/assets/aurora37-rb-degrau.png") 56 fill round; border-image-width: 22px; border-radius: 0; box-shadow: none; height: auto !important; min-height: 0; /* * Medido na referencia: o degrau fecha em 94px (388..482) e o conteudo cola na moldura - 2px em cima, * 4px embaixo. Com borda de 7px + padding proprio saiam 10,4px de recuo so em cima. */ /* a moldura da referencia tem ~7px; com 3 ela praticamente sumia e o degrau virava um retangulo liso */ border-width: 7px; padding: 0 .3rem; margin-bottom: 1.22rem; /* na referencia sobram 18,7px entre um degrau e o outro */ } .theme-37 .recharge-bonus-content .recharge-item-container .main-content, .theme-37 .recharge-bonus-content .recharge-item-container .recharge-item-content-left, .theme-37 .recharge-bonus-content .recharge-item-container .left, .theme-37 .recharge-bonus-content .recharge-item-container .row-text { color: #f4ecff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .theme-37 .recharge-bonus-content .recharge-item-container .desc-text2 { color: #a892d9 !important; } /* * A placa do valor. Na referencia ela mede 30px de altura e fica CENTRADA ABAIXO do rotulo "Dep. Unica", * nao ao lado dele (ver a regra do `.row-text` logo abaixo). Antes fechava em 37,9px. */ .theme-37 .recharge-bonus-content .recharge-item-container .amount-text { display: inline-block; min-width: 6.87rem; /* 105,6px, como na referencia */ padding: .18rem .3rem; margin-left: 0; background: none; /* * 2026-09-17: peca REFEITA a partir da propria referencia (x 290..554, y 1019..1097 da arte de 941). A * anterior era um hexagono liso; a da referencia tem PONTAS RECORTADAS e ornamento nos cantos. O miolo * foi repintado com o fundo escuro de cada linha (percentil 15 da luminancia) para apagar o "R$ 100,00" * que vinha queimado no pixel - o valor e dinamico e continua sendo HTML. * Arquivo 640x191. As pontas ocupam 83px de cada lado e a moldura 30px em cima e embaixo: e esse o slice. */ border: 5px solid transparent; border-width: 5px 14px; border-image: url("/assets/aurora37-rb-valor.png") 30 83 fill round; color: #fff !important; font-weight: 700; font-size: .58rem !important; line-height: 1.35; text-align: center; white-space: nowrap; text-shadow: 0 2px 4px rgba(0, 0, 0, .65); } /* "Valor do bonus 10%": 13px de altura na referencia, contra 17,3 aqui */ /* mais um lugar onde o bundle so cede com `!important`: "Dep. Unica" saia com 62,9px contra 45,8 da referencia */ .theme-37 .recharge-bonus-content .recharge-item-container .row-text { font-size: .54rem !important; line-height: 1.15 !important; } .theme-37 .recharge-bonus-content .recharge-item-container .reward-text { color: #F5C542 !important; font-weight: 700; } /* * "Dep. Unica" EM CIMA da placa do valor, os dois centrados - e assim na referencia, e nao lado a lado. * O DOM e `Dep. Unica R$ 100,00`: texto solto + span. Em flex os dois * viram itens lado a lado (armadilha 3); em grid o no anonimo cai sozinho na primeira linha. */ .theme-37 .recharge-bonus-content .recharge-item-container .left { display: flex; flex-direction: column; align-items: center; } .theme-37 .recharge-bonus-content .recharge-item-container .row-text:first-child { display: grid; justify-items: center; row-gap: .1rem; font-size: .54rem !important; line-height: 1.15 !important; margin-bottom: .12rem !important; } /* Botao: slice 14 no topo/base e 34 nas laterais, medido nas pontas arredondadas da peca. */ .theme-37 .recharge-bonus-content .recharge-item-container .recharge-btn, .theme-37 .recharge-bonus-content .recharge-item-container .btn-base { background: none !important; /* * Peca refeita 2026-09-16 (760x160, alpha real). Moldura de ouro medida: 43/48/42/42px no arquivo de * origem, uniforme. Slice 30 porque a curva do canto so termina em x=24 na peca ja reduzida - com slice * na espessura da moldura (16) o canto arredondado esticava. * * Este botao NAO e de resgate: em `getButtonInfo` (useRechargeBonus.ts) o ramo SINGLE_DEPOSIT devolve * `recharge-btn` com o texto "Deposito", e `isShow` e o `checkUserHasLogin()`. Ou seja, ele so existe no * DOM para jogador LOGADO - deslogado o `v-if` some e nao ha o que estilizar. Nao e defeito. */ /* * 2026-09-17: peca REFEITA a partir da propria referencia (x 613..848, y 1018..1096 da arte de 941). A * anterior tinha moldura dourada GROSSA; a da referencia e fina, com um ornamento em cada canto. O * "Deposito" que vinha queimado no pixel foi apagado repintando o miolo com o rosa de cada linha. * Arquivo 560x187, moldura de ~14px: slice 34 cobre a moldura mais o ornamento do canto. */ border: 8px solid transparent !important; border-image: url("/assets/aurora37-rb-botao.png") 34 fill round !important; border-radius: 0 !important; box-shadow: none !important; color: #fff !important; font-weight: 700; font-size: .6rem !important; text-shadow: 0 2px 4px rgba(0, 0, 0, .45); min-width: 6.11rem; /* 94px, como na referencia */ min-height: 2.05rem; /* 31,5px */ padding: .25rem .35rem; white-space: nowrap; /* * O bundle deixa `line-height: 28,8px` neste botao. Quando a caixa encolheu para 28,7px de altura, a * linha de 28,8 passou a nao caber no vao interno (a moldura come 10px de cada lado) e o texto * "Deposito" caiu para FORA da peca rosa. Centrar por flex resolve e nao depende mais da entrelinha. */ display: flex; align-items: center; justify-content: center; line-height: 1 !important; margin-right: .5rem; /* na referencia sobram 19,3px ate a borda do degrau; sem isto sobravam 11,6 */ } /* * DOIS blocos dentro do item vem com fundo claro do bundle - `.main-content` (o componente tem um proprio, * alem do painel da tela) e `.recharge-item-content-left`, que estava em rgb(250,247,255). Era esse o * retangulo branco no meio do degrau desenhado: o texto ja era claro e correto, so estava POR CIMA do branco. */ .theme-37 .recharge-bonus-content .recharge-item-container .recharge-item-content-left, .theme-37 .recharge-bonus-content .recharge-item-container .main-content { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; width: auto; height: auto !important; min-height: 0 !important; } /* A faixa de rollover vive DENTRO da moldura desenhada. */ /* * A linha de rollover ("Apostas validas de N vezes..."). Na referencia ela e uma faixa propria, mais escura * que o degrau, com um DADO a esquerda. O dado entra como `::before`; o texto continua sendo HTML. * `align-items: flex-start` porque a linha quebra em duas e o dado tem de ficar junto da PRIMEIRA. */ .theme-37 .recharge-bonus-content .recharge-item-container .desc { /* cor amostrada na referencia dentro da faixa: (37,13,98) a (48,27,89) */ background: #2a135e; border-radius: .62rem; color: #c7b6ec; /* * Na referencia a faixa NAO e centrada no degrau: ela desvia do bau. Comeca a 25,4px da borda interna * esquerda e vai ate quase a direita (16,6px de folga la). Medido: x 172,7..857,5 na arte de 941. */ padding: .18rem .4rem; margin: .2rem 0 0 1.65rem; /* na referencia a primeira linha do rollover ocupa 162,2px; a 0,4844rem ela saia com 150,8 */ font-size: .52rem; line-height: 1.2; /* * Grid e nao flex, pela mesma razao das celulas do resumo: o conteudo e um NO DE TEXTO solto * ("Apostas validas de N vezes...") seguido de um ``. Em flex os dois viram * itens LADO A LADO e o texto quebra em duas colunas; em grid cada um cai na sua linha. */ /* * Em grid as DUAS linhas saiam com 16,73px cada mesmo com entrelinha de 9,64 - 33,5px para dois textos * que somam 19,3. Em bloco cada pedaco e uma linha de texto e a altura e a que se ve: 2 x 9,64 + recuo. * O dado sai do fluxo e vai a absoluto, que era a unica razao do grid. */ display: block; position: relative; /* * O dado e o texto comecam DEPOIS do bau. Na referencia o bau afina na base e o dado cabe ao lado dele * ja em 77,7px; a peca daqui e mais larga ali embaixo (o recorte trouxe mais moedas), entao o dado * precisa de mais recuo, senao fica escondido atras do bau. */ padding-left: 5.3rem; /* o bundle forca `height: 2.375rem` (36,5px) aqui: sem `!important` a faixa nunca encolhe */ height: auto !important; } .theme-37 .recharge-bonus-content .recharge-item-container .desc::before { content: ""; position: absolute; left: 3.9rem; top: 50%; transform: translateY(-50%); width: .95rem; height: .95rem; background: url("/assets/aurora37-rb-icone-dado.png") center / contain no-repeat; } .theme-37 .recharge-bonus-content .recharge-item-container .desc .desc-text2 { display: block; } /* -------------------------------------------------------------------------------------------------- * Titulo de secao * * A peca e 780x285 (2,74:1) - bem mais alta que a `bar-title` do Convidar (781x138). A caixa acompanha, senao * a folhagem das pontas achata. * -------------------------------------------------------------------------------------------------- */ /* * 2026-09-16: barra REFEITA (900x163, 5,52:1, alpha real). A anterior tinha folhagem verde nas pontas, que * nao existe na referencia do usuario - ali sao volutas de ouro com uma gema roxa em cada ponta, e a pilula * do meio e lisa e vazia. A peca nova segue isso e o texto continua sendo HTML dentro da pilula. * * Caixa em % + `aspect-ratio`, nunca em `rem`: o app recalcula o rem conforme a largura da janela (ver a * nota do logotipo). A antiga usava `height: 4.4rem` com `max-width: 15.5rem`, o que dava 3,5:1 para uma * arte de 5,52:1 - com `contain` a peca encolhia e sobrava buraco dos dois lados. * * O `padding` lateral de 17% e o espaco das duas volutas: sem ele o texto invade a gema. */ .theme-37 .recharge-bonus-content .ruleHeader { background: url("/assets/aurora37-rb-titulo.png") center / contain no-repeat; /* * 2026-09-16 (noite): REMEDIDO na referencia. A barra NAO ocupa a largura da tela: com as volutas ela * vai de x 200 a 740 na arte, ou seja **215px** numa tela de 375 - a mesma largura da placa do "ATE X%". * O 371x68 que estava aqui vinha de uma medicao errada. A peca tem 3px de margem transparente, entao a * caixa precisa de 215,5px para o desenho fechar em 215. */ /* 218,1 de 311,9 do vao interno da `.activity-rule-detail`. Era 58,16vw, que numa janela de 1440 dava 837px numa coluna de 486 - a barra saia inteira para fora da tela. Foi este o defeito do computador. */ width: 69.9%; max-width: 100%; /* peca refeita em 2026-09-17: folhas de louro nas pontas, como na referencia (a anterior tinha volutas com gema, que a referencia nao tem). 848x173, conteudo 836x163. */ aspect-ratio: 848 / 173; height: auto; box-sizing: border-box; padding: 0 15%; display: flex; align-items: center; justify-content: center; margin: 1.1rem auto .6rem; position: relative; z-index: 1; } .theme-37 .recharge-bonus-content .ruleHeader .span-cls { color: #fff !important; font-size: .6rem !important; /* na referencia "Regras do evento" ocupa 86,5px; sem `!important` o bundle vence */ white-space: nowrap; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); } /* O titulo tambem cai nas cores do tema claro: sem `!important` fica roxo escuro sobre painel roxo. */ .theme-37 .recharge-bonus-content .ruleHeader, .theme-37 .recharge-bonus-content .ruleHeader * { color: #fff !important; } /* * O corpo das regras nao estava com cor errada (ja era lavanda #cbb6ff): o problema e que ele caia DIRETO * sobre a cena, que e uma escadaria clara e cheia de moedas, sem nada atras. Texto de 12px sobre aquilo * some. Na referencia todo conteudo pousa sobre painel, entao aqui vai o mesmo: caixa escura translucida. * `backdrop-filter` desfoca a cena por tras, o que segura a legibilidade mesmo na parte mais clara dela. */ .theme-37 .recharge-bonus-content .ruleDetail, .theme-37 .recharge-bonus-content .activity-rule-detail { color: #ddd0ff !important; font-size: 0.7176rem; line-height: 1.6; position: relative; z-index: 1; /* * 2026-09-17: este painel era PRETO TRANSLUCIDO com `backdrop-filter`, feito para pousar sobre a cena. * So que a cena tem 177,7% da largura da coluna em altura - 666px no celular, 864px no computador - e o * conteudo desta tela passa de 1400px. Abaixo disso o fundo e `#15042f` puro, quase preto, e um painel * translucido escuro sobre preto vira um BLOCAO PRETO sem contorno, que e o que aparecia no computador * (onde a cena cobre proporcionalmente muito menos da tela). * * Agora ele usa o mesmo acabamento do painel do resumo: miolo roxo com filete dourado por fora e violeta * por dentro. Assim ele se le como painel em qualquer altura, com ou sem cena atras. */ background: #2b1165; border: 1px solid #f2c88f; box-shadow: inset 0 0 0 2px #7b36f0; border-radius: .85rem; padding: .85rem .9rem 1rem; margin: .2rem .15rem 0; } /* * O bundle pinta os filhos deste bloco de preto translucido com `!important` (mesma familia do `.desc2`, * `.row-text` e `.desc-text2`). Cor no pai nao basta: sem pegar os DESCENDENTES com `!important` tambem, * o texto das regras fica preto sobre o painel escuro e some. Foi exatamente o que aconteceu. * O `:not(.ruleHeader)` preserva o branco do titulo, que ja tem regra propria. */ .theme-37 .recharge-bonus-content .activity-rule-detail *:not(.ruleHeader):not(.ruleHeader *) { color: #ddd0ff !important; } /* * Dentro da `.ruleHeader` o bundle poe um `` com um SVG de 31x11 - duas barrinhas * diagonais, que sobre a pilula lisa aparecem como risco solto. A referencia tem ali um DOCUMENTO de ouro * com tres linhas - o mesmo desenho que a celula "Resgatado" do resumo ja usa, e que veio da mesma arte do * usuario. Entao o span do bundle vira a moldura do icone: o SVG some e a peca entra como fundo dele. * Medido na referencia: ~13x15px de tela. */ .theme-37 .recharge-bonus-content .ruleHeader .info-icon { display: inline-block !important; width: .92rem; height: .92rem; flex: 0 0 auto; margin-right: .42rem; background: url("/assets/aurora37-rb-icone-resgatado.png") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); } .theme-37 .recharge-bonus-content .ruleHeader .info-icon svg { display: none; } /* * O bundle poe DOIS `.info-icon`, um de cada lado do titulo. Na referencia o da direita e a SETA ">" que * abre as regras - desenho simples, feito com duas bordas giradas, sem peca nova. */ .theme-37 .recharge-bonus-content .ruleHeader .info-icon:last-child { width: .42rem; height: .42rem; margin: 0 .12rem 0 .45rem; background: none; border: .11rem solid #fff; border-left: 0; border-bottom: 0; transform: rotate(45deg); } /* a barra de titulo nao deve herdar o painel: ela fica POR CIMA, encavalada na borda de cima da caixa */ .theme-37 .recharge-bonus-content .activity-rule-detail .ruleHeader { /* na referencia a barra comeca 9px depois do ultimo degrau; -1.9rem a jogava POR CIMA dele */ margin-top: -1.51rem; margin-bottom: .6rem; } /* -------------------------------------------------------------------------------------------------- * Bau e quinas (pecas 6 e 9) * -------------------------------------------------------------------------------------------------- */ /* * O bau de cada degrau, como o `treasure` (126x138) faz em cada linha do Convidar. `pointer-events: none` * para nunca roubar o toque do botao ao lado. */ .theme-37 .recharge-bonus-content .recharge-item-container .recharge-item-content-left { position: relative; /* * Na referencia o bau (com as moedas em volta) mede 86,7 x 70,7 e vai de x 10 a 96,7 dentro do degrau. * A peca daqui tem proporcao 0,94 (mais alta que larga) contra 1,23 da referencia, entao ela nao cabe * nas duas medidas: a altura manda, porque o degrau tem 92px e um bau de 92,6 estouraria. */ /* * Na referencia a placa do valor fica centrada no VAO entre o bau e o botao (centro do vao em 160,4; * centro da placa em 152,2, relativo a borda esquerda do degrau). Com 4,5rem ela caia em 133,7 - quase * 20px a esquerda disso, encostada no bau. */ padding-left: 5.72rem !important; } /* * O bau pendurado no CARD, e nao no `.recharge-item-content-left`. Ancorado no conteudo, o `top: 50%` media * a altura da PRIMEIRA LINHA, entao o bau colava no topo do degrau (4,2px do topo contra 32 sobrando * embaixo) e parecia sair para fora. No card ele centra de verdade. * Medido na referencia, relativo a borda esquerda do degrau: o bau vai de 15,9 a 92,5 css (76,9 de largura) * e o centro dele fica 4px ACIMA do centro do degrau. */ .theme-37 .recharge-bonus-content .recharge-item-container::before { content: ""; position: absolute; left: 1.03rem; top: calc(50% - 4px); /* * 2026-09-17: peca REFEITA a partir da referencia (x 80..272, y 1001..1170 da arte de 941). A anterior * era outro desenho - bau frontal cheio de MOEDAS; o da referencia e de madeira, tampa inclinada para * tras, cheio de GEMAS roxas e rosa, com moedas espalhadas em volta. Medido la: 76,9 x 67,7 px, * proporcao 1,143 (a peca antiga tinha 0,93, mais "em pe" - era isso que nao batia). */ width: 5rem; /* 76,9px, como na referencia */ height: 4.375rem; /* 5rem / 1,143, a proporcao do arquivo */ transform: translateY(-50%); background: url("/assets/aurora37-rb-bau.png") center / contain no-repeat; pointer-events: none; z-index: 2; } /* * As duas quinas de baixo do painel, como o `agent-corner` (35x76) do Convidar: a da esquerda e a mesma peca * espelhada. Ficam FORA do painel, por isso o `overflow-x: hidden` la no container. */ .theme-37 .recharge-bonus-content > .main-content::before, .theme-37 .recharge-bonus-content > .main-content::after { content: ""; position: absolute; bottom: -1.1rem; width: 1.6rem; height: 3.52rem; /* 1.6rem / (70/154) */ background: url("/assets/aurora37-rb-quina.png") center / contain no-repeat; pointer-events: none; z-index: 2; } .theme-37 .recharge-bonus-content > .main-content::before { left: -.5rem; } .theme-37 .recharge-bonus-content > .main-content::after { right: -.5rem; transform: scaleX(-1); }