/* ===== Importação de Fontes ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');

/* ===== Variáveis Globais ===== */
:root {
    --primary-color: #007bff; /* Cor primária (azul) para X1 */
    --secondary-color: orange; /* Cor secundária (laranja) para W11 */
    --danger-color: #964b00; /* Cor de alerta para B1 */
    --background-color: #f0f4f8 !important;
    --font-family: 'Roboto Slab', Arial, sans-serif;
    --font-size-large: 1.5em;
    --font-size-medium: 1.2em;
    --transition-duration: 0.5s;
    --transition-ease: ease;
    --animation-duration: 2s;
    --animation-ease: ease-out;
    --border-radius: 20px;
    --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	 --sparkle-color: #FFD700;      /* Cor da estrela alterada para dourado */
	 --sparkle-size: 20vw;         /* Tamanho responsivo da estrela */
}

/* ===== Reset e Estilos Globais ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
	/* === Bordas ===
	border:1px solid black;
	/* === Bordas ===*/
}

/* Container de introdução que cobre toda a tela */
#introContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.97); /* Cor de fundo original do seu projeto */
  z-index: 1000;
  overflow: hidden;
  transition: opacity 1s ease-out;
  display: flex;        /* Para centralizar #introTextWrapper */
  align-items: center;  /* Para centralizar #introTextWrapper */
  justify-content: center; /* Para centralizar #introTextWrapper */
}

/* Wrapper para os textos de introdução (AGORA SERÁ A CAIXA PRETA ANIMADA) */
#introTextWrapper {
  position: relative; /* Mantém */
  z-index: 2;         /* Mantém */
  /* text-align: center; /* Será tratado pelo flexbox abaixo */

  /* Novos estilos para a caixa */
  background-color: black;
  border-radius: 20px;  /* Ajuste o arredondamento conforme desejar */
  padding: 25px 40px;   /* Espaçamento interno da caixa (vertical horizontal). Ajuste! */
  display: inline-flex; /* Faz a caixa se ajustar ao conteúdo */
  flex-direction: column; /* Empilha o logo e o subtítulo verticalmente */
  align-items: center;    /* Centraliza o conteúdo horizontalmente */
  justify-content: center;/* Centraliza o conteúdo verticalmente */
  
  /* A animação principal é movida para cá */
  animation: fadeInGrowOriginal 4s ease-out forwards;
  opacity: 0; /* Estado inicial para a animação */
  transform-origin: center center; /* Garante que o scale seja a partir do centro */
  /* Para evitar que o conteúdo "vaze" das bordas arredondadas durante a animação, se necessário */
  /* overflow: hidden; */ /* Descomente se notar problemas com o conteúdo e as bordas */
}

/* O canvas do particles.js preencherá esse container */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Texto de introdução centralizado sobre os particles */
.intro-message {
  /* position: relative;  <-- Removido ou ajustado, pois o wrapper cuida do posicionamento geral */
  /* z-index: 2; <-- O wrapper agora tem z-index: 2 */
  font-family: 'Roboto Slab', sans-serif;
  /* font-size: 4em; <-- Será definido por ID específico */
  color: white;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  /* text-align: center; <-- O wrapper já faz isso */
  /* top: 50%; <-- Removido */
  /* transform: translateY(-50%); <-- Removido */
  transition: opacity 0.5s ease-out; /* Para outras transições, se houver */
  font-weight: bold;
  /* animation: fadeInGrow 4s ease-out forwards; <-- Será definido por ID específico */
  opacity: 0; /* Importante: As animações individuais controlarão o fade-in */
}

/* Estilo específico para a mensagem principal (LOGO) */
#introMessage {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  opacity: 1; /* ADICIONE ESTA LINHA! */ /* Isso fará com que o contêiner do logo seja opaco. */
}

/* Estilo para a imagem dentro de #introMessage (permanece o mesmo ou ajuste conforme anterior) */
#introMessage img {
  max-width: 100%; /* Permite que a imagem use a largura do #introMessage */
  max-height: 300px; /* Ajuste este valor conforme o tamanho final desejado para o logo */
  height: auto;
  object-fit: contain;
}

/* Animação original para "HELLO, AI!" (AGORA USADA PELO #introTextWrapper) */
/* Nenhuma mudança necessária na definição @keyframes em si */
@keyframes fadeInGrowOriginal {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Estilo específico para a sub-mensagem "Literacy in Artificial Intelligence" */
#subIntroMessage.sub-intro-style {
  font-size: 2.2em; /* O tamanho da fonte será relativo à caixa que está escalonando */
  animation: fadeInSlideUpLiteracyRevised 4s ease-out forwards; /* Usaremos uma animação revisada */
  animation-delay: 3s; /* Mantém o atraso para aparecer após o título principal */
  opacity: 0; /* Estado inicial para sua própria animação de fade e slide */
  color: white; /* Garante que o texto seja branco sobre o fundo preto */
}

/* Nova animação REVISADA para "Literacy in Artificial Intelligence" (sem o 'scale') */
@keyframes fadeInSlideUpLiteracyRevised {
  0% {
    opacity: 0;
    transform: translateY(30px); /* Apenas sobe e aparece */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== Barra Superior ===== */
.top-bar {
  display: flex;
  /* justify-content: space-between; MODIFICADO: Removido para que .top-bar-left possa ocupar 100% e usar seu próprio wrap */
  align-items: center; /* Alinha verticalmente os itens se .top-bar-left tiver altura definida ou se houver outros elementos diretos */
  width: 100%;
  /* height: 48px; MODIFICADO: Removido para permitir altura dinâmica com flex-wrap */
  min-height: 48px; /* MODIFICADO: Adicionado para garantir uma altura mínima */
  background-color: #333;
  padding: 10px 15px; /* MODIFICADO: Ajustado padding */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
}

.top-bar-button { /* Estilo de link para elementos <a> que são botões */
    text-decoration: none;
}

/* MODIFICADO: .top-bar-left agora contém todos os botões */
.top-bar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha */
  gap: 10px; /* MODIFICADO: Espaçamento entre os botões e grupos de botões */
  width: 100%; /* Ocupa toda a largura para que o wrap funcione corretamente */
}

/* MODIFICADO: .top-bar-right não é mais necessário e pode ser removido do CSS se não houver outros usos */
/* .top-bar-right { ... } */


/* ===== Botões da Barra Superior ===== */
.top-bar-button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1em;
    font-family: var(--font-family);
    /* margin-right: 20px; MODIFICADO: Removido, o gap em .top-bar-left controla o espaçamento */
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 5px; /* Adicionado um pequeno padding para melhor toque */
}

