/* MIGRATED TO TAILWIND - Responsive styles
   Now using Tailwind responsive prefixes in index.html:
   - text-5xl md:text-6xl for card-word
   - text-3xl md:text-4xl for card-definition  
   - text-lg md:text-xl for card-example
   - grid layout for action buttons
   - Tailwind responsive classes for modals

@media (max-width: 480px) {
  .card-word {
    font-size: 28px;
  }

  .card-definition {
    font-size: 18px;
  }

  .card-example {
    font-size: 14px;
  }

  .action-btn {
    min-width: 45%;
  }

  .welcome-modal-content {
    padding: 30px 24px;
    border-radius: 16px;
  }

  .welcome-logo img {
    width: 100px;
    height: 100px;
    border-radius: 20px;
  }

  .welcome-app-name {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .welcome-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .welcome-btn {
    padding: 14px 40px;
    font-size: 16px;
    min-height: 48px;
  }
}
*/