/* Variáveis para cores e estilos */
    :root {
        --primary: #FF6F61;      /* Cor vibrante para cabeçalho e elementos de destaque */
        --secondary: #FFD166;    /* Tom alegre para títulos de seção */
        --accent: #06D6A0;       /* Cor para botões e ações */
        --background: #fefefe;   /* Cor de fundo clara para cards */
        --text-color: #333;      /* Cor padrão para textos */
      }
  
      /* Reset básico e box-sizing */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      /* Estilização do body e background responsivo */
      body {
        font-family: 'Roboto', sans-serif;
        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-color);
      }
  
      /* Cabeçalho centralizado e com tipografia lúdica */
      header {
        background-color: var(--primary);
        width: 100%;
        padding: 20px 0;
        text-align: center;
        font-family: 'Fredoka One', cursive;
        font-size: 28px;
        color: white;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      }
  
      /* Container centralizado para dispositivos mobile */
      .container {
        width: 95%;
        max-width: 400px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
  
      /* Display dos pontos com destaque e animação leve */
      .points {
        background: var(--background);
        padding: 15px;
        border-radius: 15px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        position: relative;
      }
      .points::after {
        content: '✨';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0% { transform: translateY(-50%) scale(1); }
        50% { transform: translateY(-50%) scale(1.2); }
        100% { transform: translateY(-50%) scale(1); }
      }
  
      /* Título das seções com cor secundária e bordas arredondadas */
      .section-title {
        font-family: 'Fredoka One', cursive;
        background-color: var(--secondary);
        padding: 12px;
        border-radius: 15px;
        font-size: 22px;
        text-align: center;
        color: var(--text-color);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      }
  
      /* Cards para tarefas e recompensas com animação ao passar o mouse */
      .card {
        background: var(--background);
        border-radius: 15px;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .card:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      }
      .card strong {
        font-size: 18px;
        margin-bottom: 8px;
      }
      .card p {
        font-size: 16px;
        margin-bottom: 12px;
      }
  
      /* Botões com cores vibrantes, feedback visual e responsividade */
      .btn {
        background-color: var(--accent);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
        width: 100%;
      }
      .btn:hover {
        background-color: #04b287;
        transform: scale(1.05);
      }
  
      /* Container dos cards para espaçamento adequado */
      .card-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }
  
      /* Responsividade para telas menores */
      @media (max-width: 480px) {
        header {
          font-size: 24px;
        }
        .points {
          font-size: 20px;
        }
        .section-title {
          font-size: 20px;
        }
        .btn {
          font-size: 16px;
          padding: 10px 15px;
        }
      }