/* =========================================================
   RESPONSIVO.CSS — AJUSTES MÍNIMOS
   ---------------------------------------------------------
   Regra:
   - Base mobile-first está em layout.css e jogo.css.
   - Aqui ficam apenas landscape, telas estreitas e telas baixas.
   - O Diário de Bordo atual funciona como modal, não painel recolhível.
========================================================= */

/* =========================================================
   SEGURANÇA GLOBAL
========================================================= */

.hidden,
#game-header.hidden {
    display: none !important;
}

/* ===============================
   FAROL DE PATRULHA — PORTRAIT
================================ */

@media (orientation: portrait) {
    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .reta-numerica {
        left: 23%;
        right: auto;
        top: 50%;
        width: max-content;
        max-width: 68%;
        transform: translateY(-50%);
        justify-content: center;
        gap: 4px;
    }
}

/* =========================================================
   MOBILE LANDSCAPE — VERSÃO COMPACTA FUNCIONAL
========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    #tela-jogo {
        max-width: 740px;
        gap: 8px;
    }

    #topo-desafio {
        gap: 7px;
    }

    #topo-desafio .selo-missao,
    #progresso-missao {
        font-size: 0.76rem;
        padding: 6px 12px;
    }

    #barra-progresso {
        width: min(360px, 60vw);
        height: 15px;
    }

    #barra-progresso-fill::after {
        right: -12px;
        width: 28px;
        height: 28px;
    }

    #corpo-desafio {
        width: min(720px, 95vw);
        padding: 14px 18px 16px;
        gap: 8px;
        border-radius: 24px;
    }

    #area-personagem {
        margin: 0 auto 8px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
    }

    #area-tutor-atual {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    #tutor-atual {
        width: 40px;
        height: 40px;
    }

    #balao-fala {
        padding: 9px 13px;
        border-radius: 15px;
    }

    #balao-fala p {
        font-size: 0.70rem;
        line-height: 1.18;
    }

    #pergunta-box h3 {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.80rem;
        line-height: 1.2;
        font-weight: 900;
        margin: 0 auto 5px;
    }

    #display-operacao {
        font-size: 1.18rem;
        line-height: 1.05;
        margin: 2px auto 8px;
    }

    /* ===============================
       DIÁRIO DE BORDO — BOTÃO LANDSCAPE
    ================================ */

    .diario-bordo {
        width: 100%;
        margin: 4px auto 7px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-diario-bordo {
        width: min(260px, 80vw);
        min-height: 38px;
        padding: 0 10px;
        gap: 6px;
    }

    .btn-diario-bordo img {
        width: 118px;
        max-width: 56%;
        height: auto;
    }

    .btn-diario-bordo small {
        min-height: 20px;
        padding: 3px 7px;

        font-size: 0.58rem;
        line-height: 1;
        white-space: nowrap;
    }

    /* ===============================
       DIÁRIO DE BORDO — MODAL LANDSCAPE
    ================================ */

    .modal-diario-bordo {
        padding: 10px;
    }

    .modal-diario-box {
        width: min(540px, 90vw);
        max-height: 88dvh;

        padding: 18px 20px 18px;
        gap: 10px;

        border-radius: 26px;
    }

    .modal-diario-box::before {
        inset: 10px;
        border-radius: 20px;
    }

    .btn-fechar-diario {
        top: 10px;
        right: 10px;

        width: 34px;
        height: 34px;

        border-width: 3px;

        font-size: 1.05rem;
    }

    .modal-diario-cabecalho {
        padding: 0 40px;
        gap: 3px;
    }

    .modal-diario-banner {
        width: min(195px, 46vw);
    }

    .modal-diario-cabecalho small {
        font-size: 0.80rem;
    }

    .modal-diario-conteudo {
        max-height: 170px;
        padding: 13px 14px 14px;
        border-radius: 18px;

        overflow-y: auto;
    }

    .modal-diario-titulo-linha {
        gap: 8px;
        margin-bottom: 7px;
    }

    .modal-diario-conteudo h3 {
        font-size: 0.96rem;
    }

    .modal-diario-conteudo p {
        font-size: 0.84rem;
        line-height: 1.34;
    }

    .btn-entendi-diario {
        min-height: 46px;
        padding: 9px 14px;

        font-size: 0.86rem;
        border-width: 3px;

        box-shadow:
            0 5px 0 #0d4e99,
            0 9px 14px rgba(0, 0, 0, 0.14);
    }

    .icone-btn-entendi-diario {
        width: 20px;
        height: 20px;
    }

    /* ===============================
       PALCO E OBJETOS — LANDSCAPE
    ================================ */

    #palco-objetos,
    .palco-interativo,
    .palco-estimativa,
    .palco-bolhas,
    .palco-reta-numerica,
    .palco-coral {
        min-height: 82px;
        padding: 8px 10px;
        gap: 8px;
        margin: 6px auto 10px;
    }

    .objeto-clicavel-contagem {
        width: 52px;
        height: 52px;
    }

    .objeto-clicavel-contagem img,
    .objeto-clicavel-contagem .objeto-img {
        width: 36px;
        height: 36px;
    }

    .objeto-clicavel-contagem .objeto-emoji {
        font-size: 1.8rem;
    }

    .objeto-numero-contagem {
        top: -8px;
        right: -6px;

        min-width: 22px;
        height: 22px;

        font-size: 0.70rem;
    }

    #teclado-numerico,
    .controles-desafio {
        gap: 8px;
    }

    .contador-exercicio {
        width: min(320px, 86%);
        margin: 0 auto 8px;
        padding: 6px 10px;

        font-size: 0.76rem;
    }

    .btn-controle-desafio {
        min-height: 36px;
        padding: 8px 18px;

        font-size: 0.82rem;
    }

    .palco-reta-numerica {
        width: min(340px, 95vw);
        min-height: 186px;
        padding: 12px 8px 14px;
        background-size: cover;
        background-position: center;
    }

    .palco-reta-numerica .reta-numerica {
        max-width: 300px;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        gap: 8px 6px;
    }

    .palco-reta-numerica .ponto-reta {
        width: 46px;
        height: 46px;
        font-size: 0.96rem;
    }

    .icone-btn-tarefa {
        width: 18px;
        height: 18px;
    }

    #rodape-desafio {
        margin-top: 10px;
    }

    #btn-voltar-mapa-jogo {
        padding: 8px 16px;
        font-size: 0.76rem;
    }

    #btn-voltar-mapa-jogo .icone-btn-tarefa {
        width: 18px;
        height: 18px;
    }

    .btn-numero {
        width: 54px;
        height: 54px;

        font-size: 1.25rem;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="trilha_pedras"],
    #palco-objetos.palco-padrao[data-exercicio-codigo="bussola_quebrada"],
    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"],
    #palco-objetos.palco-padrao[data-exercicio-codigo="identidade_secreta"] {
        min-height: 164px;
        padding: 10px 8px;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="trilha_pedras"] {
        padding: 10px 8px 12px;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="trilha_pedras"] .reta-numerica {
        width: min(286px, 96%);
        transform: translateY(4px);
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] {
        min-height: 170px;
        padding: 8px 8px 10px;
        background-position: center;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .reta-numerica {
        left: 40%;
        right: 9%;
        top: 49%;
        transform: translateY(-50%);
        max-width: none;
        padding-left: 0;
        gap: 4px;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .ponto-reta {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 0.80rem;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="trilha_pedras"] .ponto-reta {
        width: 46px;
        height: 46px;
        font-size: 0.94rem;
    }
}

@media (min-width: 700px) {
    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .reta-numerica {
        left: 39%;
        right: 10%;
        top: 50%;
        gap: 10px;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .ponto-reta {
        width: 48px;
        height: 48px;
        font-size: 0.98rem;
    }
}

/* =========================================================
   TELAS MUITO ESTREITAS — PORTRAIT
========================================================= */

@media (max-width: 380px) and (orientation: portrait) {

    #tela-jogo {
        max-width: 350px;
    }

    #corpo-desafio {
        width: min(350px, 96vw);
        padding: 14px 10px 16px;
    }

    #display-operacao {
        font-size: 1.02rem;
    }

    /* ===============================
       DIÁRIO DE BORDO — BOTÃO PORTRAIT ESTREITO
    ================================ */

    .diario-bordo {
        width: 100%;
        margin: 7px auto 9px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-diario-bordo {
        width: min(270px, 94%);
        min-height: 42px;
        padding: 0 10px;
        gap: 6px;
    }

    .btn-diario-bordo img {
        width: 124px;
        max-width: 56%;
        height: auto;
    }

    .btn-diario-bordo small {
        min-height: 21px;
        padding: 3px 7px;

        font-size: 0.58rem;
        line-height: 1;
        white-space: nowrap;
    }

    /* ===============================
       DIÁRIO DE BORDO — MODAL PORTRAIT ESTREITO
    ================================ */

    .modal-diario-bordo {
        padding: 12px;
    }

    .modal-diario-box {
        width: min(368px, 94vw);
        max-height: 86dvh;

        padding: 22px 16px 18px;

        border-radius: 28px;
    }

    .modal-diario-box::before {
        inset: 10px;
        border-radius: 21px;
    }

    .btn-fechar-diario {
        top: 11px;
        right: 11px;

        width: 36px;
        height: 36px;

        border-width: 3px;

        font-size: 1.08rem;
    }

    .modal-diario-cabecalho {
        padding: 0 40px;
    }

    .modal-diario-banner {
        width: min(205px, 66vw);
    }

    .modal-diario-cabecalho small {
        font-size: 0.84rem;
    }

    .modal-diario-conteudo {
        max-height: 260px;
        padding: 17px 14px 18px;
        border-radius: 18px;

        overflow-y: auto;
    }

    .modal-diario-titulo-linha {
        gap: 8px;
        margin-bottom: 8px;
    }

    .modal-diario-conteudo h3 {
        font-size: 1rem;
    }

    .modal-diario-conteudo p {
        font-size: 0.89rem;
        line-height: 1.40;
    }

    .btn-entendi-diario {
        min-height: 54px;
        padding: 11px 14px;

        font-size: 0.88rem;
    }

    .icone-btn-entendi-diario {
        width: 22px;
        height: 22px;
    }

    /* ===============================
       OBJETOS — PORTRAIT ESTREITO
    ================================ */

    .objeto-clicavel-contagem {
        width: 52px;
        height: 52px;
    }

    .objeto-clicavel-contagem img,
    .objeto-clicavel-contagem .objeto-img {
        width: 35px;
        height: 35px;
    }

    .contador-exercicio {
        width: min(300px, 94%);
    }

    .palco-reta-numerica {
        width: min(330px, 95vw);
        min-height: 176px;
        padding: 12px 8px 14px;
        background-size: cover;
    }

    .palco-reta-numerica .reta-numerica {
        max-width: 286px;
        grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
        gap: 8px 6px;
    }

    .palco-reta-numerica .ponto-reta {
        width: 44px;
        height: 44px;
        font-size: 0.92rem;
    }
}

