/**
 * RPB Chessboard Annotations Styles
 */

.kokopu-navigationBoard {
	position: relative;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash {
	animation: rpb-chessboard-annotation-bg-fade 0.3s ease 0.4s forwards;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash.annotation-brilliant {
	background-color: #4CAF50;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash.annotation-good {
	background-color: #8BC34A;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash.annotation-interesting {
	background-color: #FFC107;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash.annotation-dubious {
	background-color: #FF9800;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash.annotation-mistake {
	background-color: #F44336;
}

.rpbchessboard-navigationBoard.rpb-chessboard-annotation-flash.annotation-blunder {
	background-color: #D32F2F;
}

@keyframes rpb-chessboard-annotation-bg-fade {
	to {
		background-color: transparent;
	}
}

.rpb-chessboard-annotation {
	position: absolute;
	bottom: 50%;
	right: 0;
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	z-index: 10001;
	text-align: center;
	font-size: 20px;
	line-height: 40px;
	font-weight: bold;
	pointer-events: none;
}

.rpb-chessboard-annotation-popup {
	position: absolute;
	bottom: 103%;
	background: #fff;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 10000;
	pointer-events: none;
	white-space: normal;
	word-wrap: break-word;
	max-width: 300px;
	opacity: 1;
	min-width: 150px;
	text-align: center;
}

/* Annotation type colors */
.rpb-chessboard-annotation.annotation-brilliant {
	background: #4CAF50;
	color: #fff;
	border-color: #45a049;
}

.rpb-chessboard-annotation.annotation-good {
	background: #8BC34A;
	color: #fff;
	border-color: #7CB342;
}

.rpb-chessboard-annotation.annotation-interesting {
	background: #FFC107;
	color: #333;
	border-color: #FFB300;
}

.rpb-chessboard-annotation.annotation-dubious {
	background: #FF9800;
	color: #fff;
	border-color: #F57C00;
}

.rpb-chessboard-annotation.annotation-mistake {
	background: #F44336;
	color: #fff;
	border-color: #D32F2F;
}

.rpb-chessboard-annotation.annotation-blunder {
	background: #D32F2F;
	color: #fff;
	border-color: #B71C1C;
}

/* Arrow pointing down to chessboard */
.rpb-chessboard-annotation-popup::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #333;
}

/* Comment-only popup styling */
.rpb-chessboard-annotation-popup.annotation-comment-only {
	background: #2196F3;
	color: #fff;
	border-color: #1976D2;
}

.rpb-chessboard-annotation-popup.annotation-comment-only::after {
	border-top-color: #1976D2;
}