/* ============================================
   ФИНАЛЬНЫЕ МОБИЛЬНЫЕ ИСПРАВЛЕНИЯ
   ============================================ */

@media (max-width: 768px) {
  
  /* 1. УВЕДОМЛЕНИЯ (TOAST) - ПОДНЯТЬ ВЫШЕ */
  .toast-container,
  #toast-container {
    bottom: 90px !important; /* Поднять над кнопками */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 400px !important;
    right: auto !important; /* Убрать right */
  }
  
  .toast {
    margin: 8px auto !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    max-width: 100% !important;
  }
  
  /* 2. КНОПКИ В ИГРЕ - ОПУСТИТЬ НИЖЕ */
  #btn-surrender,
  #btn-chat,
  #btn-reactions,
  #btn-voice-chat {
    bottom: 10px !important;
  }
  
  /* 3. НАДПИСИ ИВЕНТОВ - ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ */
  .event-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
  }
  
  .event-overlay > div {
    max-width: 90% !important;
    margin: 0 auto !important;
    text-align: center !important;
    word-wrap: break-word !important;
  }
  
  /* Заголовки ивентов */
  .event-overlay div[style*="font-size:36px"],
  .event-overlay div[style*="font-size:40px"],
  .event-overlay div[style*="font-size:48px"],
  .event-overlay div[style*="font-size:52px"] {
    font-size: 24px !important;
    line-height: 1.3 !important;
    padding: 8px 16px !important;
  }
  
  /* Подзаголовки */
  .event-overlay div[style*="font-size:15px"],
  .event-overlay div[style*="font-size:18px"],
  .event-overlay div[style*="font-size:20px"],
  .event-overlay div[style*="font-size:22px"] {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
  }
  
  /* Для "ПУТАННИЦА" и других больших надписей */
  .event-overlay div:first-child {
    font-size: 26px !important;
    font-weight: bold !important;
  }
  
  /* 4. ПОЛНОЭКРАННЫЙ РЕЖИМ */
  html, body {
    height: 100vh;
    height: -webkit-fill-available;
    overflow: hidden;
  }
  
  .screen {
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  /* 5. УБРАТЬ ВСЕ АНИМАЦИИ КНОПОК */
  .digit-btn,
  .op-btn,
  .calc-btn,
  .mode-btn,
  .menu-btn {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    box-shadow: none !important;
  }
  
  /* Мгновенный визуальный отклик */
  .digit-btn:active,
  .op-btn:active {
    transform: none !important;
    opacity: 0.7 !important;
    background: #323232 !important;
  }
  
  /* 6. ОПТИМИЗАЦИЯ FPS */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Убрать все тени */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* 7. ТАЙМЕР ИВЕНТА - УМЕНЬШИТЬ */
  .event-timer-box {
    font-size: 12px !important;
    padding: 4px 10px !important;
    top: 10px !important;
    right: 10px !important;
  }
  
  /* 8. ЗНАКИ ВОПРОСА В ИВЕНТАХ */
  .event-qmark {
    font-size: 40px !important;
  }
  
  /* 9. КАЛЬКУЛЯТОР - УБРАТЬ OVERLAY ПРИ ИВЕНТАХ */
  .calc-disabled-overlay {
    font-size: 18px !important;
    padding: 12px !important;
  }
  
  /* 10. УРАВНИТЕЛЬ - АДАПТАЦИЯ */
  .eq-banner {
    max-width: 90% !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  
  .eq-use-btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
  .event-overlay div:first-child {
    font-size: 22px !important;
  }
  
  .event-overlay div[style*="font-size"] {
    font-size: 16px !important;
  }
  
  .toast {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* Для очень больших экранов (планшеты в портретной ориентации) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .toast-container,
  #toast-container {
    bottom: 100px !important;
  }
  
  #btn-surrender,
  #btn-chat,
  #btn-reactions,
  #btn-voice-chat {
    bottom: 20px !important;
  }
}