/* =========================================================
   TELAS MUITO BAIXAS — PROTEÇÃO EXTRA DO MODAL
========================================================= */

@media (max-height: 520px) {

    .modal-diario-bordo {
        align-items: center;
        padding: 8px;
    }

    .modal-diario-box {
        width: min(520px, 92vw);
        max-height: 92dvh;

        padding: 14px 16px;
        gap: 7px;

        border-radius: 22px;

        overflow-y: auto;
    }

    .modal-diario-box::before {
        inset: 8px;
        border-radius: 16px;
    }

    .btn-fechar-diario {
        top: 9px;
        right: 9px;

        width: 32px;
        height: 32px;

        font-size: 1rem;
        border-width: 3px;
    }

    .modal-diario-cabecalho {
        padding: 0 36px;
        gap: 2px;
    }

    .modal-diario-banner {
        width: min(170px, 48vw);
    }

    .modal-diario-cabecalho small {
        font-size: 0.74rem;
    }

    .modal-diario-conteudo {
        max-height: 145px;
        padding: 10px 12px;
        border-radius: 16px;

        overflow-y: auto;
    }

    .modal-diario-titulo-linha {
        gap: 7px;
        margin-bottom: 6px;
    }

    .modal-diario-conteudo h3 {
        font-size: 0.88rem;
    }

    .modal-diario-conteudo p {
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .btn-entendi-diario {
        min-height: 40px;
        padding: 8px 12px;

        font-size: 0.78rem;
        border-width: 3px;
    }

    .icone-btn-entendi-diario {
        width: 18px;
        height: 18px;
    }
}

/* =========================================================
   TAREFAS COM FUNDO PRÓPRIO — LANDSCAPE
========================================================= */

@media (max-width: 900px) and (orientation: landscape) {
    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] {
        min-height: 154px;
        padding: 6px 8px;
        background-position: center;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .reta-numerica {
        position: absolute;
        left: 50%;
        right: auto;
        top: 50%;

        width: 220px;
        max-width: none;

        transform: translate(-34%, -50%);

        margin: 0;
        padding: 0;

        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
    }

    #palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"] .ponto-reta {
        flex: 0 0 auto;

        width: 32px;
        height: 32px;
        border-radius: 11px;
        font-size: 0.74rem;
    }

    #tela-jogo:has(#palco-objetos.palco-padrao[data-exercicio-codigo="farol_patrulha"]) .controles-desafio {
        margin-top: 10px;
    }

    #palco-objetos.tarefa-caranguejos {
        width: min(300px, 72vw);
        aspect-ratio: 320 / 155;
        padding: 16px 20px 14px;
        gap: 10px 8px;
        background-size: contain !important;
    }

    #palco-objetos.tarefa-caranguejos .objeto-clicavel-contagem {
        width: 42px;
        height: 42px;
    }

    #palco-objetos.tarefa-caranguejos .objeto-clicavel-contagem .objeto-img {
        width: 27px;
        height: 27px;
    }

    #palco-objetos.tarefa-bolhas {
        width: min(300px, 72vw);
        aspect-ratio: 320 / 120;
        padding: 12px 16px 10px;
        gap: 8px;
        background-size: contain !important;
    }

    #palco-objetos.tarefa-bolhas .bolha-numero {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .painel-caranguejos {
        width: min(290px, 72vw);
    }

    .painel-caranguejos .painel-conteudo {
        width: 84%;
        height: 64%;
        max-height: 64%;
        padding: 3px;
        gap: 8px 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .painel-caranguejos .objeto-clicavel-contagem {
        width: 38px;
        height: 38px;
    }

    .painel-caranguejos .objeto-clicavel-contagem .objeto-img {
        width: 24px;
        height: 24px;
    }

    .painel-bolhas {
        width: min(290px, 72vw);
    }

    .painel-bolhas .painel-conteudo {
        width: 84%;
        height: 58%;
        gap: 6px;
    }

    .painel-bolhas .bolha-numero {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
    }
}