* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-drag: none !important;
  touch-action: manipulation;
  outline: none;
}

html {
  overflow-x: hidden;
  width: 100%;
}

/* --- Основной стиль для десктопа --- */
html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  color: #0ff;
  transition: background 0.5s ease;
  position: relative;
  cursor: default;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* Фоновые частицы */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.05) 0%, transparent 20%),
              radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.05) 0%, transparent 20%);
  pointer-events: none;
  z-index: -1;
}

.container {
  width: min(100vw, 1200px);
  height: min(100vh, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 0;
  margin: 0;
}

/* Центральный блок — горизонтальный */
.center-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  border: 1px solid var(--secondary);
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

/* Логотип — сверху слева */
.title-wrapper {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: 100%;
  max-width: 100vw;
  pointer-events: none; /* чтобы не мешать кликам под ним */
}

.title-wrapper h1 {
  display: inline-block;
  margin: 0;
  pointer-events: auto; /* но заголовок — кликабельный, если нужно */
}
.container.game-mode .title-wrapper {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

h1 {
  font-size: 1.8rem;
  text-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary);
  letter-spacing: 2px;
  font-weight: bold;
  animation: scanLine 3s infinite linear;
  font-family: 'Orbitron', sans-serif;
  color: var(--primary);
  
}

@keyframes scanLine {
  0% { text-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary); }
  50% { text-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary), 0 0 24px var(--primary); }
  100% { text-shadow: 0 0 8px var(--primary), 0 0 16px var(--primary); }
}

/* Кнопка параметров — в левом нижнем углу */
.settings-btn {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 0 8px var(--x-glow); /* ← используем тематическое свечение */
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  z-index: 100;
  white-space: nowrap; /* предотвращает перенос текста */
}

.settings-btn:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
  color: #fff;
  text-shadow: 0 0 6px var(--primary);
}

/* Меню */
#menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  width: 80%;
  max-width: 400px;
  z-index: 5;
  border: 1px solid var(--secondary);
  position: relative;
}

.setting-label {
  margin: 10px 0 6px 0;
  font-weight: bold;
  color: var(--primary);
  text-shadow: 0 0 4px var(--primary);
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}

.size-options, .mode-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}

.size-options label, .mode-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: #ccc;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.size-options input, .mode-options input {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.size-options input:checked::after,
.mode-options input:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
}

button {
  height: 38px;
  padding: 0 18px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--primary);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
  background: rgba(0, 255, 255, 0.05);
  color: var(--primary);
  min-width: 110px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  text-shadow: 0 0 4px var(--primary);
}

button:hover {
  background: rgba(var(--primary-rgb), 0.1);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.6);
  color: #fff;
  text-shadow: 0 0 6px var(--primary);
}

/* Игровое поле */
#game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  border: 1px solid var(--secondary);
  position: relative;
}

#game.active {
  opacity: 1;
  transform: scale(1);
}

#status {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--primary);
  text-shadow: 0 0 8px var(--primary);
  min-height: 1.4em;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  border: 1px solid var(--secondary);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  animation: statusPulse 2s infinite alternate;
}

@keyframes statusPulse {
  from { box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3); }
  to { box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.6); }
}

#status.win {
  color: var(--win-color);
  text-shadow: 0 0 10px var(--win-color);
  background: rgba(var(--win-rgb), 0.1);
  border-color: var(--win-color);
  animation: winPulse 0.8s infinite alternate;
}

@keyframes winPulse {
  from { box-shadow: 0 0 8px rgba(var(--win-rgb), 0.3); }
  to { box-shadow: 0 0 20px rgba(var(--win-rgb), 0.6); }
}

#board {
  display: inline-grid;
  gap: 4px;
  margin: 0 auto;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--secondary);
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.2);
  max-width: 80vw;
  max-height: 60vh;
  overflow: auto;
  position: relative;
}

#board::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(var(--primary-rgb), 0.02),
    rgba(var(--primary-rgb), 0.02) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: -1;
}

.cell {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 0 4px var(--primary);
}

.cell.x { color: var(--x-color); text-shadow: 0 0 8px var(--x-glow); }
.cell.o { color: var(--o-color); text-shadow: 0 0 8px var(--o-glow); }

