/* assets/css/styles.css */
body {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    min-height: 100vh;
  }
  
  .header-area {
    padding-top: 40px;
    padding-bottom: 20px;
  }
  
  .duck-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 200px; /* espaço reservado no topo */
    overflow: visible;
  }
  
  .duck {
    width: 160px;
    height: auto;
    transition: transform 1s ease, opacity 0.6s ease;
    transform-origin: center;
    will-change: transform, opacity;
  }
  
  /* posição inicial centralizada no topo */
  .duck.centered {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
  }
  
  /* animação de andar para a direita (usa translateX) */
  .duck.move-right {
    transform: translateX(350px) translateY(0) scale(0.9);
    opacity: 0;
  }
  
  /* shake ao errar */
  .duck.shake {
    animation: shake 0.6s;
  }
  
  @keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
    100% { transform: translateX(0); }
  }
  
  /* Caixa da pergunta */
  .card-question {
    max-width: 720px;
    margin: 20px auto;
  }
  
  /* mensagens */
  #message {
    text-align: center;
    margin-top: 10px;
    min-height: 36px;
  }