.top-bar-button i {
    margin-right: 8px;
    font-size: 1.2em;
}

.top-bar-button:hover {
    color: #4aadf0;
}

.top-bar-button:focus {
    outline: none;
    color: #4aadf0;
}

.top-bar-button:disabled {
    color: #777;
    cursor: not-allowed;
}

/* Estilo do Menu de Níveis */
.level-menu-container {
    position: relative;
    display: inline-block; /* Mantido para que os dropdowns se posicionem corretamente */
}

.level-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #2c3e50;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 5000;
    padding: 12px;
}

.level-dropdown.show {
    display: block;
}

.level-section {
    margin-bottom: 12px;
}

.level-header {
    color: #3498db;
    font-weight: bold;
    padding: 8px;
    border-bottom: 1px solid #34495e;
		    z-index: 5000;

}

.phase-list {
    list-style: none;
    padding-left: 20px;
    margin: 8px 0;
	z-index: 5000;

}

.phase-item {
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
	color:#32de84;
}

.phase-item:hover:not(.soon) {
    background: #34495e;
    color: #ecf0f1;
}

.soon {
    color: #7f8c8d;
    cursor: not-allowed;
    opacity: 0.7;
	pointer-events: none;
}

.idiom-option.soon {
  color: #7f8c8d;
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}


.idiom-menu-container {
  position: relative;
  display: inline-block;
}

.idiom-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #2c3e50;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  z-index: 5000;
  padding: 12px;
}

.idiom-dropdown.show {
  display: block;
}

.idiom-option {
  padding: 8px;
  cursor: default;
  color: #32de84;
  font-weight: bold;
}

/* Responsividade para a Barra Superior */
/* MODIFICADO: Ajustado breakpoint e estilos para a nova estrutura */
@media (max-width: 768px) { 
    .top-bar {
        padding: 10px;
        /* flex-direction: column; /* Não é mais necessário, .top-bar-left já usa wrap */
        /* height: auto; /* Já é dinâmico */
    }

    .top-bar-left {
        justify-content: center; /* Centraliza os botões quando quebram linha */
        gap: 8px; /* Reduz o gap em telas menores */
    }

    .top-bar-button {
        /* margin: 5px 0; /* O gap já cuida disso, mas pode ser ajustado */
        font-size: 0.9em; /* Reduzir um pouco o tamanho da fonte dos botões */
    }

    .top-bar-button i {
        font-size: 1.1em; /* Ajustar tamanho do ícone */
    }

    /* Opcional: Ocultar texto de botões específicos em telas muito pequenas */
    /* Exemplo:
    .speed-button span { display: none; } 
    .speed-button i { margin-right: 0; }
    */
}


.unplugged-menu-container {
  display: inline-block; /* Mantido */
  position: relative;
  /* margin-left: 10px; /* Removido, o gap em .top-bar-left controla */
}

/* Container do menu social */
.social-menu-container {
  position: relative;
  display: inline-block; /* Mantido */
  /* margin-left: 20px; /* Removido, o gap em .top-bar-left controla */
}

/* Dropdown do menu social (inicialmente oculto) */
.social-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0; /* Alinha à direita do botão social */
  min-width: 160px;
  background: #2c3e50;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  padding: 10px 0;
  z-index: 5000;
}

/* Mostra o dropdown quando estiver com a classe 'show' */
.social-dropdown.show {
  display: block;
}

/* Estilo dos links dentro do dropdown */
.social-option {
  color: #32de84; /* Ajuste a cor conforme sua identidade visual */
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: background 0.3s ease;
}

/* Espaçamento para os ícones */
.social-option i {
  margin-right: 8px;
  font-size: 1.2em;
}

/* Efeito hover */
.social-option:hover {
  background: #34495e;
  color: #ecf0f1;
}


/* Exemplo de layout em 2 colunas para .main-grid */
.main-grid {
    display: none; /* Mantido, controlado por JS */
    grid-template-columns: 20% 80%; /* 20% para grid-left, 80% para grid-right */
    grid-template-rows: 95vh;       /* Define a altura das linhas do grid */
    width: 100vw;                   /* Largura total da janela */
    height: calc(100vh - 60px);     /* Altura considerando a barra superior (ajuste se a altura da barra mudar) */
    margin-top: 60px;               /* Desloca a main-grid para baixo da barra superior (ajuste se a altura da barra mudar) */
}


/* Área Esquerda */
.grid-left {
  position: relative;
  overflow-y: auto;  
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* MODIFICADO: Para scroll suave no iOS */
}


/* Área Direita */
.grid-right {
  position: relative;
  overflow-y: auto;  
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* MODIFICADO: Para scroll suave no iOS */
  /* Novo: usar flex para centralizar o conteúdo interno */
  display: flex;
  justify-content: center; /* Alinhamento horizontal */
  align-items: center;     /* Alinhamento vertical */
}

/* Contêiner interno que manterá o posicionamento absoluto dos filhos */
.grid-right-inner {
  position: relative;  
  /*
    Defina uma largura e altura mínimas
    suficientes para “comportar” os filhos absolutos.
    Ajuste esses valores conforme necessidade:
  */
  min-width: 800px;  
  min-height: 600px;
}

.grid-left,
.grid-right {
  border: 1px solid #ccc;     /* Borda cinza clara */
  border-radius: 8px;         /* Bordas arredondadas */
  box-shadow: var(--box-shadow);  /* Sombra sutil para profundidade */
  margin: 10px;               /* Espaçamento externo para separar os grids */
}


body {
    margin: 0;
    background-color: var(--background-color);
    font-family: var(--font-family);
	/*background: radial-gradient(circle at center, #ffffff, #e0e0e0, #c0c0c0);
	  background: linear-gradient(to bottom, #e0f7ff, #a0d8ef, #70c0e0);*/
}


/* ===== Utilitários ===== */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Máscaras da esquerda e direita */
/* ====== Máscaras Esquerda e Direita ====== */
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(127, 127, 127, 0.97);  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-family: var(--font-family);
    z-index: 10; /* Superior ao conteúdo dos grids */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mask.mostrar {
    opacity: 1;
    visibility: visible;
}

