*{

}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

body{

    background-image:url('/site/Gam2/images/Mar_Desenhar_Top_background.png');

    background-size:cover;

    background-attachment:fixed;

    font-family:Arial, Helvetica, sans-serif;

    overflow:hidden;

    position:fixed;

    width:100%;

    height:100%;

}


/* =========================================================
   WRAPPER CENTRAL
========================================================= */

.app-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    height:100%;

}


/* =========================================================
   CAIXA PRINCIPAL
========================================================= */

.canvas-container{

    position:relative;

    width:450px;

    height:450px;

    border:10px solid #3d3c3c;

    border-radius:5px;

    background:#fff;

    display:flex;

    flex-direction:column;

    padding:15px;

    box-sizing:border-box;

    overflow:hidden;

}


/* =========================================================
   ÁREA DO TESTE
========================================================= */

.test-screen{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

}


/* =========================================================
   TÍTULO
========================================================= */

.test-title{

    font-size:23px;

    font-weight:bold;

    text-align:center;

    margin:2px 0 5px 0;

    color:#333;

}

.test-subtitle{

    font-size:13px;

    text-align:center;

    color:#666;

    margin:0 5px 5px 5px;

    line-height:1.3;

}


/* =========================================================
   PROGRESSO
========================================================= */

.progress-area{

    width:100%;

    margin-bottom:5px;

}

.progress-text{

    font-size:12px;

    text-align:right;

    color:#666;

    margin-bottom:4px;

}

.progress-bar{

    width:100%;

    height:8px;

    background:#e5e5e5;

    border-radius:5px;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    width:0%;

    background:#3d3c3c;

    transition:width .3s ease;

}


/* =========================================================
   PERGUNTA
========================================================= */

.question-area{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.question-number{

    font-size:13px;

    font-weight:bold;

    color:#777;

    margin-bottom:5px;

}

.question{

    font-size:15px;

    font-weight:bold;

    line-height:1.3;

    color:#333;

    margin-bottom:5px;

}


/* =========================================================
   ALTERNATIVAS
========================================================= */

.answers{

    display:flex;

    flex-direction:column;

    gap:7px;

}

.answer{

    width:100%;

    padding:8px 10px;

    border:2px solid #d0d0d0;

    border-radius:5px;

    background:#fff;

    font-size:13px;

    text-align:left;

    cursor:pointer;

    transition:.15s;

}

.answer:hover{

    background:#f1f1f1;

    border-color:#888;

}

.answer.selected{

    background:#3d3c3c;

    color:#fff;

    border-color:#3d3c3c;

}


/* =========================================================
   BOTÕES DE NAVEGAÇÃO
========================================================= */

.navigation{

    display:flex;

    gap:6px;

    margin-top:10px;

}

.navigation button{

    flex:1;

    padding:6px;

    border:none;

    border-radius:5px;

    background:#3d3c3c;

    color:white;

    font-size:12px;

    cursor:pointer;

}

.navigation button:disabled{

    opacity:.35;

    cursor:not-allowed;

}

.navigation button:hover:not(:disabled){

    opacity:.85;

}


/* =========================================================
   TELA INICIAL
========================================================= */

.start-screen{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.start-icon{

    font-size:50px;

    margin-bottom:8px;

}

.start-screen h1{

    font-size:25px;

    margin:0 0 8px 0;

    color:#333;

}

.start-screen p{

    font-size:14px;

    line-height:1.4;

    color:#555;

    margin:5px 10px 15px 10px;

}

.start-button{

    width:100%;

    padding:9px;

    border:none;

    border-radius:5px;

    background:#3d3c3c;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}


/* =========================================================
   RESULTADO
========================================================= */

.result-screen{

    display:none;

    height:100%;

    overflow-y:auto;

    padding-right:3px;

}

.result-title{

    text-align:center;

    font-size:21px;

    font-weight:bold;

    color:#333;

    margin-bottom:5px;

}

.result-description{

    font-size:13px;

    text-align:center;

    color:#555;

    line-height:1.35;

    margin-bottom:10px;

}

.profession{

    border:2px solid #ddd;

    border-radius:5px;

    padding:9px;

    margin-bottom:7px;

    background:#fafafa;

    transition:.2s;

}

.profession.top-three{

    border-color:#3d3c3c;

    background:#f4f4f4;

}

.profession.top-one{

    border-width:3px;

}

.profession-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:5px;

}

.profession-name{

    font-size:16px;

    font-weight:bold;

    color:#333;

}

.compatibility{

    font-size:12px;

    font-weight:bold;

    color:#555;

    white-space:nowrap;

}

.compatibility-bar{

    height:6px;

    background:#ddd;

    border-radius:5px;

    margin:6px 0;

    overflow:hidden;

}

.compatibility-fill{

    height:100%;

    background:#3d3c3c;

}

.profession-text{

    font-size:12px;

    line-height:1.35;

    color:#555;

    margin:3px 0 0 0;

}

.profile-box{

    background:#f2f2f2;

    border-radius:5px;

    padding:9px;

    margin-top:8px;

    font-size:12px;

    line-height:1.4;

}


/* =========================================================
   COMPARTILHAMENTO
========================================================= */

.share-box{

    background:#f2f2f2;

    border-radius:5px;

    padding:10px;

    margin-top:10px;

    text-align:center;

}

.share-title{

    font-size:14px;

    font-weight:bold;

    color:#333;

    margin-bottom:5px;

}

.share-description{

    font-size:12px;

    color:#666;

    line-height:1.35;

    margin-bottom:9px;

}

.share-buttons{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:6px;

}


.share-button{

    border:none;

    border-radius:5px;

    padding:8px 5px;

    font-size:12px;

    font-weight:bold;

    cursor:pointer;

    background:#008080;

    color:#fff;

    transition:.15s;

}

.share-button:hover{

    opacity:.85;

}

.share-button:active{

    transform:scale(.98);

}


/* =========================================================
   BOTÃO REINICIAR
========================================================= */

.restart-button{

    width:100%;

    padding:9px;

    margin-top:10px;

    border:none;

    border-radius:5px;

    background:#3d3c3c;

    color:white;

    cursor:pointer;

    font-size:14px;

}


/* =========================================================
   LIVRO
========================================================= */

#book-indication{

    background:#f2f2f2;

    border-radius:5px;

    padding:9px;

    margin-top:10px;

    font-size:12px;

    line-height:1.4;

    text-align:center;

}

#book-indication p{

    margin:0 0 8px 0;

}


