body {
    /* Mantém o degradê rosa e branco */
    background: linear-gradient(to top, #ffb3ed 0%, #ffffff 100%);
    background-attachment: fixed;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    position: relative; /* Necessário para posicionar a imagem de fundo */
    overflow-x: hidden;
}

/* Camada da imagem de fundo transparente */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0; 
    width: 100vw;
    height: 100vh;
    /* Substitua pelo caminho correto da sua imagem PNG */
    background-image: url('fluttershy.png'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%; /* Controla o tamanho grande da imagem (pode ajustar a %) */
    opacity: 0.15; /* Controla a transparência (0.15 significa 15% visível, ideal para leitura) */
    z-index: -1; /* Garante que a imagem fique atrás de todos os textos e do canvas */
}
/* Cria a animação de flutuar */
@keyframes flutuar {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Sobe 10 pixels */
    100% { transform: translateY(0px); }
}
h1 {
    font-size: 6rem; /* Aumenta o tamanho do título */
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif; /* Fonte com estilo mais fofo */
    text-shadow: 2px 5px 7px rgba(101, 0, 66, 0.30); /* Adiciona uma sombra suave no título */
    margin-top: 0;
    margin-bottom: 15px; 
    color: #ffb3ed;
    animation: flutuar 4s ease-in-out infinite; 
}

p {
    margin-top: 0;
    margin-bottom: 5px;
    color: #faffbf;
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
    text-shadow: 2px 5px 7px rgba(82, 71, 13, 0.337);
    font-size: 1.5rem; 
}

/* Estilização automática da tela do jogo (Canvas gerado pelo p5.js) */
canvas {
    border: 4px solid #ffa7e3;
    border-radius: 8px;
    box-shadow: 0px 10px 30px rgba(255, 141, 206, 0.5);
}
/* Cria a animação de piscar e crescer do brilhinho */
@keyframes brilhar {
    0%, 100% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; text-shadow: 0 0 10px #ffffff, 0 0 20px #ffb3ed; }
}

/* Base para os brilhinhos */
.brilhinho {
    display: inline-block;
    color: #eeffac;
    font-size: 1.5rem; /* Tamanho do brilho */
    position: absolute;
    animation: brilhar 2s infinite ease-in-out;
    pointer-events: none; /* Não atrapalha os cliques no jogo */
}

/* Exemplo de posições diferentes para os brilhos */
.b1 { top: -10px; left: -20px; animation-delay: 0s; }
.b2 { top: 10px; right: -25px; animation-delay: 0.7s; }
.b3 { bottom: -5px; left: 40%; animation-delay: 1.3s; }