#board {
	width: 400px;
    height: 400px;
    border: 12px solid #381F06;
}

.grid10 {
	display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(10, 40px);	
}

.grid8 {
	display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);	
}

.cell10 {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	user-select: none;
}

.cell8 {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	user-select: none;
}

.white-cell { 
	background: #D9BEA3; 
}

.black-cell { 
	background: #6A615E; 
}

.highlight { 
	background: #F2C86E !important; cursor: pointer; 
}

.piece10 {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform 0.1s;
	z-index: 10;
}

.piece8 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform 0.1s;
	z-index: 10;
}

.piece-dummy { 
	box-shadow: inset 0 0 0px rgba(0,0,0,0.6), 0 1px 1px rgba(0,0,0,0.4);
	background: gray; 
	border: 1px solid black; 
}

.piece-white { 
	box-shadow: inset 0 0 4px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
	background: #EFEFEF; 
	border: 2px solid #DDD; 
}

.piece-black { 
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
	background: #404040; 
	border: 2px solid #999;    
}

.piece-shrinking {
    /* Erzwingt das Zusammenschrumpfen auf die Größe Null */
    transform: scale(0) !important;
    
    /* Lässt den Stein gleichzeitig unsichtbar werden */
    opacity: 0 !important;
    
    /* Falls 'transform' blockiert wird, wird die Größe auf 0 erzwungen */
    width: 0px !important;
    height: 0px !important;
    min-width: 0px !important; 
    min-height: 0px !important;
    margin: auto !important;
	
	background: darkred; 
    
    /* Die Dauer des Schrumpfens (muss zu den 400ms im JS passen) */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out !important;
}

.queen::after {
	content: "👒";
	font-size: 24px;
	font-weight: bold;
	color: #FFD563;
}