/**
 * responsive.css
 * ──────────────────────────────────────────────
 * Mobile é o caso principal (a experiência é pensada
 * para ser usada a dois, num único telefone, passado
 * de mão em mão). Breakpoints acima ajustam respiro.
 */

/* Telefones pequenos */
@media (max-width: 380px) {
  :root {
    --space-3: 1.4rem;
    --space-4: 2rem;
  }
  .question-card { gap: var(--space-2); }
}

/* Tablets e acima */
@media (min-width: 768px) {
  .question-card { max-width: 720px; }
  .setup-card { max-width: 480px; }
}

/* Telas grandes / desktop */
@media (min-width: 1200px) {
  .question-card { max-width: 820px; }
  .question-text { font-size: var(--fs-question-lg); }
}

/* Altura reduzida (celular na horizontal) */
@media (max-height: 480px) {
  :root {
    --space-4: 1.4rem;
    --space-5: 2rem;
  }
  .app-chrome { padding-top: var(--space-2); }
}

/* Notch / safe-area em iOS */
@supports (padding: max(0px)) {
  .app-chrome {
    padding-top: max(var(--space-3), env(safe-area-inset-top));
  }
  .progress-caption {
    bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }
}