/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Akshit's Question
   Mobile-first, tablet, desktop breakpoints
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: Mobile ── */
.app-container {
  padding: var(--space-md);
}

.poll-card {
  padding: var(--space-xl) var(--space-lg);
}

.modal-content {
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-lg);
}

.customizer-drawer {
  max-width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Small Phones (< 360px) ── */
@media (max-width: 359px) {
  :root {
    --fs-hero: 1.5rem;
    --fs-title: 1.15rem;
  }

  .poll-card {
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
  }

  .vote-btn {
    padding: var(--space-md) var(--space-lg);
  }

  .modal-illustration,
  .modal-emoji {
    width: 80px;
    height: 80px;
    font-size: 3rem;
  }
}

/* ── Tablets (>= 600px) ── */
@media (min-width: 600px) {
  .app-container {
    padding: var(--space-xl);
  }

  .poll-card {
    padding: var(--space-2xl);
  }

  .vote-actions {
    flex-direction: row;
    gap: var(--space-md);
  }

  .vote-btn {
    flex: 1;
  }

  .modal-content {
    padding: var(--space-2xl);
  }

  .modal-actions {
    flex-direction: row;
  }

  .modal-btn {
    flex: 1;
  }

  .customizer-drawer {
    max-width: 380px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .footer-actions {
    gap: var(--space-lg);
  }
}

/* ── Desktop (>= 900px) ── */
@media (min-width: 900px) {
  .app-container {
    padding: var(--space-3xl) var(--space-xl);
  }

  .poll-card {
    padding: var(--space-3xl) var(--space-2xl);
    max-width: 620px;
  }

  .app-logo {
    width: 60px;
    height: 60px;
  }

  .modal-content {
    max-width: 480px;
  }
}

/* ── Large Desktop (>= 1200px) ── */
@media (min-width: 1200px) {
  .poll-card {
    max-width: 680px;
  }
}

/* ── Touch Devices ── */
@media (hover: none) and (pointer: coarse) {
  .vote-btn {
    min-height: 56px;
  }

  .footer-btn {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }

  .sound-toggle,
  .customizer-trigger {
    width: 48px;
    height: 48px;
  }
}

/* ── Landscape Phone ── */
@media (max-height: 500px) and (orientation: landscape) {
  .app-container {
    padding: var(--space-sm);
    justify-content: flex-start;
  }

  .app-header {
    margin-bottom: var(--space-sm);
  }

  .poll-card {
    padding: var(--space-lg) var(--space-xl);
  }

  .question-section {
    margin-bottom: var(--space-lg);
  }
}

/* ── Safe Area (Notch devices) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .app-container {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }

  .sound-toggle {
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }

  .customizer-trigger {
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }

  .toast {
    bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
  }
}