body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
            color: white;
            font-family: Arial, sans-serif;
        }

        .game-container {
            position: relative;
            width: 100vw; /* Largura total da tela */
            max-width: calc(100vh * 16 / 9); /* Largura máxima baseada no aspecto 16:9 */
            height: calc(100vw * 9 / 16); /* Altura calculada proporcionalmente */
            max-height: 100vh; /* Altura máxima igual à altura da tela */
            overflow: hidden; /* Para esconder qualquer conteúdo que exceda a área */
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000; /* Fundo preto para a área fora do jogo */
        }

        img {
            user-drag: none;
            user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-drag: none;
            -moz-user-select: none;
            -ms-user-select: none;
            pointer-events: none; /* Impede eventos de mouse, como arrastar */
        }

        #loadingContainer, #menuContainer {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        #loadingContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #loadingText {
            font-size: 2em;
            font-weight: bold;
            position: absolute;
            top: calc(50% - 50px); /* Posicionado acima da barra de progresso */
            left: 50%;
            transform: translateX(-50%);
        }

        .dot {
            display: inline-block;
            animation: blink 1.5s infinite;
        }

        .dot:nth-child(2) {
            animation-delay: 0.5s;
        }

        .dot:nth-child(3) {
            animation-delay: 1s;
        }

        @keyframes blink {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }

        #progressContainer {
            margin-top: 20px;
            width: 80%;
            height: 30px;
            border: 2px solid white;
            border-radius: 15px;
            overflow: hidden;
        }

        #progressBar {
            height: 100%;
            width: 0;
            background: #D8BFD8; /* Lilás */
        }

        #startButton {
            display: none;
            margin-top: 20px;
            position: relative;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            max-width: 30%; /* Tamanho máximo 40% da largura do contêiner pai */
        }

        #startButton img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        #startButtonText {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        /* Estilo do menu */
        #menuContainer {
            left: -30%; /* Posição inicial fora da tela */
            top: -10%;
            width: 30%; /* Largura inicial do bloco cinza escuro */
            height: 120%;
            background-image: linear-gradient(to bottom, #18111c, #251b2c); /* bloco de menu */
            box-sizing: border-box; /* Considera bordas e preenchimento no cálculo de tamanho */
            border-right: 5px solid white; /* Adiciona uma borda branca para visualização */
            z-index: 1;
            transition: left 0.3s ease-in-out; /* Transição suave de 0.3 segundos */
        }


        #menuButtons {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%; /* Largura do bloco cinza escuro */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 20px;
            box-sizing: border-box;
        }


        .menuButton {
            width: 110%;
            max-width: 110%;
            position: relative;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            border: 5px solid transparent; /* Borda transparente por padrão */
            box-sizing: border-box;
        }

        .menuButton {
            width: 110%;
            max-width: 110%;
            position: relative;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            border: 5px solid transparent; /* Borda transparente por padrão */
            box-sizing: border-box;
        }

        .menuButton img {
            width: 100%;
            height: auto;
            display: block;
            filter: grayscale(100%) brightness(60%); /* Aplica o filtro cinza escuro */
        }

        .menuButtonText {
            position: absolute;
            width: 90%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .menuButtonTextEx {
            position: absolute;
            width: 60%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .menuButtonTextExtra {
            position: absolute;
            width: 60%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .menuButton:hover {
            border-color: white; /* Mudar a cor da borda ao passar o mouse */
        }

        .menuButton:active {
            animation: shake 0.3s; /* Adiciona animação de tremor */
            animation-iteration-count: 1; /* Executa apenas uma vez */
            opacity: 0.8; /* Reduz a opacidade ao clicar */
            transition: opacity 0.1s ease-in-out; /* Transição suave de opacidade */
        }

        @keyframes shake {
            0% { transform: translate(0, 0); }
            25% { transform: translate(-5px, 0); }
            50% { transform: translate(5px, 0); }
            75% { transform: translate(-5px, 0); }
            100% { transform: translate(0, 0); }
        }



        /*   ------------------------------ */



        #menuButtonsAT {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%; /* Largura do bloco cinza escuro */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-sizing: border-box;
        }

        .menuButtonAT {
            width: 110%;
            max-width: 110%;
            position: relative;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            border: 5px solid transparent; /* Borda transparente por padrão */
            box-sizing: border-box;

        }

        .menuButtonAT img {
            width: 100%;
            height: auto;
            display: block;
        }

        .menuButtonTextAT {
            position: absolute;
            width: 90%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .menuButtonTextAT {
            position: absolute;
            width: 60%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .menuButtonAT:hover {
            border-color: white; /* Mudar a cor da borda ao passar o mouse */
        }

        .menuButtonAT:active {
            transform: scale(0.95); /* Diminui a escala para 95% */
            opacity: 0.8; /* Reduz a opacidade ao clicar */
            transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; /* Transição suave de transform e opacidade */
        }




        /* Menu Extra */

        #MenuContainerExtra {
            left: -30%; /* Posição inicial fora da tela */
            top: -10%;
            width: 30%; /* Largura inicial do bloco cinza escuro */
            height: 120%;
            background-image: linear-gradient(to bottom, #18111c, #251b2c); /* bloco de menu ex*/
            box-sizing: border-box; /* Considera bordas e preenchimento no cálculo de tamanho */
            border-right: 5px solid white; /* Adiciona uma borda branca para visualização */
            z-index: 1;
            transition: left 0.3s ease-in-out; /* Transição suave de 0.3 segundos */
            position: absolute;
        }


        /* Menu Costume TOP*/
        #MenuContainerCos2TOP {
            left: 0%; /* Posição inicial fora da tela */
            margin-top: 20%;
            width: 90%; /* Largura inicial do bloco cinza escuro */
            height: 36.3%;
            margin-left:auto;
            margin-right:auto;
            box-sizing: border-box; /* Considera bordas e preenchimento no cálculo de tamanho */
            z-index: 1;
            transition: left 0.3s ease-in-out; /* Transição suave de 0.3 segundos */
            overflow: hidden;
            flex-direction: column;
        }

        #menuButtonsCosTOP {
            flex: none;
            width: 90%;
            margin-left:auto;
            margin-right:auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            transition: transform 0.3s ease;  
        }




        /* Menu Costume */
        #MenuContainerCos {
            left: -30%; /* Posição inicial fora da tela */
            top: -10%;
            bottom: -10%;
            width: 30%; /* Largura inicial do bloco cinza escuro */
            height: 120%;
            background-image: linear-gradient(to bottom, #18111c, #251b2c); /* bloco de menu ex*/
            box-sizing: border-box; /* Considera bordas e preenchimento no cálculo de tamanho */
            border-right: 5px solid white; /* Adiciona uma borda branca para visualização */
            z-index: 1;
            transition: left 0.3s ease-in-out; /* Transição suave de 0.3 segundos */
            position: absolute;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        #MenuContainerCos2 {
            left: 0%; /* Posição inicial fora da tela */
            margin-bottom: 25%;
            width: 90%; /* Largura inicial do bloco cinza escuro */
            height: 60%;
            margin-left:auto;
            margin-right:auto;
            box-sizing: border-box; /* Considera bordas e preenchimento no cálculo de tamanho */
            border: 0px solid white; /* Adiciona uma borda branca para visualização */
            z-index: 1;
            transition: left 0.3s ease-in-out; /* Transição suave de 0.3 segundos */
            overflow: hidden;
            flex-direction: column;
        }

        #menuButtonsCos {
            flex: none;
            width: 90%;
            margin-top:3.5%;
            margin-left:auto;
            margin-right:auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            transition: transform 0.3s ease;  
            border: 0px solid red; /* Adiciona uma borda branca para visualização */   
        }



        .arrow {
            cursor: pointer;
            transition: background-color 0.3s;
            position: absolute;
            z-index: 2;
        }

        .arrow img {
            width: 89%;
            height: auto;       
            margin-left: 5.4%;
        }

        #upArrow {
            top: 35.2%;
        }

        #downArrow {
            bottom: 8.3%;
        }




        .menuButtonCC {
            width: 110%;
            max-width: 110%;
            position: relative;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            border: 2px solid transparent; /* Borda transparente por padrão */
            box-sizing: border-box;

        }

        .menuButtonCC img {
            width: 100%;
            height: auto;
            display: block;
        }

        .menuButtonTextCC {
            position: absolute;
            width: 90%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }


        /* Menu Seta */

        .menuButtonSeta-E {
            top:-2.7px;
            max-width: 23%;
            position: absolute;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            box-sizing: border-box;
            display: flex;

        }

        .menuButtonSeta-E img {
            width: 100%;
            height: auto;
            display: block;
        }

        .menuButtonSeta-E:active {
            transform: scale(0.95); /* Diminui a escala para 95% */
            transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; /* Transição suave de transform e opacidade */
        }

        .menuButtonSeta-D {
            top:-2.7px;
            max-width: 23%;
            position: absolute;
            right: 0%;
            cursor: pointer;
            text-align: center;
            transition: transform 0.1s, opacity 0.3s; /* Adicionado para transição de opacidade */
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end; /* Alinha o conteúdo à direita */
        }

        .menuButtonSeta-D img {
            width: 100%;
            height: auto;
            display: block;
        }

        .menuButtonSeta-D:active {
            transform: scale(0.95); /* Diminui a escala para 95% */
            transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out; /* Transição suave de transform e opacidade */
        }

        #charactercontainer {
            position: absolute; /* Posição absoluta para posicionar corretamente dentro da game-container */
            display: flex;
            justify-content: center;
            align-items: center;
            right: -100%;
            width: 50%;
        }

        .clothing-layer {
            position: absolute; /* Posição absoluta em relação ao personagem */
            width: 50%;
            height: auto;
        }


        .layerimg {
            width:96%;
            margin-top: -5%;
        }


        .head {
            z-index: 17;
        }

        .coat {
            z-index: 16;
        }

        .hair {
            z-index: 15;
        }

        .belt {
            z-index: 14;
        }

        .gloves {
            z-index: 13;
        }

        .bodyupper {
            z-index: 12;
        }

        .bodybottom {
            z-index: 11;
        }

        .shirt {
            z-index: 10;
        }

        .lshirt {
            z-index: 9;
        }

        .pants {
            z-index: 8;
        }

        .bras {
            z-index: 7;
        }

        .panties {
            z-index: 6;
        }

        .pubic {
            z-index: 5;
        }

        .shoes {
            z-index: 4;
        }

        .socks {
            z-index: 3;
        }

        .lsocks {
            z-index: 2;
        }

        .base {
            z-index: 1;
        }