body {
background-image: url('/site/Gam2/images/Mar_Desenhar_Top_background.png');
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
position: fixed;
font-family: Open Sans;
}

/* WRAPPER CENTRAL */
.app-wrapper{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100%;
}

/* CANVAS */
.canvas-container{
position:relative;
width:450px;
height:450px;
border:10px solid #3d3c3c;
border-radius:5px;
background:white;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding:15px;
box-sizing:border-box;
}

/* GRID */
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 10px;
width:100%;
}

label{
font-size:14px;
margin-top:5px;
font-weight: bold;
}

input{
width:80%;
padding:5px;
font-size:14px;
}

button{
margin-top:8px;
padding:8px;
width:100%;
cursor:pointer;
background:#3d3c3c;
color:#fff;
border:none;
border-radius:5px;
}

/* RESULTADO */
.result-box{
width:100%;
background:#f2f2f2;
padding:10px;
border-radius:5px;
text-align:center;
font-size:16px;
font-weight:bold;
}

/* 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;
}

/* BOTÕES */
.apps-menu-btn{
width:auto;
padding:6px 12px;
margin:0;
}

/* 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;
}

/* CAIXA CENTRAL */
.apps-menu-content{
background:#ffffff;
padding:20px;
border-radius:15px;
width:600px;
max-width:95%;
max-height:90vh;        /* 🔥 evita estourar tela */
overflow-y:auto;        /* 🔥 scroll interno */
text-align:center;
box-shadow:0 0 20px rgba(0,0,0,0.2);
position:relative;
}

/* BOTÃO FECHAR */
#apps-menu-close{
background:none;
border:none;
font-size:20px;
cursor:pointer;
color:#333;
}

/* CONTEÚDOS DOS MENUS */
.menu-content{
display:none;
}

/* COLUNAS */
.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;
}

/* LINKS */
.apps-menu-content a{
display:block;
margin:4px 0;
}

/* HOVER */
.menu-col a:hover{
transform:scale(1.05);
transition:0.2s;
}

/* RESPONSIVO */
@media (max-width:600px){
.canvas-container{
width:90vw;
height:90vw;
}

.menu-columns{
flex-direction:column;
align-items:center;
}
}