/* Conteúdo interno das máscaras */

.mask-content {
    text-align: center;
}

.mask-content h2 {
    font-size: var(--font-size-large);
    margin-bottom: 20px;
	  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.mask-button {
    font-size: 6em;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    transition: transform 0.3s ease;
    padding: 10px;
	 z-index: 20;  

}

.mask-button:hover {
    transform: scale(1.3);
}

/* Responsividade para máscaras */

@media (max-width: 600px) {
    .mask {
        /* Manter 100% de largura e altura para cobrir todo o grid */
    }

    .mask-content h2 {
        font-size: 1.5em;
    }

    .mask-button {
        font-size: 1.5em; /* Reduzido para 4em, ajuste conforme necessário */
    }
}


/* ===== Componentes ===== */
/* 1) Container que usa display: grid */
.container-grid {
    display: grid;
    /* Cria 3 "linhas": ruacom-1, rua, e rua-button-container */
    grid-template-rows: auto 1fr auto;  
    width: 100%;  
    margin-top: 8%;  
    gap: 5%; /* Espaçamento entre as linhas */
}


.ruacom-1 {
  color: var(--background-color);
  width: 80%;        
  text-align: center;
  display: flex;
    align-items: center;
}

.rua {
  position: relative;
  display: flex; /* Altera para flex */
  flex-direction: column; /* Alinha os itens em coluna */
  align-items: center; /* Centraliza horizontalmente */
  justify-content: center; /* Centraliza verticalmente */
  width: 100px; /* Ajuste conforme necessário */
  margin: 0 auto;

  /* Aplica borda preta para as laterais e o topo */
  
  border: 4px solid black;

  /* Remove a borda inferior */
  border-bottom: 4px solid var(--background-color); /* Cor da borda inferior igual ao fundo */
    border-top: 4px solid var(--background-color); /* Cor da borda inferior igual ao fundo */


  /* Ajusta o box-sizing para garantir consistência no tamanho */
  box-sizing: border-box;
}

.rua-button-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    /* Adicione mais estilos conforme necessário */
}



.hidden-number {
    opacity: 0;
    transition: opacity 0.5s ease; /* Suaviza a transição quando a classe é removida */
    /* Remova quaisquer outras propriedades que possam afetar o layout, como position, float, etc. */
}


.popUpNumber {
  animation: popupScale 0.6s ease forwards; /* “cresce” e permanece visível */
  
}


.muro {
    position: relative;
    background-color: #ccc;
    width: 110%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	  margin-top: -5px;  

}

.muro .emoji-muro {
    font-size: 4em;
    transform: scale(1.5, 1.1);
    filter: grayscale(100%);
    opacity: 0.3;
}

.muro .numero {
    position: absolute;
    font-weight: bold;
    font-size: var(--font-size-large);
    color: black;
    z-index: 0;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.distancia {
    display: flex;
    justify-content: center;
    align-items: center;
	width: 20%;
    height: 60px;
    font-size: var(--font-size-large);
    font-weight: bold;
    position: relative;
    text-align: center;
    left:10%;
   /*border: 1px dashed red;*/
}

.distancia.numero {
  /* Adicione estilos específicos se necessário */
  text-align: center;
}

.distancia.numero[data-numero="-1"] {
  visibility: hidden;
}

.distance-popup {
  color: #007bff;
  font-weight: bold;
  font-size: 1.5em;
  position: absolute;
  top: -50px; /* Posição acima da rua */
  left: 50%;
  transform: translateX(-50%) scale(0.8); /* Tamanho inicial menor */
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.distance-popup.mostrar {
  animation: popupEffect 0.6s ease forwards; /* Animação para o efeito popup */
}

/* Keyframes para o efeito popup */
@keyframes popupEffect {
  0% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.3); /* Cresce 30% */
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1); /* Volta ao tamanho normal */
    opacity: 1;
  }
}

.grupo1 {
	position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100px;
    opacity: 0;
    animation: desfoqueGrupo1 var(--animation-duration) var(--animation-ease) 1s forwards;
	top: 60%;
	transform: translateY(50%);
	transition: transform 1s ease-in-out !important;
}


@keyframes desfoqueGrupo1 {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.sensor1 {
    position: relative;
    width: 160px;
    height: 110px;
    background-color: #d3d3d3;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-31%) translateY(45%) rotate(180deg);
    opacity: 0;
    animation: aparecerSensor var(--animation-duration) var(--animation-ease) 9s forwards;
}

.sensor1.desaparecer {
    animation: desaparecerSensor 1s forwards !important;
    pointer-events: none !important;
}

.sensor1::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 30px;
    width: 100px;
    height: 80px;
    background-color: var(--background-color);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    border-radius: 50%;
}

.x1-label {
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: bold;
    color: var(--primary-color);
    position: absolute;
    top: 80px;  
    left: 50%;
    transform: translateX(-50%);
    text-align: center;       	
}

.sensor1 .x1 {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    width: 25px;
    height: 40px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    font-weight: bold;
    font-size: var(--font-size-large);
    font-family: var(--font-family);
}

/* Correção para garantir que o "X" seja visível */
.sensor1 .x1::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: var(--primary-color);
}


@keyframes aparecerSensor {
    from {
        opacity: 0;       
    }
    to {
        opacity: 1;  
    }
}

@keyframes desaparecerSensor {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* Carro */
.carro1 {
    width: 40px;
    margin-top: 125px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: desfoqueCarro var(--animation-duration) var(--animation-ease) 1s forwards;	
	    transition: all 1s ease-in-out !important;

}



@keyframes desfoqueCarro {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}


/* ===== Botão Face Traseira na Grid-Left ===== */
.face-traseira-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 3px solid black;
    border-radius: var(--border-radius);
    pointer-events: none; /* Impede interações quando oculto */
    cursor: default; /* Mantém cursor padrão */
    transition: transform 0.3s ease, opacity 0.5s ease;
    width: 150px; /* Ajuste conforme necessário */
    height: 80px; /* Ajuste conforme necessário */
    margin-top: 40px; /* Aumentado de 20px para posicionar mais abaixo */
    opacity: 0;
    transform: translateY(40px) rotate(180deg); /* Adiciona rotação */
    /* Pode adicionar animações adicionais se desejar */
}

.face-traseira-button img.carro-output {
    width: 25px; /* Ajuste conforme a imagem do carro */
    transform: rotate(180deg); /* Corrige a rotação do carro */
    margin-top: -75px; /* Move o carro um pouco mais para baixo */
}

