/* ============================================================
   mobile.css - Overrides applied only on small screens
   (linked in index.html with media="(max-width: 640px)").
   Keep this file focused on LAYOUT/SIZE changes only; colors
   and fonts stay defined in style.css so the two files never
   fight each other.
   ============================================================ */

.wrap{
  padding: 20px 14px 40px;
}

header{
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

h1{
  font-size: 24px;
}

.streak-box{
  align-self: flex-start;
}

/* Category buttons: one per row instead of two, easier to tap */
.category-grid{
  grid-template-columns: 1fr;
}

.settings-row{
  flex-direction: column;
  gap: 12px;
}

.setting{
  min-width: 0;
}

.card{
  padding: 20px 16px;
  border-radius: 14px;
}

.statement{
  font-size: 17px;
}

/* Stack True/False vertically on narrow screens so buttons stay
   big enough to tap comfortably */
.choices{
  grid-template-columns: 1fr;
}

.choice-btn{
  padding: 16px;
  font-size: 16px;
}

.score{
  font-size: 40px;
}

.progress-row{
  font-size: 11px;
}