* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
		
        h1 {
            color: white;
            text-align: center;
            font-size: 20px;			
        }		

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 5px;
        }

		/* основная разметка */
		.container {
		  max-width: 1200px;
		  margin: 0 auto;
		  display: grid;
		  grid-template-columns: 1fr auto 1fr;
		  gap: 10px;
		  align-items: start;
		}		

		
		/*сетка кнопок уровня*/
		.levels-container {
		  display: flex;
		  flex-direction: column;
		  gap: 3px;
		  margin: 5px 0;
		  padding: 0px;   
		  overflow: visible;  /* Разрешить содержимому выходить за границы */
		}

		.levels-container label {
		  font-weight: 600;
		  font-size: 14px;
		  margin: 0 10px;
		}
		
		.levels-grid4 {
		  display: flex;
		  gap: 4px;
		  flex-wrap: nowrap;  /* ← Не переносить на следующую строку */
		  overflow-x: auto;   /* Если мало места - прокрутка */
		  overflow-y: visible;  /* ← ДОБАВИТЬ - разрешить выход вверх/вниз */
		  padding: 3px 0;       /* ← ДОБАВИТЬ - место для увеличенной кнопки */		  
		}

		.levels-grid {
		  display: grid;
		  grid-template-columns: repeat(8, 1fr);  /* ← 8 кнопок в одну строку, равной ширины */
		  gap: 4px;
		  /* width: 100%;   ← занимает всю ширину контейнера */
		  padding: 3px 0;
		  margin: 0 10px ;
		}
		

		.level-btn1 {
		  padding: 5px;
		  border: 2px solid #3498db;      /* ← Синяя граница */
		  background: #3498db;             /* ← Синий фон */
		  color: white;                  /* ← Белые цифры */
		  border-radius: 8px;
		  font-weight: 600;
		  font-size: 16px;
		  cursor: pointer;
		  transition: all 0.2s ease;
		}
		/////////////////
		.level-btn {
		  padding: 3px 1px;  /* ← немного больше padding по вертикали */
		  border: 2px solid #3498db;
		  background: #3498db;
		  color: white;
		  border-radius: 8px;
		  font-weight: 600;
		  font-size: 16px;
		  cursor: pointer;
		  transition: all 0.2s ease;
		  width: 100%;  /* ← заполняет ячейку grid */
		  text-align: center;
		}
		

		.level-btn:hover {
		  border-color: #1976D2;           /* ← Темнее синий */
		  background: #1976D2;
		  color: #FFFFFF;
		}

		.level-btn.active {
		  background: rgb(39, 174, 96);             /* ← Зеленый фон */
		  color: white;                  /* ← Белые цифры */
		  border-color: rgb(39, 174, 96);           /* ← Зеленая граница */
		  font-weight: 700;
		}
		
		/*кнопки над доской*/
		.board-actions {
		  display: flex;
		  gap: 10px;
		  margin-bottom: 1px;
		  justify-content: center;
		}

		.action-btn {
		  width: 50px;
		  height: 20px;
		  border-radius: 8px;
		  border: 2px solid var(--color-border);
		  background: var(--color-surface);
		  font-size: 24px;
		  cursor: pointer;
		  transition: all 0.2s;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  /* ← КЛЮЧЕВОЕ: отключить emoji цвета */
		  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;		  
		  color: white;  /* Твой цвет текста */		  
		  filter: grayscale(0%) brightness(1);		  
		}

		.action-btn:hover {
		  background: var(--color-primary);
		  transform: scale(1.05);
		}

		.action-btn:active {
		  transform: scale(0.95);
		}
		

		/*игровое поле*/
        .game-board {
            background: white;
            border-radius: 15px;
            padding: 35px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
        }


        /* ✅ На одной линии: Резерв белых | Статус | Резерв чёрных */
        .header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3px;
            width: 100%;
            margin: 0 10px 15px;
        }

        .board-container {
            position: relative;
            margin: 10px 0;
        }

		/*нотация */
        .coordinates {
            position: absolute;
            color: #333;
            font-size: 14px;
            font-weight: 800;
        }

        .file-labels {
            bottom: -20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
        }

        .rank-labels {
            top: 0;
            bottom: 0;
            left: -20px;
			width: 10px;			
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
		
		/* Контейнер для вертикального индикатора */
		.strength-indicator {
            position: absolute;
            top: 0;
            bottom: 0;			
            right: -33px;
		    /*width: 15px; */
			width: 33px;			
		    display: flex;
 		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		}

		.strength-bar-container {
		    /*position: relative;*/
            position: absolute;
		    width: 11px;
  		    height: 484px;  /* Высота полосы */
			background: #f0f0f0;
		    border: 2px solid #333;
		    border-radius: 8px;
		    overflow: hidden;
		    display: flex;
			flex-direction: column;			
		}
			

		/* Значение оценки */
		.strength-value {
		    position: relative;
			font-weight: 500;
		    font-size: 16px;
		    text-align: right;
		    min-width: 10px;
			top: -260px;
		    padding: 2px;
		    background: #f9f9f9;  
		    border: 1px solid #ddd;
		    border-radius: 1px;
			overflow: hidden;
		}
		


        #board {
            display: grid;
            grid-template-columns: repeat(8, 60px);
            grid-template-rows: repeat(8, 60px);
            border: 2px solid #2c3e50;
            border-radius: 8px;
            overflow: hidden;
        }

        .square {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            user-select: none;
        }

        .square.light {
            background-color: #b58863;
        }

        .square.dark {
            background-color: #f0d9b5;
        }

        .square.selected {
            background-color: #f7dc6f !important;
        }

        .square.last-move {
            box-shadow: inset 0 0 0 3px rgba(255, 193, 7, 0.8);
        }

        .square.legal-move::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid rgba(52, 152, 219, 0.9);
            box-sizing: border-box;
            pointer-events: none;
        }

        .square.legal-move.has-piece::after {
            border: 3px solid rgba(231, 76, 60, 0.9);
        }

        .square.dragon-drop::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid rgba(155, 89, 182, 0.9);
            box-sizing: border-box;
            pointer-events: none;
            background: rgba(155, 89, 182, 0.2);
        }

        .piece {
			font-family: 'DejaVu Sans', 'Segoe UI Symbol', 'Lucida Grande', Arial, sans-serif;
		    font-size: 50px;
            line-height: 1;
            text-shadow: 0 0 2px rgba(0,0,0,0.3);
			  z-index: 1;			
			
        }
		
		.piece2 {
		  display: block;
		  width: 100%;
		  height: 100%;
		  font-size: 0;  /* Скрыть текст */
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
		  z-index: 1;
		}
		

        .controls {
            background: white;
            border-radius: 15px;
            padding: 10px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            width: 315px;
        }

        .control-group {
            margin: 0 10px 20px;
        }

        .control-group h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 16px;
        }
		
		/* Срубленные фигуры */
		.captured-pieces-container {
			display: flex;
			justify-content: space-between;
			margin: 5px 0;
			margin-top: 30px;
			gap: 10px;
		}

		.captured-section {
			flex: 1;
			background: #f8f9fa;
			border-radius: 8px;
			padding: 8px;
			min-height: 50px;
		}

		.captured-label {
			font-size: 11px;
			color: #666;
			font-weight: 600;
			margin-bottom: 5px;
			text-align: center;
		}

		.captured-list {
			display: flex;
			flex-wrap: wrap;
			gap: 3px;
			justify-content: center;
			min-height: 30px;
		}

		.captured-piece {
			font-size: 32px;
			line-height: 1;
			opacity: 0.7;
			transition: opacity 0.2s;
		}

		.captured-piece:hover {
			opacity: 1;
		}		

        /* Выделение подсказки */
        .square.hint-move::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid rgba(46, 204, 113, 0.9);
            box-sizing: border-box;
            pointer-events: none;
            background: rgba(46, 204, 113, 0.15);
        }
		
		
		
		/*стиль кнопок*/
        button {
            width: 100%;
            padding: 6px;
            border: none;
            border-radius: 8px;
            background: #3498db;
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 8px;
        }

        button:hover {
            background: #2980b9;
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }

        select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ecf0f1;
            border-radius: 8px;
            background: white;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .status-display {
            text-align: center;
			min-width: 200px;
            margin: 0;
            flex: 1;
        }

        #status {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            padding: 10px;
            border-radius: 8px;
            background: #ecf0f1;
            margin-bottom: 10px;
        }

        .pockets {
            display: flex;
            justify-content: space-between;
            margin: 3px 0;
            padding: 2px;
            background: #f8f9fa;
            border-radius: 8px;
            gap: 30px;
        }

        .pocket {
            text-align: center;
            flex: 1;
        }

        .pocket-label {
            display: none;
        }

        .pocket-pieces {
            font-size: 36px;
            min-height: 45px;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .pocket-pieces:hover {
            background-color: #e9ecef;
        }

        .pocket-pieces.selected {
            background-color: #9b59b6;
            color: white;
        }

        .pocket-pieces.hint-move {
            border: 2px solid rgba(46, 204, 113, 0.9);
            background: rgba(46, 204, 113, 0.15);
            border-radius: 8px;
            padding: 8px;
        }

        .evaluation {
            margin: 8px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .evaluation h3 {
            color: #2c3e50;
            margin-bottom: 12px;
            font-size: 14px;
            text-align: center;
        }

        .evaluation-bar-container {
            position: relative;
            width: 100%;
            height: 30px;
            border-radius: 15px;
            overflow: hidden;
            border: 2px solid #7f8c8d;
        }

        /* ИСПРАВЛЕНИЕ 2: Две секции для динамической смены цветов */
        .evaluation-player-section {
            position: absolute;
            top: 0;
            height: 100%;
            transition: all 0.3s ease;
        }

        .evaluation-computer-section {
            position: absolute;
            top: 0;
            height: 100%;
            transition: all 0.3s ease;
        }

        .evaluation-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            font-size: 11px;
            color: #7f8c8d;
        }

        .evaluation-text {
            text-align: center;
            font-weight: 700;
            margin-top: -18px;
            font-size: 18px;
        }

        .evaluation-text.positive {
            color: #27ae60;
        }

        .evaluation-text.negative {
            color: #e74c3c;
        }

        .evaluation-text.neutral {
            color: #7f8c8d;
        }

        .engine-thinking {
            opacity: 0;
			visibility: hidden;      /* ← ДОБАВИТЬ */
            transition: opacity 0.3s ease;
            text-align: center;
            padding: 10px;
            background: #fff3cd;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .engine-thinking.active {
            opacity: 1;
			visibility: visible;     /* ← ДОБАВИТЬ */			
        }
		
		/* ✅ ДОБАВИТЬ новый класс для показа без анимации */
		.engine-thinking.show-now {
			opacity: 1;
			visibility: visible;
			transition: none;
		}		

        .move-history {
            background: white;
            border-radius: 15px;
            padding: 10px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            width: 315px;
            max-height: 729px;
            overflow-y: auto;
        }

        .move-history h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            text-align: center;
        }

        .move-list {
            font-family: monospace;
            font-size: 18px;
            line-height: 1.3;
        }

        .move-pair {
            display: flex;
            margin-bottom: 5px;
        }

        .move-number {
            width: 30px;
            color: #666;
            font-weight: bold;
        }

        .move {
            flex: 1;
            margin-right: 10px;
        }
		
		// ===== CSS: стили для модального окна =====
		.promotion-modal {
			display: none;
			position: fixed;      /* ← ГЛАВНОЕ: fixed, не absolute */
			z-index: 10000;       /* ← ГЛАВНОЕ: очень высокий */
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			align-items: center;
			justify-content: center;
		}

		.promotion-modal.active {
			display: flex !important;  /* ← Добавьте !important */
		}

		.promotion-content {
			background: white;
			border-radius: 15px;
			padding: 25px;
			box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
			text-align: center;
			animation: modalFadeIn 0.3s ease;
			
			position: relative;
			top: auto;
			left: auto;
			margin: auto;           /* ← ГЛАВНОЕ: центрирование */
			width: auto;
			max-width: 95vw;
			max-height: 95vh;
		}


		@keyframes modalFadeIn {
			from {
				opacity: 0;
				transform: scale(0.9);
			}
			to {
				opacity: 1;
				transform: scale(1);
			}
		}
		
		.promotion-content h3 {
			margin-bottom: 15px;  /* Было 20px */
			font-size: 18px;       /* Было 20px */
		}		

		.promotion-pieces {
			display: flex;
			gap: 10px;             /* Было 15px */
			justify-content: center;
			flex-wrap: wrap;       /* Добавить перенос */
		}

		.promotion-piece-btn {
			width: 70px;
			height: 70px;
			border: 3px solid #3498db;
			border-radius: 12px;
			background: white;
			font-size: 55px;           /* ← ГЛАВНОЕ: большой размер */
			line-height: 1;            /* ← ДОБАВИТЬ */
			cursor: pointer;
			transition: all 0.2s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-weight: bold;         /* ← ДОБАВИТЬ */
			color: black;              /* ← ДОБАВИТЬ */
		}

		.promotion-piece-btn:hover {
			border-color: #2980b9;
			background: #ecf0f1;
			transform: scale(1.15);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}


		.promotion-piece-btn:active {
			transform: scale(0.95);
		}
		
		/* кнопка показать позицию */
		.position-display {
			margin-top: 10px;
			padding: 10px;
			background: #f8f9fa;
			border-radius: 8px;
			display: none;
		}

		.position-display.active {
			display: block !important;  /* Добавили !important */
		}		

		.position-textarea {
			width: 100%;
			min-height: 70px;
			padding: 10px;
			border: 2px solid #3498db;
			border-radius: 6px;
			font-family: 'Courier New', monospace;
			font-size: 12px;
			resize: vertical;
			box-sizing: border-box;
			color: #333;
			background: white;
		}		

		.position-textarea:focus {
			outline: none;
			border-color: #2980b9;
			box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
		}
		
			
		/*--блок для телефона--*/
		@media (max-width: 480px) {
			
			.piece {
				font-family: -apple-system, 'San Francisco', 'Segoe UI', Arial, sans-serif;				
			    font-size: 38px;
            }
			
			.captured-pieces-container {
				margin: 3px 10px 0;
			}
			
			.captured-section {
				padding: 5px;
			}
			
			.captured-piece {
				margin-top: 6px;			
				font-size: 24px;
				display: inline-block;						
				flex-wrap: wrap;  /* ✅ Перенос на 2 строки */
				gap: 4px;
				max-width: 180px;  /* ✅ Ограничиваем ширину */				
			}
			
			.promotion-content {
				padding: 12px;
				/* margin: 10px; */
			}
			
			.promotion-piece-btn {
				width: 45px;
				height: 45px;
				font-size: 32px;
			}			
		}			

        @media (max-width: 768px) {
			.container {
						grid-template-columns: 1fr;
				gap: 5px;
			}

            .controls, .move-history {
                width: 100%;
				font-family: -apple-system, 'San Francisco', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
				font-size: 20px;
				padding: 8px;
                max-width: 480px;
                min-width: 350px;
                margin: 0 auto;
            }

			.game-board {
				width: 100%; /* Занимаем всю ширину экрана */	
				background: white;
				border-radius: 15px;
				padding: 5px;
				box-shadow: 0 20px 40px rgba(0,0,0,0.1);
				display: flex;
				flex-direction: column;
				align-items: center;
			}
            
            #board {
                grid-template-columns: repeat(8, 44px);
                grid-template-rows: repeat(8, 44px);
            }
			
			.strength-bar-container {
				height: 356px;  /* Высота полосы */
				right: 15px;
			}		

			.strength-value {
				top: -195px;
				right: 8px;				
			}
			
            
            .piece {
				font-family: -apple-system, 'San Francisco', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
			    font-size: 38px;
            }

			.move-list {
				font-family: -apple-system, 'San Francisco', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
				font-size: 20px;
				line-height: 1.2;
				margin: 0 20px;
			}

			.pockets {
				margin: 1px;
				padding: 2px;
			}

            .pocket-pieces {
                font-size: 32px;
            }

			.evaluation {
				margin: 5px 0;
				padding: 8px;
			}

		   .captured-pieces-container {
				margin: 20px 30px 5px ;
			}
			
			.captured-section {
				padding: 5px;
				min-height: 40px;
			}
			
			.captured-label {
				font-size: 10px;
				margin-bottom: 3px;
			}
			
			.captured-piece {
				display: flex;
				flex-wrap: wrap;  /* ✅ Перенос строк */
				gap: 6px;
				max-width: 220px;  /* ✅ Ограничиваем ширину */			
				font-size: 28px;
				margin: 3px;
				display: inline-block;				
			}
			
			.promotion-content {
				padding: 15px;
				margin: 20px;
			}			
			
			.promotion-piece-btn {
				width: 50px;
				height: 50px;
				font-size: 35px;
			}			
			
			.position-textarea {
				font-size: 14px;
				min-height: 40px;
			}			
			
			body {
				padding: 3px;
			}
			
			button {
				padding: 10px;
				margin-bottom: 6px;
			}			
        }