.face-traseira-button .emoji-seta-baixo {
    font-size: 1.8em; /* Ajuste o tamanho da seta */
    margin-bottom: 5px; /* Espaçamento entre a seta e o carro */
    margin-top: 20px; /* Move a seta um pouco mais para cima */
}

/* Estado Visível */
.face-traseira-button.visivel {
    opacity: 1;
    transform: translateY(0) rotate(180deg); /* Mantém a rotação */
	 pointer-events: auto; /* Habilita interações quando visível */
    cursor: pointer; /* Mostra cursor de mãozinha apenas quando visível */
}

/* Hover Effect */
.face-traseira-button:hover:not(:disabled) {
    transform: scale(1.05) rotate(180deg);
}

/* Estado desabilitado */
.face-traseira-button:disabled {
    cursor: not-allowed;
}

/* ===== Botão Face Traseira Ativo ===== */
.face-traseira-button.active {
    background-color: #93C572;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}


/* ===== Responsividade para o Novo Botão ===== */
@media (max-width: 600px) {
    .face-traseira-button {
        width: 120px;
        height: 70px;
        margin-top: 30px; /* Ajuste para telas menores */
    }

    .face-traseira-button img.carro-output {
        width: 20px;
    }

    .face-traseira-button .emoji-seta-baixo {
        font-size: 1.3em;
    }
}

/* Faz com que ambos os spans fiquem em linha */
.emoji-alvo,
.thumb-emoji-left {
	margin-left: 16%; /* Espaçamento entre o número e o emoji */
    font-size: 2.3em; /* Ajuste conforme necessário */
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* A classe "visivel" faz com que os emojis apareçam */
.emoji-alvo.visivel,
.thumb-emoji-left.visivel {
  opacity: 1;
}

/* Espaçamento para posicionar o thumb-emoji à direita */
.thumb-emoji-left {
  margin-left: 8%; /* ajuste conforme necessário */
}

.desaparecer {
    animation: desaparecerSensor var(--animation-duration) forwards;
}

/* styles.css */
.nova-mensagem-container {
  text-align: center;
  color: white;
  padding: 40px;
}

.mensagem-ai-solution {
  font-size: 2em;
  margin-bottom: 1em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


.flip-container {
    width: 150px;
    height: 80px;
    perspective: 1000px;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-ease);
    background: none;  
    border: none;  
    padding: 0;  
    cursor: pointer;  
}

.flip-container.mostrar {
    opacity: 1;
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-container.mostrar .flipper {
    transform: rotateX(0deg);
}

.flip-container.flip .flipper {
    transform: rotateX(180deg);
}

.flip-container:disabled {
    cursor: not-allowed;  
	 pointer-events: none; /* Impede interações adicionais */
}


/* Faces do Flip */
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 3px solid blue;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.back {
    transform: rotateX(180deg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Classe para alterar a cor de fundo da .back */
.background-alterado-back {
    background-color: #d3d3d3;
    transition: background-color var(--transition-duration) var(--transition-ease);
}

/* Input1 Back */
.input1-back-text {
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: bold;
    color: blue;
}

/* X1i1 */
.back .x1i1 {
    width: 25px;
    height: 40px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    font-weight: bold;
    font-size: var(--font-size-large);
    position: relative;
    margin-top: 20px; /* Move para baixo */
	 font-family: var(--font-family);
	 index: 999;
}

.back .x1i1-label {
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: bold;
    color: var(--primary-color);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.x1i1-value {
    position: absolute;
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-ease),
                transform var(--transition-duration) var(--transition-ease);
}

.x1i1-value.mostrar {
    opacity: 1;
}


/* Emoji de Celebração */
.emoji-celebracao {
    position: absolute;
    top: 20px;
    left: 50%;
    font-size: 4em;
    opacity: 0;
}

/* Classe que aciona a animação somente quando adicionada dinamicamente */
.mostrar-emoji-celebracao {
    animation: aparecerEmoji 1.5s forwards;
}

@keyframes aparecerEmoji {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mensagem-incentivo-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 100px;  
  z-index:3004;
  opacity: 0;
    display: none; /* Para não aparecer de cara */

}

.mensagem-incentivo {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  z-index: 3004;  
}

.botao-try-again,
.botao-next-level {
    font-family: var(--font-family); /* Mesma fonte definida nas variáveis globais */	
  font-size: 1rem;  
  padding: 10px 20px;  
  margin: 5px;
  background-color: #007BFF;
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.botoes-container {
  display: flex;
  gap: 10px;
  justify-content: center;  
  margin-top: 20px;
}


/* Efeito de hover para o botão */
.botao-try-again:hover {
  background-color: #24b9f0 !important;
  transform: scale(1.05);
}

.botao-next-level:hover {
    background-color: #1e7e34 !important;  
	transform: scale(1.05);
}

.mensagem-incentivo-container.aparecer {
  display: block; /* Agora aparece */
  animation: popupScale 0.6s ease forwards;
}

@keyframes popupScale {
  0% {
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
  }
  70% {
    transform: translateX(-50%) scale(1.10);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}



/* Conexão 11 */
.conexao11 {
    position: absolute;
    top: 40%;
	left: 344px; /* Posição inicial para animar para 406px */
    width: 150px;
    height: 5px;
    background-color: var(--secondary-color);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 2s var(--transition-ease), left 1s var(--transition-ease); /* Transições para 'opacity' e 'left' */
	    z-index: 1001;
}

/* Classe para animar 'conexao11' para a esquerda até 'left: 406px' */
.conexao11.animar-conexao11 {
    left: 150px; /* Valor final da posição esquerda */
}


.conexao11.mostrar-suave {
    opacity: 1;
}

/* Texto "WEIGHT" */
.texto-weight {
    position: absolute;
    top: calc(40% - 35px);
    left: 150px;
    width: 150px;
    text-align: center;
    font-family: var(--font-family);
    font-size: 1.5em;
    font-weight: bold;
    color: var(--secondary-color);
    opacity: 0;
    transition: opacity 1s var(--transition-ease);
}

.texto-weight.mostrar-suave {
    opacity: 1;
}

.texto-weight.esconder-suave {
    opacity: 0;
}

.texto-weight .imagem-peso {
    width: 40px;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 1s var(--transition-ease);
}

.texto-weight.mostrar-suave .imagem-peso {
    opacity: 1;
}

.texto-weight.esconder-suave .imagem-peso {
    opacity: 0;
}

/* ===== Texto "BIAS" e imagem/emoji volume ===== */
.texto-bias {
    position: absolute;
    /* Ajuste para ficar próximo do b1, que está em left: 688px */
    top: calc(40% - 15px);
    left: 384px;
    width: 150px;
    text-align: center;
    font-family: var(--font-family);
    font-size: 1.5em;
    font-weight: bold;
    color: var(--danger-color);
    opacity: 0;
    transition: opacity 1s var(--transition-ease);
	z-index: 1002;  
}

.texto-bias.mostrar-suave {
    opacity: 1;
}

.texto-bias.esconder-suave {
    opacity: 0;
}

/* .imagem-volume {
	para imagem de volume
    width: 40px;
    position: absolute;
    top: -70px;
    left: 20%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 1s var(--transition-ease);
}  

.imagem-volume {
    width: 45px;
	height:95px;
    position: absolute;
    top: -90px;
    left: 18%;
    transform: translateX(-50%) translateY(55%);
    opacity: 0;
    transition: opacity 1s var(--transition-ease);
}
*/

.imagem-volume {
    width: 70px;
	height:40px;
    position: absolute;
    top: -30%;
    left: 8%;
    transform: translateX(-50%) translateY(12%);
    opacity: 0;
    transition: opacity 1s var(--transition-ease);
}

.texto-bias.mostrar-suave .imagem-volume {
    opacity: 1;
}

.texto-bias.esconder-suave .imagem-volume {
    opacity: 0;
}

/* Definição da animação para mover a linha pontilhada */
@keyframes mover-linha {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 20px 0;
    }
}

/* Estilos para a linha pontilhada animada */
.linha-pontilhada-animada {
    width: 100%; /* Ajuste a largura conforme necessário */
    height: 5px; /* Espessura da linha */
    background-image: repeating-linear-gradient(
        to right,
        black 0,
        black 10px,
        transparent 10px,
        transparent 20px
    );
    background-size: 20px 5px; /* Deve corresponder ao tamanho do padrão */
}


/* Conexão "saida1" */
.saida1 {
    position: absolute;
    top: 40%;
    left: 344px;
    width: 150px; /* Ajuste conforme necessário */
    height: 5px; /* Espessura da linha */
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 2s var(--transition-ease), left 1s var(--transition-ease); /* Transições para 'opacity' e 'left' */
    pointer-events: none;
    z-index: 5;
}

.saida1.linha-pontilhada-animada {
    /* Estilos da animação */
    background-image: repeating-linear-gradient(
        to right,
        black 0,
        black 10px,
        transparent 10px,
        transparent 20px
    );
    background-size: 20px 5px;
}

.saida1.mostrar-suave {
    opacity: 1;
}

/* Classe base para o emoji em cima de saida1 */
.saida1-emoji {
  position: absolute;
  top: -40px; /* Ajuste conforme necessário */
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  z-index: 999;
}

/* Ao ficar visível, executa a animação growAndShrink */
.saida1-emoji.visivel {
  opacity: 1; /* para garantir a exibição */
  transition: opacity 0.5s ease-in-out;
}




/* Retângulo ao lado de "saida1" */
.output1 {
    width: 150px;
    height: 80px;
    border: none;
    border-radius: var(--border-radius);
    background-color: white;
    position: absolute;
    top: 40%;
    left: 300px;
    transform: translateY(-50%);
    opacity: 0;
    transition: left 1s var(--transition-ease), opacity 1s var(--transition-ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background: none;
	padding: 0;
	cursor: pointer;
	}


#output1 {
  z-index: 1500;  
}
	

.output-text {
    font-family: var(--font-family);
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    color: black; /* Alterar para a cor desejada */
    transition: opacity var(--transition-duration) var(--transition-ease);
    opacity: 0; /* Mantém a lógica de visibilidade */
}

.output1.mostrar-suave .output-text {
    opacity: 1;
}

/* Flip Container para retângulo1 */
.output1.flip-container {
    perspective: 1000px;
}

.output1 .flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--transition-ease);
}

.output1.flip-container.flip .flipper {
    transform: rotateX(180deg) translateX(-2%);
}

.output1 .front,
.output1 .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: var(--border-radius);
    border: 3px solid black;
    transform: translateX(-2%);
}

.output1 .front {
    background-color: white;
    color: black;
	}

.output1 .back {
    background-color: white;  
    transform: rotateY(180deg);
    color: black;
	 position: relative;  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Estilo quando o botão estiver desabilitado */
.output1:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.output1.mostrar-suave {
    opacity: 1;
}

.output1 .back .emoji-seta-baixo {
    font-size: 1.3em; /* Ajuste o tamanho da seta conforme necessário */
    color: black; /* Alterar a cor, se necessário */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px; /* Move a seta para cima */
    margin-bottom: -40px; /* Espaço entre a seta e o carro */
	
}


.output1.mostrar-suave .emoji-seta-cima {
    opacity: 1;
    transform: translateY(0);
}

/* Classe para tornar a seta opaca e desativada */
.seta-desativada {
    opacity: 0;
    pointer-events: none; /* Impede interações futuras */
    transition: opacity 1s ease;
}

/* Classe para o emoji de cadeado */
.emoji-cadeado {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-size: 1.3em; /* Ajuste o tamanho conforme necessário */
    pointer-events: none; /* Impede interações com o cadeado */
}

/* Classe para mostrar o emoji de cadeado */
.emoji-cadeado.visivel {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.7);
}

/* Opcional: Adicionar uma pequena escala para efeito de entrada */
.emoji-cadeado.aparecer {
    transform: translate(-50%, -50%) scale(1.1);
}

.emoji-cadeado.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}



/* Classe para animar 'saida1' para a direita */
.saida1.mover-saida1-direita {
    left: 500px;  
}


/* ===== Classe para mover .output1 para a direita ===== */
.mover-output1-direita {
    left: 650px;
}


/* Estilo para a imagem do carro dentro de output1 */
.carro-output {
    width: 25px; /* Ajuste o tamanho conforme necessário */
    margin-top: -30px; /* Espaço entre a seta e o carro */
    transform: rotateX(180deg);

}

.cursor-default {
    cursor: default !important;
}


/* W11 e B1 */
.w11, .b1 {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none; /* Impede interações quando não estão visíveis */
    cursor: default; /* Define o cursor padrão */
    z-index: 1002; /* Valor maior que o de conexao11 */
    transition: opacity var(--transition-duration) var(--transition-ease), pointer-events 0.3s, cursor 0.3s;
    border: none;
    padding: 0;
}

.b1 {
    top: 40%;
    left: 432px;
    border: 3px solid var(--danger-color);
    color: var(--danger-color);
}

.w11 {
    top: 40%;
    left: 195px;
    border: 3px solid var(--secondary-color);
    color: var(--secondary-color);
}


/* Quando os botões estão visíveis */
.w11.mostrar-suave, .b1.mostrar-suave {
    opacity: 1;
    pointer-events: auto; /* Permite interações */
    cursor: pointer; /* Define o cursor de ponteiro */
}

/* Flex Direction Change for Setas */
.w11.seta-visivel, .b1.seta-visivel {
    flex-direction: column;
}

/* Seta Dropdown */
.seta-dropdown {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-top: 5px;
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0s;
}

.w11 .seta-dropdown {
    border-top: 8px solid var(--secondary-color);
}

.b1 .seta-dropdown {
    border-top: 8px solid var(--danger-color);
}

.seta-dropdown.mostrar {
    opacity: 1;
}

.w11.seta-visivel .seta-dropdown,
.b1.seta-visivel .seta-dropdown {
    opacity: 1;
}

.w11.menu-ativo .seta-dropdown,
.b1.menu-ativo .seta-dropdown {
    transform: rotate(180deg);
}

/* ===== Estilos para Seta Dropdown quando Botão está Desativado ===== */
.w11:disabled .seta-dropdown,
.b1:disabled .seta-dropdown {
    opacity: 0.3;  
	    cursor: not-allowed;
	pointer-events: none; /* Impede interações adicionais */	
}

.w11-desativado {
    pointer-events: none !important;
    cursor: default !important;
}

.b1-desativado {
    pointer-events: none !important;
    cursor: default !important;
}

.b1:disabled {
  cursor: default !important;
}

.b1-desativado {
    pointer-events: none !important;
    cursor: default !important;
}


.w11:disabled {
  cursor: default !important;
}

.b1:disabled {
  cursor: default !important;
}

/* ======== Máscara branca que cobre a grade direita ======== */
.overlay-mask {
  position: absolute; /* ou relative, dependendo do seu layout */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.94); /* semitransparente */
  z-index: 3000;  /* valor alto o suficiente para cobrir a .grid-right */
  display: none;  
  /*pointer-events: none; */
}

/* Deixe w11, b1 e o emoji de celebração acima da máscara: */
#w11, #b1, .emoji-celebracao {
  z-index: 6001;  
  /* Maior que o z-index da .overlay-mask */
}

