* {
            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;
        }

		/* ===== DYNAMIC BOARD SIZE ===== */
		:root {
		  /* Ширина доски = 90% от ширины экрана минус padding */
		  --board-width: min(90vw - 40px, 600px);
		  --cell-size: calc(var(--board-width) / 8);
		}
		
		/* ===== ГРАФИЧЕСКИЕ ФИГУРЫ PNG ===== */
		:root {
		  --piece-P: url(pieces/white-pawn.png);
		  --piece-N: url(pieces/white-knight.png);
		  --piece-B: url(pieces/white-bishop.png);
		  --piece-R: url(pieces/white-rook.png);
		  --piece-Q: url(pieces/white-queen.png);
		  --piece-K: url(pieces/white-king.png);
		  --piece-D: url(pieces/white-dragon.png);
		  --piece-p: url(pieces/black-pawn.png);
		  --piece-n: url(pieces/black-knight.png);
		  --piece-b: url(pieces/black-bishop.png);
		  --piece-r: url(pieces/black-rook.png);
		  --piece-q: url(pieces/black-queen.png);
		  --piece-k: url(pieces/black-king.png);
		  --piece-d: url(pieces/black-dragon.png);
		}

		/* основная разметка */
		.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-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: -30px;
		    /*width: 15px; */
			width: 30px;			
		    display: flex;
 		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		}

		.strength-bar-container {
		    /*position: relative;*/
            position: absolute;
		    width: 10px;
  		    height: var(--board-width);  /* Высота полосы */
			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;
			bottom: calc(var(--board-width)/2 + 20px); /*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;
        }*/
		
		/* Применяем к доске */
		#board {
		  width: var(--board-width);
		  height: var(--board-width);
		  grid-template-columns: repeat(8, var(--cell-size));
		  grid-template-rows: repeat(8, var(--cell-size));
		  display: grid;
		  gap: 0;
		}		

        .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);
        }

        .piece1 {
			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;			
			
        }
		
		.piece {
		  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: 3px;
		}

		.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 {
		  display: inline-block;
		  width: 32px;
		  height: 32px;
		  font-size: 0;
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
		  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: 190px;
            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: 0;  /* Скрыть текст */
		  min-height: 45px;
		  cursor: pointer;
		  padding: 4px;
		  border-radius: 4px;
		  transition: background-color 0.2s;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  gap: 5px;
		  flex-wrap: wrap;
		}

		/* Стили для отдельных драконов в кармане */
		.pocket-dragon {
		  width: 52px;
		  height: 52px;
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
		  display: inline-block;
		}

		.pocket-dragon.white {
		  background-image: url('pieces/white-dragon.png');
		}

		.pocket-dragon.black {
		  background-image: url('pieces/black-dragon.png');
		}
		

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

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


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

        .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 MODAL ===== */
		#promotion-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
			z-index: 1000;
			align-items: center;
			justify-content: center;
		}

		#promotion-modal.active {
			display: flex;
		}

		.promotion-modal-content {
			background: white;
			border-radius: 15px;
			padding: 30px;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
			text-align: center;
		}

		.promotion-modal-content h2 {
			color: #2c3e50;
			margin-bottom: 20px;
			font-size: 20px;
		}

		#promotion-pieces {
			display: flex;
			gap: 15px;
			justify-content: center;
			flex-wrap: wrap;
		}

		/* ✅ КНОПКИ С ЯВНЫМИ ЗНАЧЕНИЯМИ */
		.promotion-piece-btn {
			width: 80px;
			height: 80px;
			padding: 8px;
			border: 3px solid #3498db;           /* ← Явное значение (синий) */
			background: white;                    /* ← Явное значение */
			border-radius: 10px;
			cursor: pointer;
			transition: all 0.2s ease;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 5px;
			font-weight: bold;
			font-size: 14px;
			color: #2c3e50;                       /* ← Явное значение (темный) */
		}

		.promotion-piece-btn:hover {
			border-color: #2980b9;                /* ← Явное значение (темнее синий) */
			background: #ecf0f1;                  /* ← Явное значение */
			transform: scale(1.1);
			box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
		}

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

		.promotion-piece {
		  display: inline-block;
		  width: 56px;
		  height: 56px;
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
		  margin-right: 3px;
		  vertical-align: middle;
		  font-size: 0;  /* ← Скрыть любой текст */
		}
		
		/* ===== История ходов с иконками ===== */
		.move-piece {
		  display: inline-block;
		  width: 22px;
		  height: 22px;
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
		  margin-right: 3px;
		  vertical-align: top;
		  font-size: 0;  /* ← Скрыть любой текст */
		}

		.move-notation {
		  margin: 0 2px;
		  font-weight: 500;
		  color: #333;
		}		

		.promotion-piece-btn span:last-child {
			font-size: 12px;
			font-weight: 600;
			color: #2c3e50;
		}
		
		
		.promotion-content h3 {
			margin-bottom: 15px;  /* Было 20px */
			font-size: 18px;       /* Было 20px */
		}		

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


		
		/* кнопка показать позицию */
		.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);
		}
		
		/* Белые фигуры */
		.piece.P, .captured-piece.P, .move-piece.P { background-image: var(--piece-P); }
		.piece.N, .captured-piece.N, .move-piece.N, .promotion-piece.N { background-image: var(--piece-N); }
		.piece.B, .captured-piece.B, .move-piece.B, .promotion-piece.B { background-image: var(--piece-B); }
		.piece.R, .captured-piece.R, .move-piece.R, .promotion-piece.R { background-image: var(--piece-R); }
		.piece.Q, .captured-piece.Q, .move-piece.Q, .promotion-piece.Q { background-image: var(--piece-Q); }
		.piece.K, .captured-piece.K, .move-piece.K { background-image: var(--piece-K); }
		.piece.D, .captured-piece.D, .move-piece.D, .promotion-piece.D { background-image: var(--piece-D); }

		/* Чёрные фигуры */
		.piece.p, .captured-piece.p, .move-piece.p { background-image: var(--piece-p); }
		.piece.n, .captured-piece.n, .move-piece.n, .promotion-piece.n { background-image: var(--piece-n); }
		.piece.b, .captured-piece.b, .move-piece.b, .promotion-piece.b { background-image: var(--piece-b); }
		.piece.r, .captured-piece.r, .move-piece.r, .promotion-piece.r { background-image: var(--piece-r); }
		.piece.q, .captured-piece.q, .move-piece.q, .promotion-piece.q { background-image: var(--piece-q); }
		.piece.k, .captured-piece.k, .move-piece.k { background-image: var(--piece-k); }
		.piece.d, .captured-piece.d, .move-piece.d, .promotion-piece.d { background-image: var(--piece-d); }	
		
		.piece {
		  font-size: 0;  /* Скрыть Unicode символы */
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
		  background-color: transparent !important;
		  /*  width: 100%; */
		  /*  height: 100%; */
		}
	
		
			
		/*--блок для телефона--*/
		@media (max-width: 480px) {
		    :root {
				--board-width: min(90vw - 25px, 350px);  /* На телефоне уже */
				--cell-size: calc(var(--board-width) / 8);
			}
  
			/*.piece {
				font-family: -apple-system, 'San Francisco', 'Segoe UI', Arial, sans-serif;				
			    font-size: 38px;
            }*/
			
			.captured-pieces-container {
				margin: 1px 8px 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-modal-content {
				width: 90%;                     /* ← На 10% уже доски */
				max-width: 320px;
				padding: 12px;
				border-radius: 12px;
			}			

			.promotion-modal-content h2 {
				font-size: 14px;
				margin-bottom: 10px;
			}

			#promotion-pieces {
				gap: 8px;
			}

			.promotion-piece-btn {
				width: 50px;
				height: 50px;
				padding: 6px;
				border: 2px solid #3498db;
				font-size: 12px;
			}	
					
			.promotion-piece-btn:hover {
				transform: scale(1.05);
				box-shadow: 0 3px 10px rgba(52, 152, 219, 0.2);
			}

			.promotion-piece-btn .move-piece {
				width: 45px;
				height: 45px;
		}
			

		}			

        @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, 38px);
                grid-template-rows: repeat(8, 38px);
            }
	
			.strength-bar-container {
				height: 308px;  
				right: 15px;
			}		

			.strength-value {
				top: -172px;
				right: 8px;				
			} */
			
            
            .piece {
				font-family: -apple-system, 'San Francisco', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
			    font-size: 38px;
            }
			
			.pocket-dragon {
			  width: 32px;
			  height: 32px;
			}			

			.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 10px 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: 1px;
				display: inline-block;				
			}
			
			.promotion-content {
				padding: 15px;
				margin: 10px;
			}			
			

			.position-textarea {
				font-size: 14px;
				min-height: 40px;
			}			
			
			body {
				padding: 3px;
			}
			
			button {
				padding: 10px;
				margin-bottom: 6px;
			}			
        }