@media (max-width: 1200px) {
  .infographic-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 12px;
  }

  .hud-nav-tabs {
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tab-btn {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: var(--text-xs);
    min-height: 44px;
  }

  .infographic-columns-grid {
    grid-template-columns: 1fr;
  }

  .toolbar-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input-wrap {
    max-width: 100%;
  }

  .toolbar-controls-right {
    justify-content: space-between;
    width: 100%;
  }

  .filter-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-pills-wrap {
    width: 100%;
  }

  .category-filter-btn,
  .element-filter-btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  .modal-stat-grid {
    grid-template-columns: 1fr;
  }

  .modal-crafting-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .app-main-content {
    padding: var(--space-3);
  }
}