/* ============================================================ */
/* Responsive Media Queries */
/* ============================================================ */

/* Mobile Adjustments - Tablet and Below */
@media (max-width: 768px) {
  /* Upload Section */
  .upload-container-with-roasty {
    flex-direction: column;
    padding: 20px 0;
  }

  .roasty-character-container {
    flex: none;
    max-width: 250px;
    margin-bottom: 20px;
  }

  .roasty-large {
    filter: drop-shadow(0 0 15px var(--toxic-green));
  }

  /* Loading Screen */
  .roasty-loading-container {
    width: 200px;
    height: 200px;
  }

  .loading-screen h2 {
    font-size: 1.2rem;
  }

  .progress-bar-container {
    width: 250px;
  }

  .roasty-processing-container {
    width: 150px;
    height: 150px;
  }

  /* Upsell Modal */
  .upsell-modal-content {
    padding: 24px;
    margin: 0 16px;
  }

  .upsell-modal-title {
    font-size: 1.3rem;
  }

  .upsell-modal-subtitle {
    font-size: 0.9rem;
  }
}

/* Mobile Adjustments - Small Screens */
@media (max-width: 600px) {
  .btn-free {
    height: 54px; /* Slightly smaller on mobile */
    font-size: 0.9rem;
  }

  .btn-premium-single {
    height: 54px;
    font-size: 0.9rem;
  }
}

/* Performance Optimization: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .roasty-large,
  .roasty-loading,
  .roasty-processing {
    animation: none !important;
  }

  .lightning-effects,
  .green-smoke,
  .bolt {
    animation: none !important;
    opacity: 0.3 !important;
  }

  .result-card-premium::before {
    animation: none !important;
  }
}