/* =========================================================
   ENSEADA DA SOMA — ROTA NORMAL E ROTA DESAFIO
   Ajustes visuais específicos das tarefas da ilha
========================================================= */

/* =========================================================
   1. PALCO / ÁREA VISUAL — ROTA NORMAL
========================================================= */

#palco-objetos.palco-padrao[data-exercicio-codigo="banquetes_peixes"],
#palco-objetos.palco-padrao[data-exercicio-codigo="reforco_casco"],
#palco-objetos.palco-padrao[data-exercicio-codigo="bau_moedas"],
#palco-objetos.palco-padrao[data-exercicio-codigo="rede_conchas"],
#palco-objetos.palco-padrao[data-exercicio-codigo="farol_sinalizacao"] {
    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="banquetes_peixes"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="reforco_casco"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="bau_moedas"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="rede_conchas"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="farol_sinalizacao"] .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="banquetes_peixes"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="reforco_casco"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="bau_moedas"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="rede_conchas"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="farol_sinalizacao"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="banquetes_peixes"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="reforco_casco"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="bau_moedas"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="rede_conchas"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="farol_sinalizacao"] .area-visual-tarefa::after {
    display: none !important;
    content: none !important;
}

#palco-objetos[data-exercicio-codigo="banquetes_peixes"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="reforco_casco"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="bau_moedas"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="rede_conchas"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="farol_sinalizacao"] .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 tarefas normais da Enseada
========================================================= */

#tela-jogo:has(#palco-objetos[data-exercicio-codigo="banquetes_peixes"]) #teclado-numerico.opcoes-resposta.opcoes-curtas,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="reforco_casco"]) #teclado-numerico.opcoes-resposta.opcoes-curtas,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_moedas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_conchas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="farol_sinalizacao"]) #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="banquetes_peixes"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="reforco_casco"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_moedas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="rede_conchas"]) #teclado-numerico.opcoes-resposta.opcoes-curtas .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="farol_sinalizacao"]) #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. PALCO / ÁREA VISUAL — ROTA DESAFIO
   Aplica nas 5 tarefas difíceis
========================================================= */

#palco-objetos.palco-padrao[data-exercicio-codigo="bau_duas_fechaduras"],
#palco-objetos.palco-padrao[data-exercicio-codigo="rota_nevoeiro"],
#palco-objetos.palco-padrao[data-exercicio-codigo="enigma_ancoras"],
#palco-objetos.palco-padrao[data-exercicio-codigo="piramide_coral"],
#palco-objetos.palco-padrao[data-exercicio-codigo="truque_papagaio"] {
    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="bau_duas_fechaduras"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="rota_nevoeiro"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="enigma_ancoras"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="piramide_coral"] .area-visual-tarefa,
#palco-objetos[data-exercicio-codigo="truque_papagaio"] .area-visual-tarefa {
    width: min(100%, 370px) !important;
    max-width: 370px !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="bau_duas_fechaduras"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="rota_nevoeiro"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="enigma_ancoras"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="piramide_coral"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="truque_papagaio"] .area-visual-tarefa::before,
#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="rota_nevoeiro"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="enigma_ancoras"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="piramide_coral"] .area-visual-tarefa::after,
#palco-objetos[data-exercicio-codigo="truque_papagaio"] .area-visual-tarefa::after {
    display: none !important;
    content: none !important;
}

#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="rota_nevoeiro"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="enigma_ancoras"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="piramide_coral"] .img-visual-tarefa,
#palco-objetos[data-exercicio-codigo="truque_papagaio"] .img-visual-tarefa {
    width: 100% !important;
    max-width: 360px !important;
    max-height: 270px !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;
}

/* =========================================================
   4. BOTÕES — ROTA DESAFIO
   Só a tarefa 1 fica em 2 colunas
========================================================= */

#tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"]) #teclado-numerico.opcoes-resposta {
    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="bau_duas_fechaduras"]) #teclado-numerico.opcoes-resposta .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"]) #teclado-numerico.opcoes-resposta .btn-opcao {
    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;
}

/* =========================================================
   5. ROTA DESAFIO — demais tarefas
   Remove a herança indevida de 2 colunas e devolve layout longo
========================================================= */

#tela-jogo:has(#palco-objetos[data-exercicio-codigo="rota_nevoeiro"]) #teclado-numerico.opcoes-resposta,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="enigma_ancoras"]) #teclado-numerico.opcoes-resposta,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="piramide_coral"]) #teclado-numerico.opcoes-resposta,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="truque_papagaio"]) #teclado-numerico.opcoes-resposta {
    width: min(100%, 320px) !important;
    max-width: 320px !important;

    margin: 12px auto 24px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

#tela-jogo:has(#palco-objetos[data-exercicio-codigo="rota_nevoeiro"]) #teclado-numerico.opcoes-resposta .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="enigma_ancoras"]) #teclado-numerico.opcoes-resposta .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="piramide_coral"]) #teclado-numerico.opcoes-resposta .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="truque_papagaio"]) #teclado-numerico.opcoes-resposta .btn-numero,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="rota_nevoeiro"]) #teclado-numerico.opcoes-resposta .btn-opcao,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="enigma_ancoras"]) #teclado-numerico.opcoes-resposta .btn-opcao,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="piramide_coral"]) #teclado-numerico.opcoes-resposta .btn-opcao,
#tela-jogo:has(#palco-objetos[data-exercicio-codigo="truque_papagaio"]) #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.82rem !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;
}

/* =========================================================
   6. AJUSTE FINO MOBILE
========================================================= */

@media (max-width: 380px) {
    #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"]) #teclado-numerico.opcoes-resposta {
        width: min(300px, 84vw) !important;
        gap: 8px 10px !important;
    }

    #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"]) #teclado-numerico.opcoes-resposta .btn-numero,
    #tela-jogo:has(#palco-objetos[data-exercicio-codigo="bau_duas_fechaduras"]) #teclado-numerico.opcoes-resposta .btn-opcao {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 0.95rem !important;
    }
}