:root {
	--graph-span-color: rgb(232, 232, 232);
	--graph-game-span-color: rgb(255, 236, 230);
	--graph-label-color: #acacac;

	--rank-point-1-color: rgb(92, 166, 210);
	--rank-point-5-color: rgb(210, 208, 92);
	--rank-point-10-color: rgb(140, 210, 92);
	--rank-point-20-color: rgb(195, 92, 210);
	--rank-point-ilscore-color: rgb(210, 92, 92);

	--graph-tooltip-shadow-filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.192));
}

@media (prefers-color-scheme: dark) {
	:root {
		--graph-span-color: rgb(68, 68, 68);
		--graph-game-span-color: rgb(67, 82, 91);
		--graph-label-color: #acacac;

		--rank-point-1-color: rgb(92, 166, 210);
		--rank-point-5-color: rgb(210, 208, 92);
		--rank-point-10-color: rgb(140, 210, 92);
		--rank-point-20-color: rgb(195, 92, 210);
		--rank-point-ilscore-color: rgb(210, 92, 92);
	}

	#graph {
		color-scheme: dark;
	}
}

h1 {
	margin-bottom: 2px;

	+ a {
		display: block;
		margin-bottom: 50px;
	}
}

#graph_explains {
	display: none;

	font-size: small;
	margin-bottom: 10px;
	margin-top: 5px;
}
#graph_explains:before {
	content: "* ";
}

