/* ========================================================= BAÍA DOS NÚMEROS — 10–11 ANOS — ROTA NORMAL E DESAFIO Ajustes visuais específicos da faixa 10–11 ========================================================= */ /* ========================================================= 1. PALCO / ÁREA VISUAL ========================================================= */ #palco-objetos.palco-padrao[data-exercicio-codigo="barcos_em_ordem"], #palco-objetos.palco-padrao[data-exercicio-codigo="radar_do_porto"], #palco-objetos.palco-padrao[data-exercicio-codigo="diario_do_capitao"], #palco-objetos.palco-padrao[data-exercicio-codigo="painel_do_farol"], #palco-objetos.palco-padrao[data-exercicio-codigo="marco_da_rota"], #palco-objetos.palco-padrao[data-exercicio-codigo="codigo_do_bau_secreto"], #palco-objetos.palco-padrao[data-exercicio-codigo="mastros_muito_parecidos"], #palco-objetos.palco-padrao[data-exercicio-codigo="virada_do_contador"], #palco-objetos.palco-padrao[data-exercicio-codigo="montando_o_numero"], #palco-objetos.palco-padrao[data-exercicio-codigo="bussola_das_ordens"] { width: 100% !important; min-height: auto !important; margin: 2px auto 6px !important; padding: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } #palco-objetos[data-exercicio-codigo="barcos_em_ordem"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="radar_do_porto"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="diario_do_capitao"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="painel_do_farol"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="marco_da_rota"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="virada_do_contador"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="montando_o_numero"] .area-visual-tarefa, #palco-objetos[data-exercicio-codigo="bussola_das_ordens"] .area-visual-tarefa { width: min(100%, 360px) !important; max-width: 360px !important; min-height: auto !important; margin: 0 auto 6px !important; padding: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } #palco-objetos[data-exercicio-codigo="barcos_em_ordem"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="radar_do_porto"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="diario_do_capitao"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="painel_do_farol"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="marco_da_rota"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="virada_do_contador"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="montando_o_numero"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="bussola_das_ordens"] .area-visual-tarefa::before, #palco-objetos[data-exercicio-codigo="barcos_em_ordem"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="radar_do_porto"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="diario_do_capitao"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="painel_do_farol"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="marco_da_rota"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="virada_do_contador"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="montando_o_numero"] .area-visual-tarefa::after, #palco-objetos[data-exercicio-codigo="bussola_das_ordens"] .area-visual-tarefa::after { display: none !important; content: none !important; } #palco-objetos[data-exercicio-codigo="barcos_em_ordem"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="radar_do_porto"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="diario_do_capitao"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="painel_do_farol"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="marco_da_rota"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="virada_do_contador"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="montando_o_numero"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bussola_das_ordens"] .img-visual-tarefa { width: 100% !important; max-width: 355px !important; max-height: 245px !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: 16px !important; } /* ========================================================= 2. AJUSTE QUANDO A IMAGEM AINDA NÃO CARREGOU ========================================================= */ #palco-objetos[data-exercicio-codigo="barcos_em_ordem"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="radar_do_porto"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="diario_do_capitao"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="painel_do_farol"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="marco_da_rota"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="virada_do_contador"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="montando_o_numero"] .area-visual-tarefa:has(img[src=""]), #palco-objetos[data-exercicio-codigo="bussola_das_ordens"] .area-visual-tarefa:has(img[src=""]) { min-height: 24px !important; } /* ========================================================= 3. BOTÕES — OPÇÕES CURTAS ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico.opcoes-resposta.opcoes-curtas { width: min(315px, 82vw) !important; max-width: 315px !important; margin: 8px auto 14px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px 12px !important; justify-content: center !important; align-items: center !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao { width: 100% !important; min-width: 0 !important; min-height: 50px !important; padding: 0 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 13px !important; font-size: 0.9rem !important; font-weight: 900 !important; line-height: 1.05 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* ========================================================= 4. BOTÕES — OPÇÕES LONGAS ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico.opcoes-resposta.opcoes-longas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico.opcoes-resposta.opcoes-longas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico.opcoes-resposta.opcoes-longas { width: min(315px, 82vw) !important; max-width: 315px !important; margin: 8px auto 14px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; justify-content: center !important; align-items: center !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-opcao { width: 100% !important; min-width: 0 !important; min-height: 46px !important; padding: 7px 10px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border-radius: 12px !important; font-size: 0.78rem !important; font-weight: 800 !important; line-height: 1.15 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* ========================================================= 5. LETRA DA ALTERNATIVA ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico .btn-numero strong, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico .btn-numero strong { margin-right: 6px !important; flex-shrink: 0 !important; } /* ========================================================= 6. AJUSTE FINO DO ENUNCIADO / OPERAÇÃO ========================================================= */ #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #instrucao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #instrucao { margin-bottom: 4px !important; line-height: 1.18 !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #display-operacao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #display-operacao { margin: 2px auto 6px !important; } /* ========================================================= 7. AJUSTE FINO MOBILE ========================================================= */ @media (max-width: 380px) { #palco-objetos[data-exercicio-codigo="barcos_em_ordem"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="radar_do_porto"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="diario_do_capitao"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="painel_do_farol"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="marco_da_rota"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="virada_do_contador"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="montando_o_numero"] .img-visual-tarefa, #palco-objetos[data-exercicio-codigo="bussola_das_ordens"] .img-visual-tarefa { max-width: 100% !important; max-height: 230px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico.opcoes-resposta.opcoes-curtas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico.opcoes-resposta.opcoes-longas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico.opcoes-resposta.opcoes-longas, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico.opcoes-resposta.opcoes-longas { width: min(305px, 80vw) !important; max-width: 305px !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="barcos_em_ordem"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="diario_do_capitao"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="montando_o_numero"]) #teclado-numerico.opcoes-resposta.opcoes-longas .btn-opcao { min-height: 44px !important; padding: 7px 9px !important; font-size: 0.72rem !important; line-height: 1.12 !important; } #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="radar_do_porto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="painel_do_farol"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="marco_da_rota"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="codigo_do_bau_secreto"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="mastros_muito_parecidos"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="virada_do_contador"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao, #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bussola_das_ordens"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-opcao { min-height: 48px !important; padding: 0 8px !important; font-size: 0.84rem !important; } }