.padrao:root{
	--opacidade-palavra:1;
	--logo: rgb(32, 32, 73);
	--bloco: rgb(178, 178, 255);
	--aside-temaClaro: #5a5a5a;
	--aside-temaEscuro: black;
	--aside-temaCerejeira: #b81265;
	--aside-temaCarpa: #ff8c00;
	--aside-voce: rgb(20, 102, 13); 
	--padrao: 63, 63, 116;
	--padrao-logo: 116, 63, 116;
	--feedback-negativo: rgb(233, 124, 124);
	--fundo-card: rgb(252, 252, 252);
	/*--fundo-body: whitesmoke;*/
	--fundo-body: rgba(246, 246, 246, 0.96);
	--fundo-body-rgb: 246, 246, 246;
	--hover: rgba(240, 248, 255, 0.418);
	--texto: black;
	--aside-navegar: rgb(0, 133, 255);
	--aside-navegar-rgb: 29, 68, 240;
	--destaque: rgb(0, 133, 255);
	--destaque-rgb: 29, 155, 240;
	--cruzadinha: black;
	
	--bg-cruzadinha: rgb(191, 255, 185);
	--bg-cruzadinhaN: rgb(255, 178, 178);
	--divAtiva: #dadadaa2;
	
	--close-modal:rgb(141, 25, 25);
	--opacidade-fraca: 0.3;
	--opacidade-media: 0.4;
	--opacidade-forte: 0.5;

	--quadrado-cor: 63, 63, 116;
	--quadrado-cor-jogar: 63, 63, 116;
	--quadrado-cor-create: 120, 120, 170;
}
.dim:root{	
	--opacidade-palavra: 0.2;
	--logo: #000000;
	--bloco: #afafaf;
	--aside-temaClaro: #e8f057;
	--aside-temaEscuro: rgb(236, 236, 236);
	--aside-temaCerejeira: #c980a4;
	--aside-temaCarpa: #d19348;
	--aside-voce: #4ee04e;
	--padrao: 241, 243, 245;
	--padrao-logo: 241, 243, 245;
	
	--feedback-negativo: #ff7272;
	
	--fundo-card: rgb(30, 41, 54);
	--fundo-body: rgba(21, 32, 43, 0.99);
	--fundo-body-rgb: 21, 32, 43;
	--hover: rgb(35, 57, 83);
	--texto: rgb(241, 243, 245);
	
	--aside-navegar: rgb(165, 155, 255);
	--aside-navegar-rgb: 165, 155, 255;
	--destaque: rgb(165, 155, 255);
	--destaque-rgb: 165, 155, 255;
	/*
	--destaque: #DAA520; 
	*/
	--cruzadinha: #8a8a8a;

	--bg-cruzadinha: #56965677;
	--bg-cruzadinhaN: #9b2c2c85;
	--divAtiva: #a58b8ba2;

	--close-modal:rgb(255, 178, 178);
	--opacidade-fraca: 0.1;
	--opacidade-media: 0.2;
	--opacidade-forte: 0.3;

	--quadrado-cor: 183, 185, 189;
	--quadrado-cor-jogar: 140, 143, 145;
	--quadrado-cor-create: 100, 103, 105;
}
.darktheme:root{
	--opacidade-palavra: 0.2;
	--logo: #000000;
	--bloco: #afafaf;
	--aside-temaClaro: #e8f057;
	--aside-temaEscuro: rgb(236, 236, 236);
	--aside-temaCerejeira: #c980a4;
	--aside-temaCarpa: #d19348;
	--aside-voce: #4ee04e;
	--padrao: 241, 243, 245;
	--padrao-logo: 241, 243, 245;
	
	--feedback-negativo: #ff7272;
	
	--fundo-card: rgb(40, 40, 40, 0.9);
	--fundo-body: rgba(15, 15, 15, 0.99);
	--fundo-body-rgb: 15, 15, 15;
	--hover: #3a3a3a;
	--texto: rgb(241, 243, 245);
	
	--aside-navegar: rgb(165, 155, 255);
	--aside-navegar-rgb: 165, 155, 255;
	--destaque: rgb(165, 155, 255);
	--destaque-rgb: 165, 155, 255;
	/*
	--destaque: #DAA520; 
	*/
	--cruzadinha: #8a8a8a;

	--bg-cruzadinha: #56965677;
	--bg-cruzadinhaN: #9b2c2c85;
	--divAtiva: #a58b8ba2;

	--close-modal:rgb(255, 178, 178);
	--opacidade-fraca: 0.1;
	--opacidade-media: 0.2;
	--opacidade-forte: 0.3;

	--quadrado-cor: 150, 150, 150;
	--quadrado-cor-jogar: 130, 130, 130;
	--quadrado-cor-create: 100, 103, 105;
}

#carrega_tela {
    background-color: var(--fundo-body);
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 1000;
    display: flex; /* Começa visível por padrão no HTML para evitar FOUC */
    align-items: center; 
    justify-content: center;
    transition: opacity 0.9s ease, visibility 0.9s; 
    will-change: opacity; 
}

#carrega_tela.carrega_tela_hidden {
    opacity: 0;
    visibility: hidden; /* Substitui o display: none para permitir a transição */
}

#loadingBar {
    position: absolute;
    background-color: var(--destaque);
    height: 3px;
    width: 50vw;
    top: 0; /* Ou onde você preferir */
    /* Usamos transform para mover a barra sem causar Reflow */
    transform: translateX(-100vw); 
    animation: loadingBarMove 1.5s infinite linear;
}

@keyframes loadingBarMove {
    from { transform: translateX(-100vw); }
    to { transform: translateX(100vw); }
}
.submenu{
	display:none;
}
/*FIM CARREGAMENTO DE TELA*/