/* Vui Học Tiếng Trung v2.5.7 - mobile performance and ergonomics */
@media (max-width: 900px) {
  :root { --mobile-nav-h: calc(64px + env(safe-area-inset-bottom)); }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: calc(var(--app-vh, 1vh) * 100); touch-action: pan-y; }
  button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"] { touch-action: manipulation; }
  input, select, textarea { font-size: max(16px, 1rem); }
  img { max-width: 100%; height: auto; }

  /* Reduce initial layout/paint work for below-the-fold dashboard sections. */
  .recent-card, .hsk-panel, .study-grid, .leaderboard-panel, .seo-content-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }

  /* Keep the most-used mobile controls comfortably tappable. */
  .mobile-bottom-nav button,
  .mobile-menu-toggle,
  #mobileMenuClose,
  .modal-close,
  .round,
  .star-btn,
  .flash-nav button,
  .quick-tags button {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-bottom-nav {
    height: var(--mobile-nav-h);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    will-change: transform;
    transform: translateZ(0);
  }
  .mobile-bottom-nav button { position: relative; }
  .mobile-bottom-nav button.active::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
  }

  .topbar {
    contain: layout paint;
    transform: translateZ(0);
  }

  .sidebar {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .main-content {
    padding-bottom: calc(var(--mobile-nav-h) + 14px);
  }

  /* Mobile dialogs behave like an app sheet and account for notches/keyboards. */
  .modal.open {
    align-items: flex-end;
    padding-top: env(safe-area-inset-top);
  }
  .modal-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(var(--app-vh, 1vh) * 100 - env(safe-area-inset-top));
    border-radius: 20px 20px 0 0;
    overscroll-behavior: contain;
  }
  .modal-body {
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
  }

  /* Horizontal collections should not drag the entire page sideways. */
  .quick-tags, .hsk-tabs, .feature-tabs, .writing-tabs {
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }
  .quick-tags > *, .hsk-tabs > *, .feature-tabs > *, .writing-tabs > * {
    scroll-snap-align: start;
  }

  /* Save GPU/blur cost on constrained devices or data-saver connections. */
  html.save-data .mobile-bottom-nav,
  html.save-data .sidebar-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 480px) {
  .main-content { padding-left: 8px; padding-right: 8px; }
  .hero-content { padding-left: 13px; padding-right: 13px; }
  .mobile-bottom-nav { padding-left: 3px; padding-right: 3px; }
  .mobile-bottom-nav button small { font-size: 9px; }
  .panel, .word-card, .recent-card, .progress-panel, .hsk-panel, .leaderboard-panel { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}