/* ============ ANIMAÇÕES DOS BOTÕES ============ */
        @keyframes pulse-santa {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes spin-christmas {
            0% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(10deg) scale(1.05); }
            50% { transform: rotate(0deg) scale(1); }
            75% { transform: rotate(-10deg) scale(1.05); }
            100% { transform: rotate(0deg) scale(1); }
        }

        @keyframes pulse-carnival {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.15) rotate(10deg); }
        }

        /* ============ FLOCOS DE NEVE ============ */
        .snowflake {
            position: absolute;
            top: -10%;
            color: white;
            text-shadow: 0 0 5px rgba(255,255,255,0.8);
            animation: fall linear infinite;
            pointer-events: none;
        }

        @keyframes fall {
            to { transform: translateY(110vh); }
        }

        /* ============ LUZES PISCANTES ============ */
        .light-string {
            position: absolute;
            display: flex;
            pointer-events: none;
        }

        .light {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            box-shadow: 0 0 10px currentColor;
            animation: blink 1s infinite alternate;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.3; transform: scale(0.9); }
        }

        /* ============ TRENÓ PAPAI NOEL ============ */
        .santa-sleigh-big {
            position: fixed;
            top: 15%;
            left: -450px;
            z-index: 10000;
            animation: fly-across 12s linear;
            pointer-events: none;
        }

        @keyframes fly-across {
            to { left: 110%; }
        }

        .reindeer-jump {
            animation: jump 0.6s ease-in-out infinite;
        }

        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* ============ MORCEGOS VOANDO ALEATORIAMENTE ============ */
        .bat-flying {
            position: fixed;
            z-index: 10000;
            pointer-events: none;
            font-size: 35px;
            animation: bat-random-fly linear;
        }

        @keyframes bat-random-fly {
            0% { transform: translate(0, 0) scaleX(1); }
            25% { transform: translate(var(--x1), var(--y1)) scaleX(-1); }
            50% { transform: translate(var(--x2), var(--y2)) scaleX(1); }
            75% { transform: translate(var(--x3), var(--y3)) scaleX(-1); }
            100% { transform: translate(var(--x4), var(--y4)) scaleX(1); }
        }

        /* ============ VAMPIRO APARECENDO ============ */
        .vampire-appear {
            position: fixed;
            z-index: 10000;
            pointer-events: none;
        }

        .vampire-center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: vampire-jump-scare 3s ease-out;
        }

        @keyframes vampire-jump-scare {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            10% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
            20% { transform: translate(-50%, -50%) scale(1.1); }
            30% { transform: translate(-50%, -50%) scale(1.2); }
            80% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
        }

        /* ============ BOLA INDO PARA O GOL ============ */
        .soccer-ball {
            position: fixed;
            font-size: 60px;
            z-index: 10000;
            pointer-events: none;
        }

        .ball-shoot {
            bottom: 10%;
            left: 10%;
            animation: ball-to-goal 2s ease-in;
        }

        @keyframes ball-to-goal {
            0% {
                bottom: 10%;
                left: 10%;
                transform: rotate(0deg) scale(1);
            }
            100% {
                bottom: 50%;
                left: 80%;
                transform: rotate(720deg) scale(0.5);
            }
        }

        /* ============ GOL APARECENDO ============ */
        .goal-text {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            z-index: 10001;
            pointer-events: none;
            font-size: 120px;
            font-weight: bold;
            text-shadow: 
                0 0 20px rgba(255,255,255,0.8),
                0 0 40px rgba(255,223,0,0.6),
                5px 5px 10px rgba(0,0,0,0.5);
            animation: goal-appear 3s ease-out;
        }

        @keyframes goal-appear {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(-10deg);
                opacity: 0;
            }
            20% {
                transform: translate(-50%, -50%) scale(1.4) rotate(5deg);
                opacity: 1;
            }
            40% {
                transform: translate(-50%, -50%) scale(1.2) rotate(-3deg);
            }
            60% {
                transform: translate(-50%, -50%) scale(1.3) rotate(2deg);
            }
            80% {
                transform: translate(-50%, -50%) scale(1.25) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(0) rotate(10deg);
                opacity: 0;
            }
        }

        /* ============ FOGOS DE ARTIFÍCIO ============ */
        .firework {
            position: fixed;
            pointer-events: none;
            z-index: 10000;
        }

        .firework-particle {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        @keyframes explode {
            0% {
                transform: translate(0, 0);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty));
                opacity: 0;
            }
        }

        /* ============ CONFETES BRASIL ============ */
        .confetti-brasil {
            position: absolute;
            width: 12px;
            height: 12px;
            top: -5%;
            opacity: 0.9;
            animation: confetti-brasil-fall linear infinite;
            pointer-events: none;
        }

        @keyframes confetti-brasil-fall {
            to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
        }

        /* ============ BANDEIRA BRASIL ============ */
        .brazil-flag-flying {
            position: fixed;
            top: 20%;
            left: -400px;
            z-index: 10000;
            animation: flag-fly-across 14s linear;
            pointer-events: none;
        }

        @keyframes flag-fly-across {
            to { left: 110%; }
        }

        .flag-wave {
            animation: wave-flag 1s ease-in-out infinite;
            transform-origin: left center;
        }

        @keyframes wave-flag {
            0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
            25% { transform: rotateY(-8deg) rotateX(2deg); }
            50% { transform: rotateY(0deg) rotateX(0deg); }
            75% { transform: rotateY(8deg) rotateX(-2deg); }
        }

        /* ============ FOGUEIRA JUNINA ============ */
        .bonfire {
            position: fixed;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            animation: flameFlicker 1.2s infinite ease-in-out;
            pointer-events: none;
        }

        @keyframes flameFlicker {
            0%, 100% { transform: translateX(-50%) scale(1) translateY(0); filter: brightness(1); }
            25% { transform: translateX(-50%) scale(1.05) translateY(-3px); filter: brightness(1.1); }
            50% { transform: translateX(-50%) scale(1.1) translateY(-6px); filter: brightness(1.2); }
            75% { transform: translateX(-50%) scale(1.05) translateY(-3px); filter: brightness(1.1); }
        }

        /* ============ CONFETES CARNAVAL ============ */
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            top: -10%;
            opacity: 0.8;
            animation: confetti-fall linear infinite;
        }

        @keyframes confetti-fall {
            to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
        }

        /* ============ CÍRCULOS VERDE E AMARELO ============ */
        .circle-particle {
            position: absolute;
            border-radius: 50%;
            top: -5%;
            opacity: 0.7;
            animation: circle-fall linear infinite;
            pointer-events: none;
        }

        @keyframes circle-fall {
            to { transform: translateY(110vh) rotate(360deg); opacity: 0; }
        }

        /* ============ CONTROLE DE ÁUDIO ============ */
        .audio-control {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10001;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 15px;
            border-radius: 25px;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s;
            display: none;
        }

        .audio-control:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
        }

        /* ============ MOBILE RESPONSIVE ============ */
        @media (max-width: 768px) {
            .santa-sleigh-big svg { width: 300px; height: 150px; }
            .vampire-appear svg { width: 280px; height: 320px; }
            .brazil-flag-flying svg { width: 280px; height: 180px; }
            .bat-flying { font-size: 25px; }
            .soccer-ball { font-size: 40px; }
            .goal-text { font-size: 80px; }

            .bonfire { font-size: 100px !important; bottom: 15%; }

            #themeButtons {
                bottom: 80px !important;
                right: 10px !important;
                gap: 8px !important;
            }

            .theme-button {
                width: 50px !important;
                height: 50px !important;
                font-size: 24px !important;
            }

            .audio-control {
                top: 10px;
                right: 10px;
                font-size: 20px;
                padding: 8px 12px;
            }
        }

        @media (max-width: 480px) {
            .santa-sleigh-big svg { width: 200px; height: 100px; }
            .vampire-appear svg { width: 200px; height: 240px; }
            .brazil-flag-flying svg { width: 200px; height: 130px; }
            .bat-flying { font-size: 20px; }
            .soccer-ball { font-size: 35px; }
            .goal-text { font-size: 60px; }
            .bonfire { font-size: 70px !important; }
        }
		
		
		
		
		
		
		
		
		
		
		
		@keyframes fadeInOut {
			0% {
				opacity: 0;
				transform: scale(0.5);  /* Começo invisível e pequeno */
			}
			50% {
				opacity: 1;
				transform: scale(1);    /* Texto se torna visível e no tamanho normal */
			}
			100% {
				opacity: 0;
				transform: scale(0.5);  /* Texto desaparece suavemente */
			}
		}
		
		/* Exemplo para mudar a cor do ícone de quebra-cabeça */
		#autismoIcon {
			color: #0066CC; /* Cor azul */
			font-size: 40px; /* Tamanho adequado para visualização */
		}


		.mensagem-autismo {
			/* Estilos para a mensagem */
			font-size: 2em;
			font-weight: bold;
			color: white;  /* Cor suave para o tema */
			text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10000;
			text-align: center;
			pointer-events: none;  /* Garante que o texto não interfira com outros elementos */
	
			/* Adicionando mais estilos, como animação e fonte */
			text-transform: uppercase;  /* Faz o texto ficar em maiúsculas */
			font-family: '"Arial Rounded MT Bold", sans-serif';  /* Fonte mais arredondada */
			
			animation: fadeInOut 16s ease-out forwards;  /* Adiciona a animação de fade-in e fade-out */
			
			/*-webkit-text-stroke: 2px white; /* Espessura e cor do contorno */
			padding-inline:22px;
			padding-top:8px;
			padding-bottom:8px;
			background-color:blue;
			border-radius:32px 46px;
			box-shadow: 2px 2px #000;

		}