/* ═══════════════════════════════════════════════════════════
   фидоня.дети — Адаптив и экономный режим для телефонов
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   22. Телефоны
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --r-3: 20px; --r-4: 26px; --blur: saturate(170%) blur(18px); }

  .input-x, textarea.input-x, select.input-x { font-size: 16px; padding: 12px 14px; }
  .btn-x { padding: 12px 16px; }
  .btn-icon { width: 44px; height: 44px; }
  .switch { width: 50px; height: 29px; }
  .switch::after { width: 23px; height: 23px; }
  .switch[data-on="true"]::after { transform: translateX(21px); }

  .masonry { column-gap: 10px; }
  .masonry > * { margin-bottom: 10px; }

  .lb-nav { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: none; width: 52px; height: 52px; }
  .lb-nav:active { transform: scale(0.9); }
  .lightbox-inner { padding-bottom: 82px; }
  .lightbox video, .lb-img { max-height: 58dvh; }

  .heat { gap: 2px; min-width: 470px; }
  .section { padding: 15px; }
  .metric { padding: 14px; }
  .metric-value { font-size: 1.4rem; }
}

@media (max-width: 380px) {
  .chip { padding: 4px 9px; font-size: 0.7rem; }
  .tabbar a { font-size: 0.55rem; }
}

.stack-tight { gap: 4px; }
.link-ico-live { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
.link-ico-lg { width: 44px; height: 44px; font-size: 20px; }
.link-ico-lg svg.lucide { width: 22px; height: 22px; }
.link-ico-warn { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }

/* ═══════════════════════════════════════════════════════════
   Экономный режим для телефонов: размытие фона — самая дорогая
   операция на мобильном GPU, поэтому там его нет вовсе.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .glass, .glass-sm, .bar, .tabbar, .toast, .lb-close, .lb-nav, .tile-kind, .play-badge span {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass, .glass-sm { background: var(--glass-solid); }
  .bar { background: color-mix(in srgb, var(--bg) 94%, transparent); }
  .tabbar { background: color-mix(in srgb, var(--bg) 96%, transparent); }
  .lb-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 96%, transparent); }
  .lb-close, .lb-nav { background: var(--surface-solid); }

  .blob { animation: none !important; filter: blur(60px); opacity: 0.34; }
  .blob-3 { display: none; }

  .btn-donate { animation: none; background-position: 0 0; }
  .donate-glow { animation-duration: 6s; }
}

/* Совсем слабые устройства — оставляем только необходимое */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .blob { display: none; }
  .donate-glow { display: none; }
}

/* Длинные списки не рисуются целиком */
.masonry > *, .media-row { content-visibility: auto; contain-intrinsic-size: auto 240px; }


/* ── Страховка от переполнения ───────────────────────────
   Длинные пути, ссылки и строки журнала не должны растягивать
   родителя: у флекс- и grid-элементов min-width по умолчанию auto,
   и без явного нуля содержимое выдавливает соседние блоки. */
.glass, .glass-sm, .section, .rows, .field, .row-line { min-width: 0; }
.section > *, .rows > *, .section-body > * { max-width: 100%; }
pre, code { overflow-wrap: anywhere; word-break: break-word; }