/* css/responsive.css — адаптация под мобильные (ТЗ §5) */

/* Базовая защита от горизонтального скролла */
html,
body {
  overflow-x: hidden;
}

/* Узкие смартфоны: 360 / 375 / 390 / 430 */
@media (max-width: 480px) {
  .app-shell {
    padding-top: max(var(--space-3), env(safe-area-inset-top, 0px));
    padding-inline: max(var(--space-3), env(safe-area-inset-left, 0px))
      max(var(--space-3), env(safe-area-inset-right, 0px));
  }

  .app__title {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
  }

  .screen {
    min-height: 280px;
    padding: var(--space-4) 0;
  }

  .result-actions__share-row {
    grid-template-columns: 1fr;
  }
}

/* Планшеты */
@media (min-width: 481px) and (max-width: 1024px) {
  .app-shell {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
  }
}

/* Desktop — симметричные поля, чтобы шапка и контент не «уезжали» в сторону */
@media (min-width: 1025px) {
  .app-shell {
    padding-inline: max(var(--space-5), env(safe-area-inset-left, 0px))
      max(var(--space-5), env(safe-area-inset-right, 0px));
  }
}

/* Слабее фон на узких экранах — меньше конкуренции с текстом */
@media (max-width: 480px) {
  .background-layer__grid {
    opacity: 0.5;
  }

  .decor-layer__particles {
    opacity: 0.09 !important;
  }
}