/* static/base.css */
/* Глобальный сброс и базовые стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--tg-theme-secondary-bg-color, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  min-height: 100vh;
  padding: 20px;
  color: var(--tg-theme-text-color, #333);
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Анимация встряски для невалидных действий */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Анимация появления */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Базовые переменные для адаптивности */
:root {
  --base-font-size: 15px;
  --base-padding: 20px;
  --base-margin: 15px;
  --base-border-radius: 12px;
  --button-height: 50px;
  --container-max-width: 400px;
  --global-font-scale: 1; /* Начальный масштаб шрифта */
}



/* Адаптация для кнопок настройки шрифта, чтобы они сами не масштабировались */
#decrease-font-btn,
#increase-font-btn,
#reset-font-btn {
  font-size: var(--base-font-size); /* Фиксируем на базовом, чтобы кнопки не росли/уменьшались */
}


/* Учет динамической высоты viewport на мобильных */
@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

/* ПРЕФЕРЕНЦИИ ПОЛЬЗОВАТЕЛЯ */
/* Уменьшенная анимация для пользователей с чувствительностью к движению */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fadeIn {
    animation: none;
  }
  /* .timer-display-designed.critical-time будет в views.css или components.css */
}