/* style.css */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
/* background-color: #f0f0f0; */
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
  overflow-x: hidden;
  background-image: url('SVG/BG.jpg'); /* Путь к твоему изображению */
  background-size: cover;          /* Масштабирует изображение, чтобы оно полностью покрыло фон, обрезая лишнее */
  background-position: center center; /* Центрирует изображение */
  background-repeat: no-repeat;    /* Предотвращает повторение изображения, если оно меньше экрана */
  background-attachment: fixed;      /* Делает фон неподвижным при прокрутке (опционально, но часто хорошо смотрится) */
}

.app-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  gap: 10px;
  box-sizing: border-box; /* Добавлено */
}

.panel {
  background-color: #f4f7f9;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 150px;
  flex-shrink: 0;
}

.menu-button {
  background-color: #e9eef2;
  border: 1px solid #d8dfe5;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  font-size: 1.5em; /* Базовый размер шрифта для текста в кнопках */
  font-weight: 500;
  color: #3b5978;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.menu-button:hover {
  background-color: #dde4ea;
  border-color: #cdd7df;
  box-shadow: 0 3px 5px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.3);
}
.menu-button:active {
  background-color: #d1d9e0;
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(0,0,0,0.05);
}

.menu-button.active-button {
  background-color: #66a3ff;
  border-color: #4d8ae6;
  color: #fff; /* Текст на активной кнопке станет белым */
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 50, 150, 0.2),
              inset 0 1px 1px rgba(255,255,255,0.4),
              inset 0 -1px 1px rgba(0,0,0,0.1);
}
.menu-button.active-button:hover { background-color: #5a96f8; }
.menu-button.active-button:active {
  background-color: #4d8ae6;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  transform: translateY(1px);
}

/* Стили для иконок внутри кнопок */
.menu-button .button-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
/* Если SVG иконки не наследуют цвет от кнопки (fill="currentColor" не задан в SVG),
   и они, например, черные, а кнопка активная синяя с белым текстом,
   то черная иконка может плохо смотреться.
   Можно попробовать CSS фильтр для инвертирования цвета иконки на активных кнопках: */
.menu-button.active-button .button-icon {
   filter: brightness(0) invert(1); /* Делает черную иконку белой */
}


/* Для кнопки "Правила", где иконка и текст */
.menu-button .button-icon-text {
  margin-right: 8px; /* Отступ между иконкой и текстом "Правила" */
}
/* Текст рядом с иконкой */
.menu-button .button-text {
  /* Стили не требуются, если flex на .menu-button уже выравнивает */
}


.main-menu-button {
  font-weight: bold;
  background-color: #5c99d6;
  border-color: #4a80b3;
  color: white;
  font-size: 1em;
  padding: 12px 12px;
  box-shadow: 0 2px 4px rgba(0, 50, 100, 0.2),
              inset 0 1px 1px rgba(255,255,255,0.3),
              inset 0 -1px 1px rgba(0,0,0,0.1);
}
.main-menu-button:hover { background-color: #4a80b3; }
.main-menu-button:active {
  background-color: #42719e;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  transform: translateY(1px);
}

.submenu { display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }

.player-display {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 0; padding-top: 5px; padding-bottom: 0px;
}
.left-panel .player-display, .right-panel .player-display { margin-top: 0; }
.player-avatar-container { position: relative; width: 70px; height: 70px; border-radius: 50%; background-color: #fff; overflow: hidden; margin-bottom: 8px; border: 3px solid #b3d9ff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center; }
.player-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.player-name-text { font-size: 1.1em; font-weight: 600; color: #2c3e50; margin-bottom: 4px; }
.player-symbol-container { position: relative; width: 60px; height: 60px; margin-top: 3px; display: flex; justify-content: center; align-items: center; }
.player-symbol-text { font-family: 'Fredoka One', cursive, Arial, sans-serif; font-size: 4em; line-height: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.player-symbol-text.player-x-text { color: #0052cc; }
.player-symbol-text.player-o-text { color: #cc2900; }

.player-symbol-container .winner-overlay-img {
  position: absolute; top: 50%; left: 50%;
  width: 450%; max-width: 180px; /* Твои значения */
  height: 150%; z-index: 10; /* Твои значения */
  pointer-events: none;
  animation: stampEffect 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  opacity: 0;
}
@keyframes stampEffect {
  0% { transform: translate(-50%, -200%) rotate(-30deg) scale(1.8); opacity: 0; }
  60% { transform: translate(-50%, -48%) rotate(-10deg) scale(0.9); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-10deg) scale(1); opacity: 1; }
}

.game-area-wrapper {
  display: flex; align-items: stretch; justify-content: center;
  min-width: 0; position: relative;
}

.game-area {
  display: flex; flex-direction: column; align-items: center;
  background-color: white; padding: 20px; border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  position: relative; z-index: 2; width: auto;
}

.side-glow {
  width: 10px;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  opacity: 0; position: absolute; z-index: 1;
}
.left-glow { left: 7px; border-radius: 10px 0 0 10px; }
.right-glow { right: 7px; border-radius: 0 10px 10px 0; }
.left-glow.active, .right-glow.active { opacity: 1; }

#game-title-main {
  margin: 0 0 10px 0;
  font-size: 2em;
  color: #33475b;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  word-break: break-word; /* Добавим перенос для длинных заголовков, если вдруг */
}

#turn-message {
  font-size: 1.3em;
  color: #28a745;
  font-weight: 600;
  min-height: 1.4em; /* Может понадобиться увеличить, если текст часто в 2 строки */
  text-align: center;
  margin-bottom: 8px;
  padding-left: 10px;  /* Небольшие отступы по бокам, чтобы текст не прилипал */
  padding-right: 10px; /* к краям, если .game-area узкая */
  width: 100%; /* Занимает доступную ширину внутри .game-area (с учетом padding .game-area) */
  box-sizing: border-box;
  word-wrap: break-word; /* Для переноса длинных слов */
  overflow-wrap: break-word; /* Более современный аналог word-wrap */
  /* white-space: normal; /* По умолчанию, но на всякий случай */
}

#status-area {
  margin-bottom: 10px;
  font-size: 0.9em;
  min-height: 1.1em; /* Может понадобиться увеличить */
  color: #6a7f96;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* white-space: normal; */
}

.board-container {
  display: grid; grid-gap: 4px;
  border: 4px solid #003366; background-color: #e0e8f0;
  position: relative; z-index: 2;
  width: 50vmin; height: 50vmin;
  min-width: 280px; min-height: 280px;
  max-width: 600px; max-height: 600px;
  margin: 5px auto 10px auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0,0,0,0.08);
}
.board-container.size9 { border: 4px solid #222; gap: 3px; }

.cell {
  background-color: #ffffff; border: 1px solid #dde4ea;
  display: flex; justify-content: center; align-items: center;
  font-family: 'Fredoka One', cursive, Arial, sans-serif; cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease-in-out, transform 0.1s ease-out, box-shadow 0.15s ease-in-out;
  position: relative; overflow: hidden;
}
.cell:hover {
  background-color: #e8f4ff; transform: scale(1.03);
  box-shadow: 0 0 10px rgba(100, 150, 255, 0.3); z-index: 3;
}
.cell.playerX { color: #0052cc; }
.cell.playerO { color: #cc2900; }
.cell.active-small-board-cell { background-color: #d8f8d8 !important; box-shadow: inset 0 0 8px rgba(0,120,0,0.25); }
.cell.active-ultimate-cell { background-color: #c8f0c8 !important; box-shadow: inset 0 0 8px rgba(0,100,0,0.25); }

.winning-line { position: absolute; height: 5px; border-radius: 3px; pointer-events: none; z-index: 10; transform-origin: 0 50%; }
.winning-line.global-winning-line { z-index: 20; height: 10px; }

.small-board {
  position: relative; display: grid;
  border: 3px solid #8899aa; background-color: #fcfcfc; gap: 2px;
}
.small-board .cell { border: 1px solid #c0cedc; }
.small-board-winner-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
  font-weight: bold; pointer-events: none; z-index: 5;
  font-size: calc( (600px / 3) * 0.70 ); opacity: 0.9;
}
.small-board-winner-overlay.playerX-win { color: #0052cc; }
.small-board-winner-overlay.playerO-win { color: #cc2900; }
.small-board-winner-overlay.draw { color: #556270; }

#right-panel-main-controls { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#game-mode-buttons { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* Убрали font-size для кнопок с иконками, так как размер иконки задан через .button-icon */
.panel.right-panel .game-mode-btn,
.panel.right-panel #btn-sound,
.panel.right-panel #btn-music {
  /* font-size: 1.5em; /* Убрано */
}
.panel.right-panel #btn-rules { font-size: 0.9em; } /* Для текстовой кнопки "Правила" */
.menu-button.setting-off { opacity: 0.6; background-color: #e0e6eb; }
.menu-button.setting-off .button-icon { /* Если иконка должна быть серой на выключенной кнопке */
  filter: grayscale(80%) opacity(70%);
}


#rules-display { border: 1px solid #b0c4de; padding: 12px; margin-top: 10px; background-color: #f8f9fa; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); width: 100%; box-sizing: border-box; }
#rules-display h3 { margin-top: 0; font-size: 1.2em; color: #343a40; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; margin-bottom: 10px; }
#rules-content { font-size: 0.9em; line-height: 1.5; max-height: 250px; overflow-y: auto; color: #495057; scrollbar-gutter: stable both-edges; }
#rules-content p { margin-top: 0; margin-bottom: 0.8em; }
#rules-content ul { padding-left: 20px; margin-bottom: 0.8em; }
#rules-content li { margin-bottom: 0.3em; }
#close-rules-button { background-color: #e6e6e6; color: #555; border: 1px solid #ccc; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.9em; font-weight: bold; float: right; line-height: 1; transition: background-color 0.2s, color 0.2s; width: auto; }
#close-rules-button:hover { background-color: #d4d4d4; color: #333; }

.rules-accordion .accordion-item { border-bottom: 1px solid #eee; }
.rules-accordion .accordion-item:last-child { border-bottom: none; }
.rules-accordion .accordion-header { background-color: #f8f9fa; color: #495057; cursor: pointer; padding: 12px 10px; width: 100%; text-align: left; border: none; outline: none; font-size: 1em; transition: background-color 0.2s ease; font-weight: 600; }
.rules-accordion .accordion-header:hover, .rules-accordion .accordion-header.active { background-color: #e9ecef; }
.rules-accordion .accordion-header.active::after { content: '\\2013'; float: right; font-weight: bold; }
.rules-accordion .accordion-header:not(.active)::after { content: '+'; float: right; font-weight: bold; }
.rules-accordion .accordion-content { padding: 0 15px 10px 15px; background-color: white; overflow: hidden; }
.rules-accordion .accordion-content p, .rules-accordion .accordion-content ul { margin-top: 10px; }

.panel hr,
.player-info-divider {
  border: none; border-top: 1px solid #d8dfe5;
  margin-top: 12px; margin-bottom: 12px;
}

@media (max-width: 768px) {
  .app-container { flex-direction: column; align-items: center; gap: 15px; }
  .panel { width: 90%; max-width: 400px; flex-basis: auto; order: 1; }
  .panel.left-panel { order: 2; }
  .game-area-wrapper { width: 100%; order: 0; }
  .side-glow { display: none; }
  .game-area { width: 100%; }
  .board-container { width: 90vw; height: 90vw; max-width: none; max-height: none; }
  .board-container.size9 { width: 95vw; height: 95vw; }
  .player-symbol-container .winner-overlay-img { max-width: 140px; }
}

/* style.css */
@keyframes cellSymbolAppear {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cell.playerX,
.cell.playerO {
  /* ... существующие стили ... */
  animation: cellSymbolAppear 0.2s ease-out forwards;
}

/* style.css */
@keyframes drawLine {
  from {
    width: 0;
  }
  to {
    /* width: будет установлена JS, но анимация будет идти к этому значению */
    /* Для этого нужно будет в JS сначала установить width:0, а потом target width */
  }
}

.winning-line {
  /* ... существующие стили ... */
  /* animation: drawLine 0.5s ease-out forwards; */ /* Потребует доработки JS */
  /* Проще пока: */
  opacity: 0;
  transform: scaleX(0) rotate(var(--angle, 0deg)); /* Начальное состояние для анимации */
  transform-origin: 0 50%; /* Уже есть */
  animation: fadeInDrawLine 0.4s 0.2s ease-out forwards; /* 0.2s задержка */
}
.winning-line.global-winning-line {
    /* ... */
    animation: fadeInDrawLineGlobal 0.5s 0.2s ease-out forwards;
}


@keyframes fadeInDrawLine {
  to {
    opacity: 1;
    transform: scaleX(1) rotate(var(--angle, 0deg));
  }
}
/* Для глобальной линии можно чуть толще сделать эффект */
@keyframes fadeInDrawLineGlobal {
  to {
    opacity: 1;
    transform: scaleX(1) rotate(var(--angle, 0deg));
  }
}
#turn-message {
  /* display: none; /* Полностью скрыть и убрать из потока */
  /* или, если хотите просто сделать текст невидимым, но оставить место: */
  visibility: hidden;
  height: 0; /* Убираем высоту, чтобы элемент не занимал место */
  margin-bottom: 0; /* Убираем отступ снизу */
  padding: 0; /* Убираем внутренние отступы */
  font-size: 0; /* Убираем размер шрифта, чтобы он не влиял на компоновку */
  min-height: 0; /* Сбрасываем минимальную высоту */
  /* Остальные стили, если они были, можно оставить или удалить */
}

#status-area {
  /* display: none; */
  visibility: hidden;
  height: 0;
  margin-bottom: 0;
  padding: 0;
  font-size: 0;
  min-height: 0;
  /* Остальные стили, если они были, можно оставить или удалить */
}