/* ========================================================= RECIFE DO RESTO — ROTA NORMAL Ajustes visuais específicos das tarefas da ilha ========================================================= */ /* ========================================================= 1. PALCO / ÁREA VISUAL Remove pontilhado e melhora tamanho das imagens ========================================================= */ #palco-objetos.palco-padrao[data-exercicio-codigo="lanche_praia"], #palco-objetos.palco-padrao[data-exercicio-codigo="estrelas_fugitivas"], #palco-objetos.palco-padrao[data-exercicio-codigo="barco_cores"], #palco-objetos.palco-padrao[data-exercicio-codigo="pe_pato_perdido"], #palco-objetos.palco-padrao[data-exercicio-codigo="bau_conchas"] { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; width: 100%; min-height: auto !important; margin: 6px auto 10px !important; padding: 0 !important; } #palco-objetos[data-exercicio-codigo="lanche_praia"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="estrelas_fugitivas"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="barco_cores"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="pe_pato_perdido"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="bau_conchas"] .area-visual-tarefa { width: min(100%, 380px) !important; max-width: 380px !important; min-height: auto !important; margin: 4px auto 8px !important; padding: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } #palco-objetos[data-exercicio-codigo="lanche_praia"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="estrelas_fugitivas"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="barco_cores"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="pe_pato_perdido"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="bau_conchas"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="lanche_praia"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="estrelas_fugitivas"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="barco_cores"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="pe_pato_perdido"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="bau_conchas"] .area-visual-tarefa::after { display: none !important; content: none !important; } #palco-objetos[data-exercicio-codigo="lanche_praia"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="estrelas_fugitivas"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="barco_cores"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="pe_pato_perdido"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bau_conchas"] .img-visual-tarefa { width: 100% !important; max-width: 375px !important; max-height: 275px !important; height: auto !important; display: block !important; margin: 0 auto !important; object-fit: contain !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 18px !important; } /* ========================================================= 2. BOTÕES — OPÇÕES CURTAS 2 colunas bem alinhadas ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_praia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_fugitivas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barco_cores"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="pe_pato_perdido"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_conchas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(320px, 86vw) !important; max-width: 320px !important; margin: 8px auto 16px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 14px !important; justify-content: center !important; align-items: center !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_praia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_fugitivas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barco_cores"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="pe_pato_perdido"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_conchas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero { width: 100% !important; min-width: 0 !important; height: 52px !important; min-height: 52px !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; } /* ========================================================= 3. AJUSTE FINO DA TELA ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_praia"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_fugitivas"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barco_cores"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="pe_pato_perdido"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_conchas"]) #instrucao { margin-bottom: 4px !important; line-height: 1.2 !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_praia"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_fugitivas"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barco_cores"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="pe_pato_perdido"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_conchas"]) #display-operacao { margin: 2px auto 6px !important; } /* ========================================================= 4. AJUSTE FINO MOBILE ========================================================= */ @media (max-width: 380px) { #palco-objetos[data-exercicio-codigo="lanche_praia"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="estrelas_fugitivas"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="barco_cores"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="pe_pato_perdido"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bau_conchas"] .img-visual-tarefa { max-width: 100% !important; max-height: 255px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_praia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_fugitivas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barco_cores"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="pe_pato_perdido"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_conchas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(300px, 84vw) !important; gap: 8px 12px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_praia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_fugitivas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barco_cores"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="pe_pato_perdido"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_conchas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero { height: 50px !important; min-height: 50px !important; font-size: 0.95rem !important; } } /* ========================================================= RECIFE DO RESTO — ROTA DESAFIO Ajustes visuais específicos das tarefas difíceis ========================================================= */ /* ========================================================= 1. PALCO / ÁREA VISUAL — ROTA DESAFIO ========================================================= */ #palco-objetos.palco-padrao[data-exercicio-codigo="rede_furada"], #palco-objetos.palco-padrao[data-exercicio-codigo="barris_no_recife"], #palco-objetos.palco-padrao[data-exercicio-codigo="estrelas_no_caminho"], #palco-objetos.palco-padrao[data-exercicio-codigo="conchas_do_siri"], #palco-objetos.palco-padrao[data-exercicio-codigo="caminho_das_pedras"] { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; width: 100%; min-height: auto !important; margin: 4px auto 8px !important; padding: 0 !important; } #palco-objetos[data-exercicio-codigo="rede_furada"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="barris_no_recife"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="estrelas_no_caminho"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="conchas_do_siri"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="caminho_das_pedras"] .area-visual-tarefa { width: min(100%, 385px) !important; max-width: 385px !important; min-height: auto !important; margin: 2px auto 8px !important; padding: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } #palco-objetos[data-exercicio-codigo="rede_furada"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="barris_no_recife"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="estrelas_no_caminho"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="conchas_do_siri"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="caminho_das_pedras"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="rede_furada"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="barris_no_recife"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="estrelas_no_caminho"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="conchas_do_siri"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="caminho_das_pedras"] .area-visual-tarefa::after { display: none !important; content: none !important; } #palco-objetos[data-exercicio-codigo="rede_furada"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="barris_no_recife"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="estrelas_no_caminho"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="conchas_do_siri"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="caminho_das_pedras"] .img-visual-tarefa { width: 100% !important; max-width: 380px !important; max-height: 275px !important; height: auto !important; display: block !important; margin: 0 auto !important; object-fit: contain !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 18px !important; } /* ========================================================= 2. BOTÕES — OPÇÕES CURTAS 2 colunas ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_furada"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barris_no_recife"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_no_caminho"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="conchas_do_siri"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="caminho_das_pedras"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(320px, 86vw) !important; max-width: 320px !important; margin: 8px auto 14px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 14px !important; justify-content: center !important; align-items: center !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_furada"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barris_no_recife"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_no_caminho"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="conchas_do_siri"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="caminho_das_pedras"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero { width: 100% !important; min-width: 0 !important; height: 52px !important; min-height: 52px !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; } /* ========================================================= 3. AJUSTE FINO DA TELA ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_furada"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barris_no_recife"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_no_caminho"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="conchas_do_siri"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="caminho_das_pedras"]) #instrucao { margin-bottom: 4px !important; line-height: 1.2 !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_furada"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barris_no_recife"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_no_caminho"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="conchas_do_siri"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="caminho_das_pedras"]) #display-operacao { margin: 2px auto 6px !important; } /* ========================================================= 4. AJUSTE FINO MOBILE ========================================================= */ @media (max-width: 380px) { #palco-objetos[data-exercicio-codigo="rede_furada"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="barris_no_recife"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="estrelas_no_caminho"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="conchas_do_siri"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="caminho_das_pedras"] .img-visual-tarefa { max-width: 100% !important; max-height: 255px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_furada"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barris_no_recife"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_no_caminho"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="conchas_do_siri"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="caminho_das_pedras"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(300px, 84vw) !important; gap: 8px 12px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_furada"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barris_no_recife"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="estrelas_no_caminho"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="conchas_do_siri"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="caminho_das_pedras"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero { height: 50px !important; min-height: 50px !important; font-size: 0.95rem !important; } }