/* Opcional: Ajuste de posicionamento do "dedão" */
.thumb-emoji {
  position: absolute;
  top: -65px;  /* um pouco acima do botão */
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  opacity: 0;    
  transition: opacity 0.5s ease-in-out;
}

.thumb-emoji.mostrar {
  opacity: 1;
}


/* Menu de Opções */
.menu-opcoes, .menu-opcoes-b1 {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    background-color: #ffffff;
    border-radius: 8px;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    width: 100px;
    opacity: 0;
    transition: opacity 0.4s var(--transition-ease), transform 0.4s var(--transition-ease);
    box-shadow: var(--box-shadow);
    z-index: 2001;
}

.menu-opcoes {
    border: 2px solid var(--secondary-color);
}

.menu-opcoes-b1 {
    border: 2px solid var(--danger-color);
}

.menu-opcoes li, .menu-opcoes-b1 li {
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    font-family: var(--font-family);
	 font-size: 1.4em;  
    text-align: center;
    transition: background-color 0.3s var(--transition-ease),
                color 0.3s var(--transition-ease),
                transform 0.3s var(--transition-ease);
}

.menu-opcoes li {
    color: var(--secondary-color);
}

.menu-opcoes li:hover {
    background-color: #ffe6cc;
    color: orange;
    transform: scale(1.05);
    border-radius: 4px;
}

