#wa-chat-button { display: flex; bottom: 80px; background-color: #25D366; opacity: 1; }
     
      .wa-chat-widget { position: fixed; bottom: 80px; right: 20px; width: 320px; background: var(--card-bg); border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); z-index: 1009; overflow: hidden; transform: scale(0.5); opacity: 0; visibility: hidden; transform-origin: bottom right; transition: transform 0.3s, opacity 0.3s, visibility 0.3s; }
      .wa-chat-widget.active { transform: scale(1); opacity: 1; visibility: visible; }
      .chat-header { background: var(--primary-color); color: #fff; padding: 15px; display: flex; align-items: center; gap: 10px; }
      .chat-header img { width: 40px; height: 40px; border-radius: 50%; }
      .chat-body { padding: 15px; height: 300px; overflow-y: auto; background-color: #E5DDD5; }
      html.dark-theme .chat-body { background-color: var(--heading-color); }
      .chat-message { background: #fff; color: #333; padding: 10px; border-radius: 8px; margin-bottom: 10px; max-width: 80%; }
      .chat-close-btn { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; margin-left: auto; }

   
      
       /* 11. Game Styles */

      .game-card-btn { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
      .game-card-btn:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
      .game-card-btn h4 { font-family: var(--heading-font); font-size: 2.5rem; margin-top: 0; margin-bottom: 10px; color: var(--primary-color); }
      .game-card-btn p { margin-bottom: 0; font-size: 2rem; }
      
      .game-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
      .game-modal-content { position: relative; background: var(--bg-color); padding: 30px; border-radius: 15px; text-align: center; color: var(--heading-color); font-family: 'Segoe UI', sans-serif; }
      .game-modal-content .close-btn { position: absolute; top: 15px; right: 15px; background: #D9534F; color: white; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
      #memory-game-body h1 { font-size: 26px; color: var(--heading-color); }
      #game-info-btn { background: var(--primary-dark); border: none; color: white; padding: 5px 10px; font-size: 14px; border-radius: 6px; cursor: pointer; position: absolute; top: 15px; left: 15px; }
      #game-info-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--white-color); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); max-width: 400px; z-index: 2001; text-align: left; }
      #game-info-modal h2 { margin-top: 0; color: var(--heading-color); }
      #game-close-info { background: #D9534F; border: none; color: white; padding: 5px 10px; font-size: 14px; border-radius: 5px; cursor: pointer; margin-top: 10px; }
      #game-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; }
      #game-container { position: relative; width: 300px; height: 300px; margin: 20px auto; }
      .color-btn { position: absolute; width: 140px; height: 140px; border-radius: 15px; border: 4px solid #fff; cursor: pointer; opacity: 0.6; transition: opacity 0.2s, filter 0.2s, box-shadow 0.2s; }
      .color-btn.active { opacity: 1 !important; filter: brightness(60%); }
      .red { background: #D9534F; top: 0; left: 0; }
      .green { background: var(--secondary-color); top: 0; right: 0; }
      .blue { background: var(--primary-color); bottom: 0; left: 0; }
      .yellow { background: #FFD700; bottom: 0; right: 0; }
      #game-start-btn { background: var(--primary-color); border: none; color: white; padding: 10px 20px; font-size: 16px; border-radius: 8px; margin: 20px 0; cursor: pointer; }
      #game-name-container { margin-top: 15px; }
      #game-player-name { padding: 8px; border-radius: 5px; border: 1px solid #ccc; width: 80%; max-width: 250px; margin-top: 10px; }
      #game-save-btn { background: var(--primary-dark); color: white; border: none; padding: 8px 15px; margin-top: 10px; border-radius: 5px; cursor: pointer; }
      #game-ranking { background: var(--white-color); padding: 15px; border-radius: 10px; max-width: 400px; margin: 30px auto; box-shadow: 0 0 10px rgba(0,0,0,0.05); }
      #game-ranking h3 { margin-top: 0; color: var(--heading-color); }
      #game-ranking ol { text-align: left; padding-left: 20px; list-style-position: inside; }
/*
  Estilos para o Card/Botão que abre o Jogo da Memória.
  Você pode inserir ou substituir este bloco no seu CSS existente.
*/

#open-memory-game-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--card-bg); /* Usa as variáveis de tema do site */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-decoration: none; /* Remove sublinhado se for um link */
    color: var(--text-color); /* Garante que o texto use a cor do tema */
}

#open-memory-game-btn:hover {
    transform: translateY(-8px); /* Efeito de "levantar" */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Estilo para um ícone (opcional, mas recomendado) */
#open-memory-game-btn .game-icon {
    font-size: 3rem; /* Tamanho grande para o ícone */
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Estilo para o título do jogo dentro do botão */
#open-memory-game-btn h4 {
    font-family: var(--heading-font);
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--primary-color);
}

/* Estilo para a descrição do jogo dentro do botão */
#open-memory-game-btn p {
    font-family: var(--body-font);
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 300px; /* Evita que o texto fique muito largo */
}

/* Dark mode para os cards de jogo */
body.dark-mode .game-card-btn,
body.dark-mode #open-memory-game-btn,
body.dark-mode #open-pairs-game-btn {
    background-color: #2a3447;
    border-color: #3a4557;
    color: #e8eaed;
}

body.dark-mode .game-card-btn:hover,
body.dark-mode #open-memory-game-btn:hover,
body.dark-mode #open-pairs-game-btn:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .game-card-btn h4,
body.dark-mode #open-memory-game-btn h4,
body.dark-mode #open-pairs-game-btn h4 {
    color: #7ec8a3;
}

body.dark-mode .game-card-btn p,
body.dark-mode #open-memory-game-btn p,
body.dark-mode #open-pairs-game-btn p {
    color: #e8eaed;
}

body.dark-mode .game-modal-content {
    background: #1a1f2e;
    color: #e8eaed;
}

body.dark-mode #game-info-modal {
    background: #2a3447;
    color: #e8eaed;
}

body.dark-mode #game-ranking {
    background: #2a3447;
    color: #e8eaed;
}

body.dark-mode #memory-game-body h1 {
    color: #e8eaed;
}