.cell.win {
  animation: pulseWin 0.8s infinite alternate;
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.5) inset;
}

@keyframes pulseWin {
  from { box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3) inset; }
  to { box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.6) inset; }
}

.cell:hover:not(.x):not(.o) {
  background: rgba(var(--primary-rgb), 0.1);
  transform: scale(1.03);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3) inset;
  border-color: var(--primary);
}

#board.large {
  width: fit-content;
  max-width: 80vw;
  overflow-x: auto;
  padding: 10px;
  border-radius: 10px;
}

.cell.large {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

.game-controls {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* === МОДАЛЬНЫЕ ОКНА === */
.modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
  border: 1px solid var(--secondary);
  max-width: 90vw;
  width: 280px;
  text-align: center;
  animation: modalPop 0.3s ease-out;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  color: var(--primary);
}

@keyframes modalPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-content h2 {
  color: var(--primary);
  margin-bottom: 16px;
  text-shadow: 0 0 10px var(--primary);
  font-family: 'Orbitron', sans-serif;
}

.setting {
  margin: 14px 0;
}

.setting label {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: bold;
  text-shadow: 0 0 6px var(--primary);
  font-size: 1.1rem;
  font-family: 'Courier New', monospace;
}

/* --- КНОПКИ ТЕМ В НАСТРОЙКАХ --- */
.theme-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.theme-btn {
  width: 50px;
  height: 50px;
  border-radius: 8px; /* ← квадрат с закруглёнными углами */
  border: 1px solid var(--secondary);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: 0 0 4px rgba(var(--primary-rgb), 0.1);
  position: relative;
  overflow: hidden;
}

.theme-btn:hover {
  transform: scale(1.05);
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

.theme-btn.active {
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.5);
  transform: scale(1.05);
}

.theme-preview {
  width: 24px;
  height: 24px;
  border-radius: 4px; /* ← маленький квадратик внутри */
  background: currentColor; /* цвет берётся из parent */
}

.close-btn {
  margin-top: 16px;
}

/* === АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ === */
@media (max-width: 767px) {
  html, body {
    display: block;
    height: 100dvh;
    min-height: 100dvh;
    justify-content: normal;
    align-items: normal;
  }

  .container {
    width: 96vw;
    height: 96dvh;
    margin: 2dvh auto;
    border-radius: 12px;
  }

  .center-panel,
  #menu,
  #game {
    padding: 10px;
    gap: 12px;
  }

  #board {
    padding: 6px;
    max-width: 100%;
    max-height: calc(96dvh - 150px);
    overflow: auto;
  }

  .cell {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .cell.large {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  h1 {
    font-size: 1.4rem;
  }

  #status {
    font-size: 1rem;
    padding: 6px 12px;
  }

  .game-controls button {
    height: 32px;
    font-size: 0.85rem;
    padding: 0 12px;
  }
}
@media (min-width: 1000px) {
  .cell {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }

  .cell.large {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .center-panel,
  #menu,
  #game {
    padding: 24px;
    gap: 24px;
  }

  h1 {
    font-size: 2.2rem;
  }

  #status {
    font-size: 1.4rem;
    padding: 10px 20px;
  }

  /* Увеличим доску, если есть место */
  #board {
    max-width: 90vw;
    max-height: 70vh;
    padding: 12px;
  }
}
/* === ОСОБО ДЛЯ IPHONE 5/SE (320×568) === */
@media (max-width: 320px) and (max-height: 568px) {
  .container {
    width: 98vw;
    height: 97dvh;
    margin: 1.5dvh auto;
    border-radius: 10px;
  }

  .center-panel,
  #menu,
  #game {
    padding: 8px;
  }

  #board {
    max-height: calc(97dvh - 140px);
    padding: 5px;
  }

  .cell {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .cell.large {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  h1 {
    font-size: 1.3rem;
  }

  .settings-btn {
    bottom: 6px;
    left: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  #status {
    font-size: 0.95rem;
    padding: 5px 10px;
  }
}

/* RTL поддержка */
[dir="rtl"] .container,
[dir="rtl"] .size-options,
[dir="rtl"] .mode-options {
  text-align: right;
}

[dir="rtl"] .settings-btn {
  left: auto;
  right: 12px;
}

/* Защита от зума на десктопе */
@media screen and (min-width: 768px) {
  html, body {
    zoom: 1 !important;
    transform: scale(1);
    transform-origin: 0 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

/* === ЦВЕТОВЫЕ ТЕМЫ === */
/* === ЦВЕТОВЫЕ ТЕМЫ — УСИЛЕННЫЙ НЕОН === */
:root {
  --primary: #00ffff;
  --secondary: #00ffff;
  --win-color: #ff00ff;
  --x-color: #00ffff;
  --o-color: #00ff88;
  --x-glow: rgba(0, 255, 255, 0.8);
  --o-glow: rgba(0, 255, 136, 0.8);
  --primary-rgb: 0, 255, 255;
  --win-rgb: 255, 0, 255;
}

.theme-green {
  --primary: #00ffcc;
  --secondary: #00ffcc;
  --win-color: #ff3399;
  --x-color: #00ffcc;
  --o-color: #00ff66;
  --x-glow: rgba(0, 255, 204, 0.85);
  --o-glow: rgba(0, 255, 102, 0.85);
  --primary-rgb: 0, 255, 204;
  --win-rgb: 255, 51, 153;
  background: linear-gradient(135deg, #000, #002211, #00331a);
}

.theme-white {
  --primary: #ffffff;
  --secondary: #ffffff;
  --win-color: #ff44ff;
  --x-color: #ffffff;
  --o-color: #aaffff;
  --x-glow: rgba(255, 255, 255, 0.9);
  --o-glow: rgba(170, 255, 255, 0.8);
  --primary-rgb: 255, 255, 255;
  --win-rgb: 255, 68, 255;
  background: linear-gradient(135deg, #000, #0a0a0a, #111);
}

.theme-blue {
  --primary: #44ccff;
  --secondary: #44ccff;
  --win-color: #ff55ff;
  --x-color: #44ccff;
  --o-color: #00eeff;
  --x-glow: rgba(68, 204, 255, 0.85);
  --o-glow: rgba(0, 238, 255, 0.85);
  --primary-rgb: 68, 204, 255;
  --win-rgb: 255, 85, 255;
  background: linear-gradient(135deg, #000, #00081a, #000f33);
}

.theme-red {
  --primary: #ff3366;
  --secondary: #ff3366;
  --win-color: #ffff00;
  --x-color: #ff3366;
  --o-color: #ff9900;
  --x-glow: rgba(255, 51, 102, 0.9);
  --o-glow: rgba(255, 153, 0, 0.85);
  --primary-rgb: 255, 51, 102;
  --win-rgb: 255, 255, 0;
  background: linear-gradient(135deg, #000, #1a0008, #330010);
}

.theme-yellow {
  --primary: #ffff33;
  --secondary: #ffff33;
  --win-color: #00ccff;
  --x-color: #ffff33;
  --o-color: #ff6600;
  --x-glow: rgba(255, 255, 51, 0.9);
  --o-glow: rgba(255, 102, 0, 0.85);
  --primary-rgb: 255, 255, 51;
  --win-rgb: 0, 204, 255;
  background: linear-gradient(135deg, #000, #1a1a05, #33330a);
}

.theme-cyan {
  --primary: #00ffff;
  --secondary: #00ffff;
  --win-color: #ff00ff;
  --x-color: #00ffff;
  --o-color: #ff00aa;
  --x-glow: rgba(0, 255, 255, 0.9);
  --o-glow: rgba(255, 0, 170, 0.85);
  --primary-rgb: 0, 255, 255;
  --win-rgb: 255, 0, 255;
  background: linear-gradient(135deg, #000, #001212, #002222);
}

.theme-purple {
  --primary: #e050ff;
  --secondary: #e050ff;
  --win-color: #00ffff;
  --x-color: #e050ff;
  --o-color: #50aaff;
  --x-glow: rgba(224, 80, 255, 0.9);
  --o-glow: rgba(80, 170, 255, 0.85);
  --primary-rgb: 224, 80, 255;
  --win-rgb: 0, 255, 255;
  background: linear-gradient(135deg, #000, #120012, #220022);
}