.menu-opcoes-b1 li {
    color: var(--danger-color);
}

.menu-opcoes-b1 li:hover {
    background-color: #f2dfd3;
    color: #964b00;
    transform: scale(1.05);
    border-radius: 4px;
}

.w11.menu-ativo .menu-opcoes,
.b1.menu-ativo .menu-opcoes-b1 {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}

/* Número Selecionado */
.numero-selecionado, .numero-selecionado-b1 {
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Labels */
.w11-label, .b1-label {
    position: absolute;
    top: -30px;
    font-size: var(--font-size-large);
    font-weight: bold;
    font-family: var(--font-family);
}

.w11-label {
    color: var(--secondary-color);
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-ease);
}

.w11-label.mostrar-suave {
    opacity: 1;
}

.b1-label {
    color: var(--danger-color);
    left: 50%;
    transform: translateX(-50%);
}

/* Neurônio 1 */
.neuronio1 {
    position: absolute;
    top: 40%;
    left: 300px;
    width: 200px;
    height: 200px;
    background-color: white;
    border: 4px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%) scale(0.8);
    opacity: 0;
    transition: opacity 1.5s var(--transition-ease), transform 1.5s var(--transition-ease);
    z-index: 1001;
}

.neuronio1-disabled {
    pointer-events: none;
    opacity: 0;
    filter: grayscale(100%);
}


