/* ============================================================
   DemItems — адаптив под любое окно и любой зум браузера.
   Подключается ПОСЛЕДНИМ (после theme.css), поэтому перекрывает его правила.
   Точки перелома: 1500 / 1280 / 1180 / 980 / 760 / 520 (в CSS-пикселях: при зуме 200% окно 1920 даёт 960).
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

/* ── Шапки разделов: переносятся, кнопки не ломают текст по буквам ── */
.page-head, .gui-view__top, .builder-top { flex-wrap: wrap; row-gap: 12px; column-gap: 16px; }
.page-head__text { flex: 1 1 260px; min-width: 0; }
.page-head__actions, .builder-actions, .topbar-right, .mobs-top-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.bld-btn, .bld-tool, .equip-tab, .gui-chip, .armor-filter__btn { white-space: nowrap; }
.builder-current { max-width: min(360px, 60vw); }

/* ── Боковое меню ── */
@media (max-width: 760px) {
  :root { --nav-w: 72px; }
  .dnav { padding: 14px 6px; }
  .dnav__item .dnav__icon--px { margin: -2px; }
  .gui-view, .builder-view, #app { padding-left: 4px !important; padding-right: 12px !important; }
  .page-head__title { font-size: 22px; }
}

/* ── Конструктор меню: список + сцена + панель ── */
@media (max-width: 1500px) {
  .builder-list { width: 220px; }
  .builder-panel { width: 300px !important; }
}
@media (max-width: 1180px) {
  .builder-view { overflow-y: auto; overflow-x: hidden; }
  .builder-body { display: grid !important; flex: none; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(440px, 72vh) auto; align-content: start; overflow: visible; }
  .builder-list { grid-column: 1; grid-row: 1 / span 2; width: auto !important; align-self: stretch; }
  .builder-stage { grid-column: 2; grid-row: 1; min-height: 0; }
  .builder-panel { grid-column: 2; grid-row: 2; width: auto !important; }
  .bp-palette { max-height: 380px; }
}
@media (max-width: 760px) {
  .builder-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(420px, 70vh) auto; }
  .builder-list { grid-column: 1; grid-row: 1; max-height: 240px; }
  .builder-stage { grid-column: 1; grid-row: 2; }
  .builder-panel { grid-column: 1; grid-row: 3; }
  .bld-toolbar { top: 8px !important; }
}

/* ── Экипировка и Предметы: список + сцена + настройки ── */
@media (max-width: 1280px) {
  .armor-layout, .armor-layout:has(> .armor-panel[hidden]) { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .armor-view, .items-view { overflow-y: auto; }
  .armor-layout, .armor-layout:has(> .armor-panel[hidden]) { flex: none; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(420px, 70vh) auto; align-content: start; }
  .armor-layout > .armor-list { grid-row: 1 / span 2; }
  .armor-layout > .armor-stage { grid-column: 2; grid-row: 1; min-height: 0; }
  .armor-layout > .armor-panel { grid-column: 2; grid-row: 2; max-height: none; }
}
@media (max-width: 760px) {
  .armor-layout, .armor-layout:has(> .armor-panel[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(380px, 65vh) auto; }
  .armor-layout > .armor-list { grid-row: 1; grid-column: 1; max-height: 260px; }
  .armor-layout > .armor-stage { grid-column: 1; grid-row: 2; }
  .armor-layout > .armor-panel { grid-column: 1; grid-row: 3; }
}

/* ── Шляпы (редактор посадки): боковая панель и 3D-окно ── */
@media (max-width: 1280px) { :root { --sidebar-w: 300px; } }
@media (max-width: 980px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(380px, 1fr); grid-template-areas: "topbar" "sidebar" "canvas"; overflow-y: auto; }
  #app .sidebar { max-height: 42vh; }
}

/* ── Мобы ── */
@media (max-width: 1100px) {
  .mobs-view { overflow-y: auto; }
  .mobs-body { grid-template-columns: minmax(0, 1fr) !important; }
  .mobs-viewport-wrap { min-height: 360px; }
}

/* ── Иконки, скины, сервис, интеграции ── */
.gui-view__search { max-width: 100%; }
@media (max-width: 760px) {
  .gui-view__search { min-width: 0; flex: 1 1 100%; }
  .skins-search .search-field { flex: 1 1 100% !important; }
  .care-layout, .int-layout { padding: 0; }
  .care-card { padding: 14px; }
}

/* ── Очень узкие окна (зум 300% и больше) ── */
@media (max-width: 520px) {
  .equip-tabs { gap: 4px; }
  .equip-tab { padding: 0 10px; font-size: 12px; }
  .bp-chip { padding: 0 7px; }
  .builder-actions .bld-btn { padding: 0 10px; }
}

/* ── Шапки не сжимаются поверх содержимого, когда раздел прокручивается; панель инструментов переносится ── */
.builder-top, .gui-view__top, .page-head { flex-shrink: 0; }
.bld-tool-group { flex-wrap: wrap; justify-content: center; }
.bld-toolbar { max-width: calc(100% - 16px); }

/* На узкой сцене инструменты — только значки (названия видны в подсказке), чтобы панель не съедала место у окна меню */
@media (max-width: 1180px) {
  .bld-tool > span { display: none; }
  .bld-tool { width: 38px; padding: 0 !important; justify-content: center; }
  .builder-body { grid-template-rows: minmax(520px, 80vh) auto; }
}
@media (max-width: 760px) {
  .builder-body { grid-template-rows: auto minmax(520px, 78vh) auto; }
}