/* ========================================================= CORRENTE DA ADIÇÃO — ROTA NORMAL Ajustes visuais específicos das tarefas da ilha ========================================================= */ /* ========================================================= 1. PALCO / ÁREA VISUAL — ROTA NORMAL ========================================================= */ #palco-objetos.palco-padrao[data-exercicio-codigo="salto_das_ondas"], #palco-objetos.palco-padrao[data-exercicio-codigo="energia_cardume"], #palco-objetos.palco-padrao[data-exercicio-codigo="lanche_baleia"], #palco-objetos.palco-padrao[data-exercicio-codigo="bussola_perolas"], #palco-objetos.palco-padrao[data-exercicio-codigo="alarme_porto"] { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; width: 100%; min-height: auto !important; margin: 8px auto 10px !important; padding: 0 !important; } #palco-objetos[data-exercicio-codigo="salto_das_ondas"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="energia_cardume"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="lanche_baleia"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="bussola_perolas"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="alarme_porto"] .area-visual-tarefa { width: min(100%, 360px) !important; max-width: 360px !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="salto_das_ondas"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="energia_cardume"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="lanche_baleia"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="bussola_perolas"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="alarme_porto"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="salto_das_ondas"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="energia_cardume"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="lanche_baleia"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="bussola_perolas"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="alarme_porto"] .area-visual-tarefa::after { display: none !important; content: none !important; } #palco-objetos[data-exercicio-codigo="salto_das_ondas"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="energia_cardume"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="lanche_baleia"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bussola_perolas"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="alarme_porto"] .img-visual-tarefa { width: 100% !important; max-width: 355px !important; max-height: 255px !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; } /* ========================================================= 2. BOTÕES — ROTA NORMAL Mantém 2 colunas nas opções curtas ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="salto_das_ondas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="energia_cardume"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_baleia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_perolas"]) #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 12px !important; justify-content: center !important; align-items: center !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="salto_das_ondas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="energia_cardume"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_baleia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_perolas"]) #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. ALARME DO PORTO Alternativas em coluna única: A, B, C, D ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="alarme_porto"]) #teclado-numerico.opcoes-resposta { width: min(100%, 340px) !important; max-width: 340px !important; margin: 10px auto 18px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; justify-content: center !important; align-items: stretch !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="alarme_porto"]) #teclado-numerico.opcoes-resposta .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="alarme_porto"]) #teclado-numerico.opcoes-resposta .btn-opcao { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border-radius: 14px !important; font-size: 0.82rem !important; font-weight: 900 !important; line-height: 1.15 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* ========================================================= 4. AJUSTE FINO MOBILE ========================================================= */ @media (max-width: 380px) { #tela-jogo:has(#palco-objetos[data-exercicio-codigo="salto_das_ondas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="energia_cardume"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_baleia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_perolas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(300px, 84vw) !important; gap: 8px 10px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="salto_das_ondas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="energia_cardume"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="lanche_baleia"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_perolas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero { height: 50px !important; min-height: 50px !important; font-size: 0.95rem !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="alarme_porto"]) #teclado-numerico.opcoes-resposta { width: min(300px, 86vw) !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="alarme_porto"]) #teclado-numerico.opcoes-resposta .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="alarme_porto"]) #teclado-numerico.opcoes-resposta .btn-opcao { min-height: 46px !important; font-size: 0.78rem !important; padding: 7px 10px !important; } } /* ========================================================= CORRENTE DA ADIÇÃO — ROTA DESAFIO ========================================================= */ /* ========================================================= 1. PALCO / ÁREA VISUAL — ROTA DESAFIO Remove pontilhado, bordas e aumenta as imagens ========================================================= */ #palco-objetos.palco-padrao[data-exercicio-codigo="misterio_prancha"], #palco-objetos.palco-padrao[data-exercicio-codigo="bau_pesos_iguais"], #palco-objetos.palco-padrao[data-exercicio-codigo="previsao_tempestade"], #palco-objetos.palco-padrao[data-exercicio-codigo="correnteza_trocada"], #palco-objetos.palco-padrao[data-exercicio-codigo="codigo_galeao"] { 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="misterio_prancha"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="bau_pesos_iguais"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="previsao_tempestade"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="correnteza_trocada"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="codigo_galeao"] .area-visual-tarefa { width: min(100%, 390px) !important; max-width: 390px !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="misterio_prancha"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="bau_pesos_iguais"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="previsao_tempestade"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="correnteza_trocada"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="codigo_galeao"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="misterio_prancha"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="bau_pesos_iguais"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="previsao_tempestade"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="correnteza_trocada"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="codigo_galeao"] .area-visual-tarefa::after { display: none !important; content: none !important; } #palco-objetos[data-exercicio-codigo="misterio_prancha"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bau_pesos_iguais"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="previsao_tempestade"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="correnteza_trocada"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="codigo_galeao"] .img-visual-tarefa { width: 100% !important; max-width: 385px !important; max-height: 290px !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 — DESAFIO COM OPÇÕES CURTAS 2 colunas ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="misterio_prancha"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_pesos_iguais"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_galeao"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(330px, 88vw) !important; max-width: 330px !important; margin: 8px auto 16px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; justify-content: center !important; align-items: center !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="misterio_prancha"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_pesos_iguais"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_galeao"]) #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. BOTÕES — DESAFIO COM OPÇÕES MÉDIAS/LONGAS 1 coluna ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="previsao_tempestade"]) #teclado-numerico.opcoes-resposta, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="correnteza_trocada"]) #teclado-numerico.opcoes-resposta { width: min(100%, 330px) !important; max-width: 330px !important; margin: 10px auto 20px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="previsao_tempestade"]) #teclado-numerico.opcoes-resposta .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="previsao_tempestade"]) #teclado-numerico.opcoes-resposta .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="correnteza_trocada"]) #teclado-numerico.opcoes-resposta .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="correnteza_trocada"]) #teclado-numerico.opcoes-resposta .btn-opcao { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 48px !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; font-size: 0.84rem !important; font-weight: 900 !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* ========================================================= 4. AJUSTE FINO MOBILE ========================================================= */ @media (max-width: 380px) { #palco-objetos[data-exercicio-codigo="misterio_prancha"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bau_pesos_iguais"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="previsao_tempestade"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="correnteza_trocada"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="codigo_galeao"] .img-visual-tarefa { max-width: 100% !important; max-height: 270px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="misterio_prancha"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_pesos_iguais"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_galeao"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(305px, 86vw) !important; gap: 8px 10px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="misterio_prancha"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_pesos_iguais"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_galeao"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero { height: 50px !important; min-height: 50px !important; font-size: 0.95rem !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="previsao_tempestade"]) #teclado-numerico.opcoes-resposta, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="correnteza_trocada"]) #teclado-numerico.opcoes-resposta { width: min(305px, 88vw) !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="previsao_tempestade"]) #teclado-numerico.opcoes-resposta .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="previsao_tempestade"]) #teclado-numerico.opcoes-resposta .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="correnteza_trocada"]) #teclado-numerico.opcoes-resposta .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="correnteza_trocada"]) #teclado-numerico.opcoes-resposta .btn-opcao { min-height: 46px !important; font-size: 0.78rem !important; padding: 7px 10px !important; } }