/* style.css — все стили для игры */

/* 1. Импорт шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;700;900&display=swap');

/* 2. Сброс базовых стилей */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid #e5e7eb;
}

html, body {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #73c2fb;
  font-family: 'Inter', sans-serif;
}

p { margin: 0; }

button {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: button;
}

/* 3. Контейнеры */
#main-container,
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

.game-container {
  max-width: 95vw;
  max-height: 95vh;
}

/* 4. Кнопки */
.btn-primary, .btn-secondary, .btn-tertiary {
  font-family: 'Press Start 2P', cursive;
  border-radius: 0;
  padding: 16px 10px;
  box-shadow: 8px 8px 0 #000000;
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
  font-weight: 800;
}

.btn-primary {
  background: #29b6f6;
  color: #1f2937;
  border: 4px solid #00897b;
}
.btn-primary:hover { background: #0ea5e9; }

.btn-secondary {
  background: #1976d2;
  color: #fff;
  border: 4px solid #0d47a1;
}
.btn-secondary:hover { background: #2563eb; }

.btn-tertiary {
  background: #006064;
  color: #fff;
  padding: 0.75rem 1.25rem;
  box-shadow: 4px 4px 0 #000000;
}
.btn-tertiary:hover { background: #0891b2; }

.btn-primary:active,
.btn-secondary:active { transform: translate(8px,8px); box-shadow: 0 0 0 #000; }
.btn-tertiary:active { transform: translate(4px,4px); box-shadow: 0 0 0 #000; }

/* 5. Игровое поле */
.board-grid {
  width: min(80vmin, 380px);
  height: min(80vmin, 380px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: min(18vw, 100px);
  font-weight: 900;
  cursor: pointer;
  border: 2px solid #006064;
  background: #64b5f6;
  border-radius: 0;
  line-height: 1;
  transition: background-color 0.1s, opacity 0.3s, transform 0.3s;
}

.cell:hover:not(.x):not(.o) { background-color: #42a5f5; }
.cell.x { color: #f44336; text-shadow: 4px 4px 0 #000; }
.cell.o { color: #0d47a1; text-shadow: 4px 4px 0 #000; }
.cell.fading-out { opacity: 0.2; transform: scale(0.9); }
.cell.win { animation: winPulse 0.8s ease-in-out infinite alternate; }

@keyframes winPulse {
  from { box-shadow: 0 0 10px 3px rgba(255,255,255,0.35); transform: scale(1.02); }
  to   { box-shadow: 0 0 18px 6px rgba(255,255,255,0.8); transform: scale(1.06); }
}

/* 6. Текстовые элементы */
#status-text {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.25rem;
  font-weight: 800;
  text-shadow: 2px 2px 0 #000;
  min-height: 30px;
}
#status-text.text-red { color: #f44336; }
#status-text.text-blue { color: #0d47a1; }
#status-text.text-yellow { color: #ff9800; }
#status-text.text-white { color: #fff; }

@media (min-width: 640px) { #status-text { font-size: 1.5rem; } }

/* 7. Модальное окно */
/* === Исправление прозрачного фона модального окна === */
#message-box {
  z-index: 9999;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important; /* полностью убирает фон */
}

.message-box-content {
  position: relative;
  padding: 2.5rem;
  text-align: center;
  background: #002e5d;
  border: 5px solid #29b6f6;
  box-shadow: 10px 10px 0 #000, 20px 20px 0 #29b6f6;
  animation: fadeIn 0.25s ease-out;
}


#message-text {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 2rem;
  color: #fff;
  text-shadow: 6px 6px 0 #000;
}
@media (min-width: 640px) { #message-text { font-size: 2.25rem; } }

#btn-ok {
  background: #20d0f2;
  color: #012b3a;
  border: 4px solid #00acc1;
  box-shadow: 8px 8px 0 #000;
  padding: 10px 16px;
}
#btn-ok:hover { background: #14c3e6; }

/* 8. Анимации */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 9. Кнопки выбора языка */
.lang-button {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
  font-weight: 700;
  background: #006064;
  color: #fff;
  border-radius: 0;
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.lang-button:active { transform: translate(3px,3px); box-shadow: none; }

/* 10. Заголовки меню */
.menu-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.875rem;
  font-weight: 700;
  color: #fde047;
  margin-bottom: 1rem;
  text-shadow: 4px 4px 0 #000;
}

/* 11. Масштабирование для малых экранов */
@media (max-width: 700px) { #main-container { transform: scale(0.9); } }
@media (max-width: 600px) { #main-container { transform: scale(0.8); } }
@media (max-width: 500px) { #main-container { transform: scale(0.7); } }
@media (max-width: 400px) { #main-container { transform: scale(0.6); } }
@media (max-width: 340px) { #main-container { transform: scale(0.5); } }

/* 12. Отключение выделения */
#main-container, .game-container, .board-grid, .cell, .cell .mark,
#status-text, button, #message-box, .message-box-content, .lang-button, .menu-title,
.btn-primary, .btn-secondary, .btn-tertiary {
    /* === Полная защита от выделения и системных жестов === */
  -webkit-user-select: none;   /* Safari/iOS */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;           /* все браузеры */
  -webkit-touch-callout: none; /* отключает контекстное меню iOS */
  -webkit-tap-highlight-color: transparent; /* убирает синий подсвет при тапе */
  touch-action: manipulation;   /* запрещает нежелательные жесты */
}

  
body {
  margin: 0;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* 13. Утилиты */
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-8 { margin-top: 2rem; }
.p-4 { padding: 1rem; }
.text-center { text-align: center; }