.neuronio1.mostrar {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.neuronio-label {
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: bold;
    color: black;
}

/* Imagem do Neurônio */
.neuron-image {
    position: absolute;
    top: 40%;
    left: 259px;
    width: 250px;
    opacity: 0;
    transition: opacity 1.5s var(--transition-ease);
    z-index: 1001;
    transform: translateY(-50%);
    background-color: transparent;
	border: none;
	outline: none;
	display: none;
}

.simple-neuron {
  position: absolute;
  top: 25%;  
  left: 314px;  
  transform: translateY(-50%);
  opacity: 0;               
  transition: opacity 1s ease;
  font-family: var(--font-family);  
  font-size: 2em;
  font-weight: bold;
  color: blue;
  background: transparent;  
  padding: 0.2em;       /* Margem interna */
  border-radius: 6px;
  z-index: 1001;
  border-radius: 8px;    
}

.simple-neuron.mostrar {
  opacity: 1;
}


.neuron-image.mostrar {
    opacity: 1;
	display: block;
}

/* Texto "NEURON" */
/* Mantém ou ajusta conforme seu layout */
.neuron-text {
    position: absolute;      
    top: 40%;
    left: 274px;
    transform: translateY(-50%);
    font-family: var(--font-family);
    font-size: 1.5em;
    font-weight: bold;
    color: blue;
    opacity: 0;
    transition: opacity 0.5s var(--transition-ease);
    z-index: 1001;
    background: white;
    text-align: center;
	border-radius: 8px;    

}

.neuron-text.mostrar {
    opacity: 1;
}

/* Emoji de robô */
.emoji-robo {
    position: absolute;
    top: -1.5em; /* distância acima do texto; ajuste conforme necessário */
    left: 43%;
    font-size: 1.5em;  
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Faz o robô aparecer junto com o texto */
.neuron-text.mostrar .emoji-robo {
    opacity: 1;
}


.xw1 {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%) translateX(-140%);
    display: flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: 1.5em;
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-ease),
                transform 4s var(--transition-ease);
}

.xw1.mostrar-suave {
    opacity: 1;
    transform: translateY(-50%) translateX(120%);
}

.xw1 .x,
.xw1 .w {
    color: var(--primary-color);
    opacity: 1;
    position: relative;
}

.xw1 .dot {
    color: black;
    margin: 0 2px;
	font-size: 0.8em;
	font-family: 'Arial';  
	font-weight: bold;

}

.xw1 .w {
    color: var(--secondary-color);
}

.xw1 .x-number,
.xw1 .w-number {
    position: absolute;
    top: 0px; /* Ajustado para posicionar acima das letras */
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-ease),
                transform var(--transition-duration) var(--transition-ease);
    font-weight: bold;
    font-size: 1em;
    pointer-events: none;
}

.xw1 .x-number {
    left: 0;
    color: var(--primary-color);
}

.xw1 .w-number {
    left: 35px;
    color: var(--secondary-color);
}

.xw1 .x-number.visible,
.xw1 .w-number.visible {
    opacity: 1;
    transform: translateY(0);
}

.xw1 .x.mostrar,
.xw1 .w.mostrar {
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-ease),
                transform var(--transition-duration) var(--transition-ease);
}

.xw1 .x,
.xw1 .w,
.xw1 .x-number,
.xw1 .w-number,
.xw1 .dot {
    transition: opacity 1s ease;
}


.xw1-result {
    position: absolute;
    transform: translateX(85px);
    font-size: 1.4em;
    font-weight: bold;
    opacity: 0; /* Começa invisível */
}


/* Quando aplicamos a classe 'fase2' no xw1, os elementos desaparecem */
.xw1.fase2 .x,
.xw1.fase2 .w,
.xw1.fase2 .x-number,
.xw1.fase2 .w-number,
.xw1.fase2 .dot {
    opacity: 0;
	transition: opacity 1.5s ease-in-out; /* Transição suave de 1 segundo */

}

/* Quando aplicamos a classe 'fase3' no xw1, o resultado final aparece */
.xw1.fase3 .xw1-result {
    opacity: 1;
	transition: opacity 3.5s ease-in-out;  
	    transform: translateX(15px);
	}
	
.v1 {
    position: absolute;
    width: 4px;
    height: 195px;
    background-color: black;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    opacity: 0;  
    transition: opacity 1.5s ease-in-out; /* Transição definida no CSS */
    z-index: 1;
}

.v1.mostrar {
    opacity: 1; /* Ao adicionar esta classe, a opacidade irá para 1 com transição suave */
	    transition: opacity 1.5s ease-in-out; /* Transição definida no CSS */

}

.m1 {
    position: absolute;
    width: 35px;
    height: 45px;
    border-radius: 10px;
    border: 4px solid black;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center; /* Volte a centralizar verticalmente */
    font-weight: bold;
    font-size: 1.8em;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;  
    transition: opacity 1.5s ease-in-out;
    z-index: 2;
	line-height: 1.1; /* Ajuste o line-height para posicionar verticalmente o texto */
}


.m1.mostrar {
    opacity: 1; /* Ao adicionar esta classe, a opacidade irá para 1 com transição suave */
	    transition: opacity 0.5s ease-in-out; /* Transição definida no CSS */
}

/* Classe para saída verde */
.saida-verde.linha-pontilhada-animada {
    /* Estilos da animação */
    background-image: repeating-linear-gradient(
        to right,
        #93C572 0,
        #93C572 10px,
        transparent 10px,
        transparent 20px
    );
    background-size: 20px 5px;
    animation: mover-linha 1s linear infinite;
}

/* Classe para saída vermelha */
.saida-vermelha.linha-pontilhada-animada {
    /* Estilos da animação */
    background-image: repeating-linear-gradient(
        to right,
        #fd5c63 0,
        #fd5c63 10px,
        transparent 10px,
        transparent 20px
    );
    background-size: 20px 5px;
   /* animation: mover-linha 1s linear infinite; */
}


.output-verde .front,
.output-verde .back {
    background-color: #93C572 !important;
}


.output-vermelha .front,
.output-vermelha .back {
    background-color: #fd5c63 !important;
}



/* Estilos para o Botão do Cérebro *//* Estado padrão do emoji */
.emoji-content {
    transition: transform 0.6s ease; /* Define a transição no estado padrão */
}

/* Transformação aplicada apenas ao emoji no hover */
.emoji-cerebro:hover .emoji-content {
    transform: translateY(-7px);
    /* A transição já está definida no estado padrão */
}

.emoji-cerebro {
    position: absolute;
    top: 32%;
    left: 169px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 5.5em;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 5000;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
}

.emoji-cerebro.mostrar {
    opacity: 1;
}

/* Estilos para o Botão 'emojiCerebro' Desabilitado */
.emoji-cerebro:disabled {
    cursor: not-allowed;
	pointer-events: none; /* Impede interações adicionais */	
}


.emoji-cerebro:hover::after {
    opacity: 1;
}

.emoji-cerebro:focus {
    outline: none;
}

.emoji-cerebro::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0;
    transition: opacity 0.6s ease; /* Ajuste a duração para combinar com o movimento do emoji */
    z-index: -1;
}

