/* 1) - COR VERDE - TELAS COM ALTURA MENOR OU IGUAL A 799PX */

@media screen and (max-height: 799px) {
    #capa {
        /* background-color: green; */
        grid-template-rows: 45% 35% 20%;
        width: 550px;
    }

    #titulo {
        padding: 2% 12% 0 12%;
    }

    p {
        line-height: 1.2rem;
        font-size: 1rem;
        font-style: italic;
        padding: 0 15%;
    }

    h2 {
        line-height: 2rem;
    }

    /* 
    #avancar {
        display: flex;
        align-items: center;
        justify-content: center;
    } */

    #btn {
        position: static;
        transform: none;
        margin: 0;
        width: 80px;
        height: 90px;
    }
}

/* 2) - COR VERMELHO - TELAS COM ALTURA MENOR OU IGUAL A 620PX */

@media screen and (max-height: 620px) {
    #capa {
        /* background-color: red; */
        grid-template-rows: 43% 35% 22%;
        width: 500px;
    }

    #titulo {
        padding: 2% 20% 0 20%;
    }

    h2 {
        font-size: 1rem;
        line-height: 1.3rem;
        padding: 0% 6% 0 4%;
    }

    p {
        font-size: 0.9rem;
        padding: 0 4%;
    }

    #btn {
        width: 57px;
        height: 60px;
    }
}

/* 3) - COR AZUL - TELAS COM  LARGURA DE 376PX A 414PX */

@media screen and (max-width: 590px) {
    #jogo-em-andamento {
        width: 100%;
        height: 100svh;
        max-height: 100svh;
        grid-template-rows: 54% 33% 13%;
        overflow: hidden;
    }

    #area-de-espera {
        grid-template-columns: auto auto 80px;
        height: 95%;
        max-height: 100%;
        min-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        align-self: start;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 1%;
    }
}

@media screen and (max-width: 414px) {
    #capa {
        /* background-color: blue; */
        grid-template-rows: 40% 40% 20%;
        width: 100%;
    }

    #titulo {
        padding: 6% 0 3% 0;
    }

    p {
        line-height: 1.4rem;
        font-size: 1.1rem;
        font-style: italic;
        padding: 0 7%;
    }

    #btn {
        padding: 0;
        border: none;
        overflow: hidden;
    }

    #clique {
        display: block;
        width: 100%;
        height: 100%;
    }

    #tela-inicial {
        width: 100%;
    }

    .malha {
        margin: 4px auto 0 auto;
    }

    #area-inferior {
        grid-template-columns: 14% 56% 15% 15%;
    }

    #area-inferior.area-inferior-before {
        grid-template-columns: 60% 20% 20%;
    }

    #area-de-espera {
        margin-top: 10px;
        min-height: 200px;
    }

    #dispensercards {
        width: 80%;
        height: 70px;
        font-size: 1.1rem;
        line-height: 1.5rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0;
        z-index: 2;
        grid-area: 1 / 1;
    }

    .containerpecas {
        width: 100%;
        height: 76px;
    }

    .containerpecas.containerpecas-before {
        grid-area: 1 / 1;
    }

    #marcatempo {
        width: 62px;
        height: 60px;
    }

    #marcatempo.marcatempo-before {
        grid-area: 1 / 3;

    }

    #marcapontuacao {
        width: 62px;
        height: 60px;
        justify-self: start;
        margin-left: 4%;
    }

    #marcapontuacao.marcapontuacao-before {
        grid-area: 1 / 2;
    }

    #cronometro {
        font-size: 19px;
        line-height: 2.2rem;
    }

    #indicador {
        width: auto;
    }

    h5 {
        font-size: 7pt;
        margin-bottom: 3%;
    }

    #jogo-finalizado {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        transform: none;
        text-align: center;
    }

    #game-over {
        width: 320px;
        max-width: 100%;
        left: auto;
        transform: none;
        margin: 0 auto;
    }
}

/* 4) - COR ROSYBROWN - TELAS COM  LARGURA DE Até 393PX */

@media screen and (max-width: 393px) {
    #capa {
        /* background-color: rosybrown; */
        grid-template-rows: 40% 37% 23%;
    }

    #titulo {
        padding: 2% 0 0% 0;
    }

    h2 {
        font-size: 1.2rem;
    }

    p {
        line-height: 1.2rem;
        font-size: 1rem;
        padding: 0 5%;
    }

    #btn {
        width: 60px;
        height: 70px;
    }

    .malha {
        width: 357px;
        height: 378px;
        grid-template-columns: repeat(17, 21px);
        grid-template-rows: repeat(18, 21px);
    }
/* 
    .card {
        transform: scale(0.875) !important;
    } */

    h5 {
        font-size: 7pt;
        margin-bottom: 18%;
    }

    #cronometro {
        font-size: 15px;
    }

    #game-over {
        width: 77%;
    }
}

@media screen and (max-width: 360px) {

    #dispensercards {
        font-size: 1rem;
    }
}

/* 5) - COR AMARELA - TELAS COM  LARGURA DE Até 375PX e ALTURA DE ATÉ 667PX */

@media screen and (max-width: 375px) and (max-height: 667px) {
    /* #capa {
        background-color: rgb(246, 176, 78);
    } */

    #jogo-em-andamento {
        grid-template-rows: 60% 27% 13%;
    }

    #dispensercards {
        height: 60px;
        font-size: 1rem;
        line-height: 1.2rem;
    }

    #marcatempo {
        height: 60px;
    }

    #marcapontuacao {
        height: 60px;
    }
}



/* -----------------------------------------------------------------------------*/
/* TELAS COM ORIENTAÇÃO LANDSCAPE E ALTURA MENOR OU IGUAL A 460PX */

@media screen and (orientation: landscape) and (max-height: 460px) {

    #landscape-warning {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.95);
        z-index: 10000;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #landscape-warning-content {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 30px;
        border-radius: 15px;
        text-align: center;
        color: white;
        max-width: 90%;
        width: fit-content;
        margin: auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    #landscape-warning-content h2 {
        margin: 0 0 15px 0;
        font-size: 28px;
        font-weight: bold;
    }

    #landscape-warning-content p {
        margin: 15px 0;
        font-size: 18px;
        line-height: 1.5;
    }

    #rotate-icon {
        font-size: 48px;
        margin-top: 20px;
        animation: rotateAnimation 2s infinite;
    }

    @keyframes rotateAnimation {

        0%,
        100% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(90deg);
        }
    }
}