/* =========================================================
   MENU INFERIOR
========================================================= */

.menu-bar {

    width:430px;

    margin-top:10px;

    background-color:#3d3c3c;

    color:#fff;

    padding:10px;

    border-radius:5px;

    font-family:'Rock Salt', cursive;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

}

.menu-bar .logo img{

    display:block;

}

.apps-menu-btn{

    width:auto;

    padding:6px 12px;

    margin:0;
    
    font-size: 0.8em;
    
    font-family: Open Sans;

}


/* =========================================================
   OVERLAY
========================================================= */

#apps-menu-overlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    background:rgba(0,0,0,.25);

}

.apps-menu-content{

    background:#fff;

    padding:20px;

    border-radius:15px;

    width:600px;

    max-width:95%;

    max-height:90vh;

    overflow-y:auto;

    text-align:center;

    box-shadow:0 0 20px rgba(0,0,0,.2);

    position:relative;

}

#apps-menu-close{

    position:absolute;

    right:12px;

    top:8px;

    background:none;

    border:none;

    font-size:20px;

    cursor:pointer;

    color:#333;

}

.menu-content{

    display:none;

}

.menu-columns{

    display:flex;

    gap:20px;

    justify-content:space-between;

    align-items:flex-start;

}

.menu-col{

    display:flex;

    flex-direction:column;

    gap:8px;

    flex:1;

}

.menu-col p{

    margin:0 0 8px 0;

    font-size:14px;

}

.apps-menu-content a{

    display:block;

    margin:4px 0;

}

.menu-col a:hover{

    transform:scale(1.05);

    transition:.2s;

}


/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:600px){

    .canvas-container{

        width:90vw;

        height:90vw;

        max-height:600px;

    }
    
    .start-screen h1{
        
        font-size:20px;
}

    
    .start-screen p{
        
        margin-bottom:2px;
}

    .start-icon img{

        width: 100px;
    
        height: 90px;
    
    
    }
    
    .menu-bar{

        width:calc(90vw - 20px);

    }

    .menu-columns{

        flex-direction:column;

        align-items:center;

    }

    .test-title{

        font-size:12px;

    }
    
    .test-subtitle{

        font-size:9px;
    
    }

    .question{

        font-size:12px;

    }

    .answer{

        font-size:12px;

        padding:3px;

    }

    .share-buttons{

        grid-template-columns:repeat(2,1fr);

    }

}