/* Emoji "Backhand Index Pointing Down" */
.emoji-backhand-down {
  position: absolute;
  bottom: 100%;
  margin-bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3em;
  opacity: 1;               
  transition: opacity 0.5s ease;  
  z-index: 1003;
}

.emoji-backhand-down.fade-out {
  opacity: 0;
}

/* ===== Animations ===== */
@keyframes aparecerEmoji {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes bounceHand {
  0%   { transform: translateX(-50%) translateY(0); }
  25%  { transform: translateX(-50%) translateY(8px); }
  50%  { transform: translateX(-50%) translateY(0); }
  75%  { transform: translateX(-50%) translateY(5px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.bounce-hand {
  animation: bounceHand 1.5s ease-in-out 1 forwards;  
}


/* ===== Sparkle ===== */

.sparkle-container {
    position: absolute;
    /* Ajuste as coordenadas conforme necessário */
    /* Aqui supomos que x1i1 está mais ou menos centralizado na back face do flip */
    top: 70%;    
    left: 52%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Para não interferir em cliques */
    z-index: 9999;        /* Garantir que apareça na frente */
}

/* Estilos do SVG da estrela */
svg.sparkle {
    width: var(--sparkle-size);
    height: var(--sparkle-size);
    fill: var(--sparkle-color);
}

/* Transformações iniciais */
.group {
    transform: translate(42.5px, 42.5px);
}

path {
    transform: translate(-42.5px, -42.5px);
}

/* Animações */
.large {
    animation: large var(--animation-duration) 1 forwards; /* Estado final permanece */
}

.large-2 {
    animation: large-2 var(--animation-duration) 1 forwards; /* Estado final permanece */
}

.small {
    animation: small var(--animation-duration) 1 forwards; /* Estado final permanece */
}

@keyframes large {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* Desaparece no final */
        transform: rotate(360deg) scale(1.5);
    }
}

@keyframes large-2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* Desaparece no final */
        transform: rotate(405deg) scale(1.1);
    }
}

@keyframes small {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* Desaparece no final */
        transform: rotate(-360deg) scale(1.5);
    }
}

/*** confetti ***/
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  border-radius: 50%;
  animation: rise linear; /* ← Remove ou comente esta linha */
  z-index: 3003;
  /* Centraliza no contêiner */
  left: 50%;
  transform: translateX(-50%);
}

/******* ********/
/* Estilos para os botões de controle de velocidade */
.speed-button {
    /* Herda estilos de .top-bar-button */
    position: relative;
    padding-right: 10px; /* Ajustado para consistência com outros botões */
}

.speed-button.active {
    color: #4aadf0;
}

.speed-button:not(.active) {
    opacity: 0.8;
}

.speed-button:hover:not(.active) {
    opacity: 1;
}

.speed-button::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #4aadf0;
    transition: width var(--transition-duration) var(--transition-ease);
}

.speed-button.active::after {
    width: 100%;
}

@keyframes popEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Quando o botão tiver a classe "active", dispara a animação */
.speed-button.active {
  animation: popEffect 0.3s ease-out;
}


/* Responsividade para telas menores */
@media (max-width: 768px) { /* Mantido breakpoint consistente */
    .speed-button {
        font-size: 0.9em; /* Já ajustado na regra geral de .top-bar-button para este breakpoint */
        /* margin-right: 10px; /* Removido, gap controla */
    }
    
    .speed-button i {
        margin-right: 4px;
    }
}

@media (max-width: 576px) {
    /* Opcional: Ocultar texto em telas muito pequenas, mantendo apenas o ícone */
    /* Seletor mais específico para não afetar todos os spans de todos os botões */
    .speed-button > span { /* Seleciona apenas o span que é filho direto do speed-button */
        display: none; 
    }
    
    .speed-button i {
        margin-right: 0;
    }
}
	
/******* ********/
@media (max-width: 600px) { /* Este breakpoint pode ser ajustado ou combinado com o de 768px */
  .main-grid {
    grid-template-columns: 1fr; /* Coloca tudo em uma coluna só */
    grid-template-rows: auto auto; /* Altura automática para as linhas */
    height: auto; /* Altura total automática */
    margin-top: 0; /* Ajustar se a barra superior tiver altura variável e fixa */
    padding-top: 70px; /* Adicionar padding para não sobrepor a barra superior, ajuste conforme altura da barra */
  }
   .grid-left, .grid-right {
    min-height: 50vh; /* Garante que cada seção tenha alguma altura */
  }
   .grid-right-inner {
    min-width: 90%; /* Ajustar para telas menores */
    min-height: auto;
  }
}

@media (max-width: 600px) {
  .grupo1 {
    /* Ajuste esses valores conforme necessário para telas menores */
    /* Estas posições absolutas podem precisar de uma abordagem mais responsiva,
       talvez usando % ou transformações relativas ao tamanho do pai.
       Por enquanto, vou manter os valores que você tinha, mas eles podem precisar de ajuste.
    */
    left: 25%;  
    top: 35%;
    transform: translateY(120%);
  }
}

/* ===== ESTILOS DO MODAL DA NEWSLETTER ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6000; /* Acima da top-bar e outros elementos */
    display: flex; /* Usado para centralizar o modal-content */
    align-items: center;
    justify-content: center;
    /* display: none; por padrão, controlado via JS */
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escurecido */
    cursor: pointer;
}

.modal-content {
    position: relative; /* Para o botão de fechar se posicionar em relação a ele */
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 6001; /* Acima do overlay */
    width: 90%;
    max-width: 500px; /* Largura máxima do modal */
    text-align: center;
    color: #333;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-family: var(--font-family);
    color: var(--primary-color); /* Ou outra cor de sua preferência */
}

.modal-content p {
    margin-bottom: 20px;
    font-family: Arial, sans-serif; /* Fonte mais padrão para parágrafos */
    line-height: 1.6;
}

.modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5em;
    color: #888;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.modal-close-button:hover {
    color: #333;
}

.substack-embed-container {
    margin-top: 20px;
}

/* Estilo para o iframe do Substack (opcional, mas pode ajudar no responsivo) */
.substack-embed-container iframe {
    max-width: 100%; /* Garante que não ultrapasse o container */
    /* Você pode precisar ajustar a altura aqui ou no próprio iframe */
}

/* Esconder o modal com classe, em vez de display:none inline */
.modal.hidden {
    display: none;
}
.modal:not(.hidden) { /* Garante que a regra display:flex seja aplicada quando não estiver hidden */
    display: flex;
}