/**
 * Адаптация дисплея для разрешения 640x480
 * Добавить в styles.css или подключить отдельно после него
 * 
 * Оригинальный дизайн: ~2560x1440
 * Целевое разрешение: 640x480
 * Коэффициент масштабирования: 0.25 (640/2560)
 */

/* Медиа-запрос для экрана 640x480 */
@media screen and (max-width: 640px) and (max-height: 480px) {
  .screen-display {
    overflow: hidden;
    position: relative;
  }

  /* ==================== IDLE STATE (заглушка) ==================== */
  .display-idle {
    transform: scale(0.25);
    transform-origin: center center;
    width: 2560px;
    height: 1920px;
    margin-left: calc((640px - 2560px) / 2);
    margin-top: calc((480px - 1920px) / 2);
    padding: 40px;
  }

  /* Корректировка позиций для масштабированного idle */
  .display-idle__phone {
    top: 156px;
  }

  .display-idle__box {
    bottom: -310px;
    left: -278px;
  }

  .display-idle__tree {
    right: -389px;
    bottom: -436px;
  }

  /* ==================== MESSAGE STATE (письмо) ==================== */
  .display-message {
    transform: scale(0.25);
    transform-origin: center center;
    width: 2560px;
    height: 1920px;
    margin-left: calc((640px - 2560px) / 2);
    margin-top: calc((480px - 1920px) / 2);
    padding: 80px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  /* Карточка остаётся в оригинальных размерах */
  .message-card {
    margin: 0 auto;
    width: 2340px;
    height: 1552px;
  }
}

/* Точное разрешение 640x480 (без погрешностей) */
@media screen and (width: 640px) and (height: 480px) {
  .screen-display {
    overflow: hidden;
  }

  .display-idle {
    transform: scale(0.25) !important;
    transform-origin: center center;
    width: 2560px;
    height: 1920px;
    margin-left: -960px;
    margin-top: -750px;
  }

  .display-message {
    transform: scale(0.25);
    transform-origin: center center;
    width: 2560px;
    height: 1920px;
    margin-left: -960px;
    margin-top: -750px;
    padding: 80px;
  }
}

/* 
 * Альтернативный вариант: использовать zoom (работает в Chrome/Edge)
 * Раскомментировать если transform: scale даёт артефакты
 */
/*
@media screen and (max-width: 640px) and (max-height: 480px) {
    .screen-display {
        zoom: 0.25;
    }
    
    .display-idle,
    .display-message {
        transform: none;
        margin: 0;
        width: 100%;
        height: 100vh;
    }
}
*/