/* Basic Styling */

body {
  padding-top: 60px;
}
.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.small-text{
  font-size: 87.5%;
}

.tiny-text{
  font-size: 75%;
}

.fen-text {
  font-size: 75%;
  border: 1px solid #6c757d;
  font-family: 'Courier New', Courier, monospace;
}

.custom-quote{
  font-family: Garamond, serif;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* 10-colour palette */

.colour-1 {
  background-color: #EFC1C1;
}

.colour-2 {
  background-color: #EFDDC1;
}
.colour-3 {
  background-color: #E6EFC1;
}
.colour-4 {
  background-color: #CAEFC1;
}
.colour-5 {
  background-color: #C1EFD4;
}
.colour-6 {
  background-color: #C1EFEF;
}
.colour-7 {
  background-color: #C1D4EF;
}
.colour-8 {
  background-color: #CAC1EF;
}
.colour-9 {
  background-color: #E6C1EF;
}
.colour-10 {
  background-color: #EFC1DD;
}

.table > tbody > tr[class*="colour-"] > * {
  background-color: inherit;
  box-shadow: none;
}

/* Chess Board and Pieces */

.chessboard-img {
	display: block;
	z-index: 0;
	width:  100%;
}

.chessboard-frame {
	position: relative;
	width:  100%;
}

.chessboard-arrow {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.chessboard-arrow-svg {
	display: block;
	width: 100%;
	height: 100%;
  opacity: 0.5;
}

.square-highlight {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
}

.square-highlight-move {
  z-index: 1;
  background-color: rgba(253, 2, 165, 0.951);
  opacity: 50%;
}

.square-highlight-r {
  z-index: 3;
  /* background-color: rgb(220, 53, 69) */
}

.square-highlight-g {
  z-index: 3;
  /* background-color: rgb(40, 167, 69) */
}

.square-highlight-b {
  z-index: 3;
  /* background-color: rgb(0, 123, 255) */
}

.chesspiece{
	z-index: 2;
	position: absolute;
	width: 12.5%;
	height: 12.5%;
}

.wp-r1, .bp-r8{
	top: 87.5%;
}

.wp-r2, .bp-r7{
	top: 75%;
}

.wp-r3, .bp-r6{
	top: 62.5%;
}

.wp-r4, .bp-r5{
	top: 50%;
}

.wp-r5, .bp-r4{
	top: 37.5%;
}

.wp-r6, .bp-r3{
	top: 25%;
}

.wp-r7, .bp-r2{
	top: 12.5%;
}

.wp-r8, .bp-r1{
	top: 0;
}

.wp-f1, .bp-f8{
	left: 0;
}

.wp-f2, .bp-f7{
	left: 12.5%;
}
.wp-f3, .bp-f6{
	left: 25%;
}
.wp-f4, .bp-f5{
	left: 37.5%;
}
.wp-f5, .bp-f4{
	left: 50%;
}
.wp-f6, .bp-f3{
	left: 62.5%;
}
.wp-f7, .bp-f2{
	left: 75%;
}
.wp-f8, .bp-f1{
	left: 87.5%;
}

/* Bar Graph Styles */

/* Container creates the single unified horizontal bar track */
.stacked-bar-container {
  display: flex;
  width: 100%;
  max-width: 600px;
  height: 20px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  overflow: hidden; /* Cleans up the inner segment corners */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Base styling for all inner segments */
.bar-segment {
  width: var(--segment-width);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease-in-out;
  min-width: 0; /* Prevents text overflow from breaking flex layout */
}

/* Unique segment colors */
.segment-white {
  background-color: #ffffff; /* White */
  color: #000000; /* Black text for contrast */
}

.segment-draw {
  background-color: #888888; /* Gray */
  color: #ffffff; /* White text for contrast */
}

.segment-black {
  background-color: #000000; /* Black */
  color: #ffffff; /* White text for contrast */
}

/* Text labeling hidden elegantly if the segment shrinks too small */
.segment-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}