#graph {
	display: none;

	position: relative;

	overflow: auto;
	white-space: nowrap;

	height: 260px;
	padding-right: 20px;

	> div {
		position: fixed;
		font-size: small;
	}

	> div:nth-child(2) {
		margin-top: 221px;
		z-index: 2;
	}

	> span {
		background-color: var(--graph-span-color);

		position: relative;

		display: inline-block;
		width: calc(30px - 2px);
		height: calc(200px - 2px);

		margin-top: 20px;

		border: 1px solid var(--content-bkg-color);
		border-radius: 4px;

		> span {
			position: absolute;
			top: calc(100% + 2px);

			font-size: small;
			color: var(--graph-label-color);

			display: none;
		}

		> div.rank_point {
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);

			width: 5px;
			height: 5px;
			border-radius: 5px;

			z-index: 3;
		}
		> div.rank_point.game_point {
			width: 10px;
			height: 10px;
			border-radius: 5px;
		}
		> div.rank_point.rank_point_1 {
			background-color: var(--rank-point-1-color);
		}
		> div.rank_point.rank_point_5 {
			background-color: var(--rank-point-5-color);
		}
		> div.rank_point.rank_point_10 {
			background-color: var(--rank-point-10-color);
		}
		> div.rank_point.rank_point_20 {
			background-color: var(--rank-point-20-color);
		}
		> div.rank_point.rank_point_ilscore {
			background-color: var(--rank-point-ilscore-color);
		}


		> div.connect {
			position: absolute;
			left: 50%;

			height: 1px;
			
			transform-origin: 0px 0.5px;
			z-index: 2;
		}
		> div.connect.connect_1 {
			background-color: var(--rank-point-1-color);
		}
		> div.connect.connect_5 {
			background-color: var(--rank-point-5-color);
		}
		> div.connect.connect_10 {
			background-color: var(--rank-point-10-color);
		}
		> div.connect.connect_20 {
			background-color: var(--rank-point-20-color);
		}
		> div.connect.connect_ilscore {
			background-color: var(--rank-point-ilscore-color);
		}


		> div.tooltip {
			position: absolute;
			left: 25px;
			top: 30px;

			z-index: 4;

			pointer-events: none;

			display: none;

			gap: 10px;

			> div {
				display: inline-block;
			}

			> div.tooltip_rank_by_container {
				background-color: var(--content-bkg-color);
				filter: var(--graph-tooltip-shadow-filter);

				padding: 3px 7px;
				border-radius: 2px;

				min-height: 80px;

				> span {
					display: block;
					
					> span:first-child {
						font-weight: bold;
					}
				}
				> span.tooltip_rank_by_1 {
					> span:first-child {
						color: var(--rank-point-1-color);
					}
				}
				> span.tooltip_rank_by_5 {
					> span:first-child {
						color: var(--rank-point-5-color);
					}
				}
				> span.tooltip_rank_by_10 {
					> span:first-child {
						color: var(--rank-point-10-color);
					}
				}
				> span.tooltip_rank_by_20 {
					> span:first-child {
						color: var(--rank-point-20-color);
					}
				}
				> span.tooltip_rank_by_ilscore {
					> span:first-child {
						color: var(--rank-point-ilscore-color);
					}
				}
			}
			> div.tooltip_rank_by_container:after {
				background: linear-gradient(
					to top right,
					var(--content-bkg-color),
					var(--content-bkg-color) 50%,
					transparent,
					transparent 50%
				);

				content: " ";

				position: absolute;
				top: 40px;
				left: -7px;

				width: 15px;
				height: 15px;
				transform: rotate(45deg);
				border-radius: 2px;
			}

			> div.tooltip_games_container {
				display: flex;
				gap: 10px;

				> table {
					background-color: var(--content-bkg-color);
					box-shadow: var(--content-shadow);
					border-radius: 2px;

					min-width: auto;
					transform: none;

					display: block;
					padding: 3px 7px;

					> tbody > tr {
						> td {
							background-color: transparent;
							display: block;
							padding: 0px;
							padding-right: 4px;

							width: auto;
							max-width: none;
						}
						> td:nth-child(4) {
							display: none;
						}
						> td:nth-last-child(-n + 4) {
							display: inline-block;
						}
						> td:first-child:after {
							display: none;
						}

						> td:nth-child(1) {
							a {
								text-decoration: none;
								font-weight: bold;
							}
						}
						> td:nth-child(2) > span {
							padding: 2px 4px;
							width: 90px;
							transform: translateX(-1px);
						}
						> td:nth-child(3) {
							a {
								text-decoration: none;
							}
						}
						> td:nth-child(3):not(:empty)::before {
							content: "with ";
							font-weight: bold;
						}
						> td:nth-child(5):before {
							content: "Vs: ";
							font-weight: bold;
						}
						> td:nth-child(6):before {
							content: "Rk: ";
							font-weight: bold;
						}
						> td:nth-child(7):before {
							content: "Rt: ";
							font-weight: bold;
						}
						> td:nth-child(8):before {
							content: "ilScr: ";
							font-weight: bold;
						}
					}
				}
			}
		}
	}

	> span.game_span {
		background-color: var(--graph-game-span-color);
	}

	> span:hover {
		background-color: var(--btn-hover-color);

		> span {
			display: block;
		}

		> div.tooltip {
			display: flex;
		}
	}

	> span:nth-last-child(-n + 24) {
		> div.tooltip {
			transform: translateX(-100%);
			left: 3px;

			> div.tooltip_rank_by_container:after {
				left: calc(100% - 9px);
				transform: rotate(calc(180deg + 45deg));
			}

			> div.tooltip_games_container {
				order: -1;
			}
		}
	}
}

#games_header {
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}
#sort_btn {
	display: none;
	margin-top: 10px;
}
h3 {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 0px;
}
span.dot_1, span.dot_5, span.dot_10, span.dot_20, span.dot_ilscore {
	display: inline-block;
	width: 10px;
	height: 10px;

	margin-bottom: 2px;

	border-radius: 5px;
}

span.dot_1 {
	background-color: var(--rank-point-1-color);
}
span.dot_5 {
	background-color: var(--rank-point-5-color);
}
span.dot_10 {
	background-color: var(--rank-point-10-color);
}
span.dot_20 {
	background-color: var(--rank-point-20-color);
}
span.dot_ilscore {
	background-color: var(--rank-point-ilscore-color);
}

@media only screen and (max-width: 990px) {
	#graph {
		tr {
			padding: 0;
		}

		tr:nth-child(odd) {
			background-color: transparent;
		}

		td {
			margin-bottom: 0;
		}
	}
}
