/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 720px) {
  h1 { font-size: var(--text-3xl); }

  .main-nav { display: none; }

  .site-header .container { padding-block: var(--space-3); }

  .page-main { padding-block: var(--space-5); padding-bottom: var(--space-8); }
  /* Lesson step page: keep bottom padding tight so Back/Continue stay in view
     without extra scrolling on small screens. */
  .lesson-main { padding-bottom: var(--space-5); }
  .step-book { max-height: min(52vh, 420px); }

  /* Bottom tab bar on mobile, per original concept */
  .mobile-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    background: var(--color-ivory-raised);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  }
  .mobile-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    padding: var(--space-1) var(--space-2);
  }
  .mobile-tabbar a[aria-current="page"] { color: var(--color-cinnabar); }
  .mobile-tabbar .tab-icon { font-size: 1.2rem; font-family: var(--font-hanzi); }

  .vocab-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .flip-card { height: 165px; }
  .vocab-teach-card .hanzi-huge { font-size: 3.5rem; }

  .swipe-hint {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-ink-soft);
    margin-top: calc(var(--space-2) * -1);
    margin-bottom: var(--space-4);
    opacity: 0.7;
  }
}

@media (min-width: 721px) {
  .swipe-hint { display: none; }
}

@media (min-width: 721px) {
  .mobile-tabbar { display: none; }
}