body {
	overflow: hidden;
	text-align: center;
	background-color: rgb(48, 48, 48);
}

h1 {
	margin-top: 0.2em;
	margin-bottom: 0.2em;

	color: RGBA(255, 255, 255, 0.8);
	font-size: 4.5em;
	font-weight: 500;
}

h2 {
	margin-top: 0.2em;
	margin-bottom: 0.2em;

	color: RGBA(255, 255, 255, 0.8);
	font-size: 3em;
	font-weight: 100;
}

.background-dithering {
	position: absolute;
	z-index: -10;

	width: 100%;
	height: 100%;
}

#dynamic-background .background-dithering {
	opacity: 45%;
}

#menu .background-dithering {
	opacity: 35%;
}

.background-monochrome {
	position: absolute;
	z-index: -30;

	width: 100%;
	height: 100%;
}

#menu .background-monochrome {
	background-color: hsl(0deg, 0%, 10%);
}

.ranking-date-button {
	margin: 0;

	color: hsla(0, 0%, 100%, 100%);

	cursor: pointer;

	transition-property: color;
	transition-duration: var(--timeline-default-hover-duration);
}

/** BACKGROUND */

#dynamic-background {
	position: fixed;
	top: calc(-1 * var(--dynamic-background-margins));
	left: calc(-1 * var(--dynamic-background-margins));
	z-index: -1;

	width: 100%;
	height: 100%;

	margin: var(--dynamic-background-margins);

	background-color: hsl(0, 0%, 15%);

	pointer-events: none;
}

#characters-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -20;

	width: 100%;
	height: 100%;
}

.background-dithering {
	position: absolute;

	top: 0;
	left: 0;
	z-index: -10;

	width: 100%;
	height: 100%;

	background-image: url("../../assets/images/sprites/ranking_background_dithering.png");
	background-size: 200px 200px;
	background-repeat: repeat;

	opacity: 50%;
}

.ranking-character {
	position: absolute;

	margin: 0;

	color: hsl(0, 0%, 25%);

	animation: 1s ease-in-out 0s 1 forwards character-spawn;
}

.ranking-character .icon {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	transform-origin: center center;
}

.ranking-character .icon::before {
	position: absolute;
	top: 0;
	left: 0;
}

/** CONTENT */

#content {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 999;

	display: flex;
	flex-direction: column-reverse;
	align-items: center;

	width: 100%;
}

/** RANKING */

#rankings-container {
	position: relative;
	display: flex;
	flex-direction: row;

	width: 100%;
	height: 100%;

	overflow-y: clip;
}

.ranking-board {
	position: absolute;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;
}

.ranking {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;

	overflow-x: hidden;
	overflow-y: auto;

	scrollbar-color: transparent transparent;
}

.ranking.ranking-scrollable {
	scrollbar-color: var(--ranking-scrollbar-background);
}

.ranking-title {
	position: absolute;
	top: 50%;
	left: calc(72%);

	width: 5em;

	color: hsla(0deg, 0%, 100%, 65%);
	text-align: right;
	font-family: Roboto-Black;
	font-size: 4.35em;

	pointer-events: none;
}

.score-bars-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	padding-top: 3em;
	width: 60%;
}

.score-bar {
	display: flex;

	width: 700px;

	margin-bottom: 18pt;

	font-size: 18pt;

	color: white;
	text-align: center;

	background-color: rgb(116, 77, 203);
	transform: skew(-15deg);
}

#score-bar-first {
	width: 980px;
	margin-bottom: 32pt;
	font-size: 32pt;
}

#score-bar-second {
	width: 854px;
	margin-bottom: 25pt;
	font-size: 25pt;
}

#score-bar-third {
	width: 770px;
	margin-bottom: 20pt;
	font-size: 20pt;
}

.player-data-section {
	display: flex;
	flex-direction: column;
}

.player-rank-section {
	width: 130px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.3);
}

#score-bar-first .player-rank-section {
	width: 182px;
	background-color: rgb(205, 164, 52);
}

#score-bar-second .player-rank-section {
	width: 158px;
	background-color: rgb(137, 140, 155);
}

#score-bar-third .player-rank-section {
	width: 143px;
	background-color: rgb(179, 133, 105);
}

.player-name-section {
	text-align: left;
	flex: 3;
}

.player-score-section {
	position: relative;

	text-align: left;
	flex: initial;

	color: rgb(116, 77, 203);
	background-color: rgba(255, 255, 255);
}

.badge-row-anchor {
	top: -0.35em;
	margin-right: 0.5em;
	font-size: 0.5em;
}

.badge .tooltip-anchor {
	position: absolute;
	right: 100%;
	top: 55%;

	display: flex;
	align-items: center;

	width: 0;
	height: 0;

	flex-direction: row-reverse;

	pointer-events: none;
}

.badge .tooltip {
	position: absolute;
	right: unset;
	left: unset;
	top: unset;
	bottom: unset;

	flex-direction: row-reverse;

	width: unset;
	height: unset;

	font-size: 12pt;

	transform: skew(-15deg);
	filter: drop-shadow(2px 2px 3px hsla(0, 0%, 0%, 40%));

	transition-delay: 0ms;
}

.badge:hover .tooltip {
	visibility: visible;
	opacity: 1;
}

.badge .tooltip-content {
	width: 12em;
	padding-inline: 1.35em;
}

.badge .tooltip-content span {
	text-align: justify;
	transform: skew(15deg);
}

.tooltip-pointer {
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	transform: translateX(-1px);
}

.player-score-section .badge-row-anchor .badge {
	transform: skew(15deg);
}

.player-rank-delta-section {
	text-align: left;
	flex: initial;

	color: rgb(116, 77, 203);
	background-color: rgba(192, 192, 192);
}

.player-rank-delta-section-positive {
	color: rgb(58, 134, 127);
}

.player-rank-delta-section-negative {
	color: rgb(141, 74, 94);
}

.player-data {
	display: inline;
	line-height: 1.96;

	flex: auto;

	padding: 0 18px;

	transform: skew(15deg);
}

.player-data * {
	vertical-align: top;
}

.delta-arrow {
	overflow: hidden;

	width: 22px;
	height: 25px;

	vertical-align: middle;

	transform: scale(0.8);
}

.delta-arrow .test {
	transform: scale(2);
}

#score-bar-first .delta-arrow {
	width: 30.8px;
	height: 35px;

	transform: translate(0px, 5px) scale(1.12);
}

#score-bar-second .delta-arrow {
	width: 26.9px;
	height: 30.5px;

	transform: translate(0px, 3px) scale(0.98);
}

#score-bar-third .delta-arrow {
	width: 24.2px;
	height: 27.5px;

	transform: translate(0px, 1px) scale(0.88);
}

.delta-arrow-up {
	fill: rgb(58, 134, 127);
}

.delta-arrow-down {
	fill: rgb(141, 74, 94);
}

.player-name-text,
.player-score-text,
.player-rank-delta-text,
.player-logo-section {
	font-family: Dubai-Regular, Arial;
}


.player-logo-section {
	display: block;
	flex: 1.3;
	padding: 0;
}

.player-name-text,
.player-score-text,
.player-rank-delta-text {
	transform: skew(15deg) translate(0, 3px);
}

.player-name-text {
	max-width: 180px;

	margin-left: 14px;
	padding-left: 0;

	overflow: hidden;
	white-space: nowrap;
}

#score-bar-first .player-name-text {
	max-width: 252px;

	margin-left: 19.6px;
	padding-left: 0;
}

#score-bar-second .player-name-text {
	max-width: 220px;

	margin-left: 17px;
	padding-left: 0;
}

#score-bar-third .player-name-text {
	max-width: 198px;

	margin-left: 15.4px;
	padding-left: 0;
}

.player-logo {
	width: 26pt;
	/* height: -webkit-fill-available; */
	max-height: 26pt;

	margin-left: 12px;

	padding: 0;

	background-color: white;
	background-clip: content-box;

	border-radius: 50%;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);

	transform: skew(15deg) scale(1.7, 1.7) translate(0, -3px);
}

#score-bar-first .player-logo {
	width: 45pt;
	max-height: 45pt;

	margin-left: 16.8px;

	transform: skew(15deg) scale(1.7, 1.7) translate(0, -4.2px);
}

#score-bar-second .player-logo {
	width: 38pt;
	max-height: 38pt;

	margin-left: 14.6px;

	transform: skew(15deg) scale(1.7, 1.7) translate(0, -3.66px);
}

#score-bar-third .player-logo {
	width: 32pt;
	max-height: 32pt;

	margin-left: 13.2px;
	transform: skew(15deg) scale(1.7, 1.7) translate(0, -3.3px);
}

.score-bar-footer {
	height: 4px;
	background-color: hsla(0deg, 0%, 0%, 25%);
}

#score-bar-first .score-bar-footer {
	height: 7px;
}

#score-bar-second .score-bar-footer {
	height: 6px;
}

#score-bar-third .score-bar-footer {
	height: 5px;
}

.ranking-footer {
	position: relative;

	display: block;
	width: 100%;
	margin-bottom: 1em;
}

.load-more-panel,
.loading-ranks-text {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
}

.load-more-panel {
	display: flex;
	flex-direction: row;
	column-gap: 1em;
	justify-content: center;
}

.loading-ranks-text {
	margin-top: 0;
	font-size: 1.65em;
}

.ranking-board button,
.loading-ranks-text {
	height: 2.5em;
	color: hsl(0, 0%, 60%);
	font-family: Roboto-Regular;
}

.ranking-board button {
	padding: 0 1.5em;

	border-style: solid;
	border-color: hsl(0, 0%, 45%);
	border-radius: 2.5em;

	font-size: 1.2em;

	background-color: hsl(0, 0%, 15%);

	transition-property: background-color, color, border-color;
	transition-duration: 125ms;
}

.ranking-board button:hover {
	border-color: hsl(0, 0%, 75%);
	background-color: hsl(0, 0%, 30%);
	color: hsl(0, 0%, 90%);
}

.ranking-board button:active {
	border-color: hsl(0, 0%, 85%);
	background-color: hsl(0, 0%, 85%);
	color: hsl(0, 0%, 15%);
}

/* Scrollbar hidden */
.ranking::-webkit-scrollbar {
	opacity: 0;
}

/* Scrollbar height */
.ranking.ranking-scrollable::-webkit-scrollbar {
	width: 1em;
	opacity: 1;
}

/* Scrollbar track */
.ranking.ranking-scrollable::-webkit-scrollbar-track {
}

/* Scrollbar handle */
.ranking.ranking-scrollable::-webkit-scrollbar-thumb {
	background-color: var(--ranking-scrollbar-background);
	transition: background-color 250ms;
}

/* Scrollbar handle on hover */
.ranking.ranking-scrollable::-webkit-scrollbar-thumb:hover {
	background-color: hsla(0deg, 0%, 100%, 35%);
}

/* Scrollbar handle on active */
.ranking.ranking-scrollable::-webkit-scrollbar-thumb:active {
	background-color: hsla(0deg, 0%, 100%, 50%);
}

/** MENU */

#menu {
	position: relative;
	z-index: 999;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;

	box-shadow: 0px -6px 8px rgb(0, 0, 0, 20%);
}

#menu-background {
	position: absolute;
	z-index: -20;

	width: 100%;
	height: 100%;

	background-size: 135% 100%;
	background-position: 0% 0%;
	background-image: linear-gradient(
		90deg,
		var(--ranking-menu-color-1) 0%,
		var(--ranking-menu-color-2) calc(100% / 7 * 1),
		var(--ranking-menu-color-3) calc(100% / 7 * 2),
		var(--ranking-menu-color-4) calc(100% / 7 * 3),
		var(--ranking-menu-color-5) calc(100% / 7 * 4),
		var(--ranking-menu-color-6) calc(100% / 7 * 5),
		var(--ranking-menu-color-7) calc(100% / 7 * 6),
		var(--ranking-menu-color-1) 100%
	);

	opacity: 20%;
}

#date-browsing-area {
	position: relative;
	z-index: -5;

	width: 100%;

	color: white;
}

.rankings-browser {
	position: absolute;
	width: 100%;
	user-select: none;
}

#timeline-section {
	top: -0.5em;

	display: flex;
	flex-direction: row;
	justify-content: center;
}

#timeline-viewport {
	position: relative;
	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	-webkit-mask-repeat: no-repeat;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 3%,
		white 15%,
		white 85%,
		transparent 97%
	);

	/* transform: rotateX(180deg); */

	scrollbar-color: var(--timeline-scrollbar-background) transparent;
}

#timeline {
	display: flex;
	flex-direction: row;
	align-items: center;

	height: calc(var(--timeline-timestamp-size) * 2.5);
	padding: 3.5em 0 2em 0;

	/* transform: rotateX(-180deg); */
}

#timeline-center {
	position: relative;

	display: flex;
	flex-direction: row;
	align-items: center;
}

#timeline-start {
	margin-right: var(--timeline-year-point-margin);
}

.timeline-link {
	z-index: -5;

	height: calc(var(--timeline-link-height));
	background-color: white;
	opacity: 25%;

	transition-property: opacity;
	transition-duration: 150ms;
}

.timeline-link-highlighted {
	opacity: 85%;
}

#timeline-start .timeline-link,
#timeline-end .timeline-link {
	width: 100%;
}

.timeline-timestamp {
	position: sticky;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.timeline-timestamp-session,
.timeline-timestamp-archive {
	position: absolute;
	min-width: 20px;
}

.timeline-timestamp-season {
	min-width: var(--timeline-season-point-size);
	width: var(--timeline-season-point-size);
}

.timeline-timestamp-year {
	min-width: var(--timeline-year-point-size);
	width: var(--timeline-year-point-size);
}

.timeline-timestamp-area {
	position: absolute;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 4.5em;
	height: 6em;

	cursor: pointer;
}

.timeline-timestamp-session .timeline-timestamp-area,
.timeline-timestamp-archive .timeline-timestamp-area {
	width: 1.25em;
	height: 2.65em;
}

.timeline-timestamp-point {
	position: absolute;

	background-color: white;

	transition-property: opacity, transform;
	transition-duration: var(--timeline-default-hover-duration);

	opacity: 75%;

	transform: scale(1);
}

.timeline-timestamp-area:hover .timeline-timestamp-point {
	opacity: 85%;
}

.timeline-timestamp-season
	.timeline-timestamp-area:hover
	.timeline-timestamp-point,
.timeline-timestamp-year
	.timeline-timestamp-area:hover
	.timeline-timestamp-point {
	transform: scale(1.2);
}

.timeline-timestamp-area:active .timeline-timestamp-point {
	opacity: 100%;
}

.timeline-timestamp-session .timeline-timestamp-point,
.timeline-timestamp-archive .timeline-timestamp-point {
	top: calc(50% - var(--timeline-link-height) * 0.5);

	z-index: 1;

	height: var(--timeline-link-height);

	opacity: 50%;
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 100%));

	transition-property: top, height;
}

.timeline-timestamp-session .timeline-timestamp-point {
	width: calc(var(--timeline-session-point-size));
	transition-duration: var(--timeline-session-hover-duration);
}

.timeline-timestamp-archive .timeline-timestamp-point {
	width: calc(var(--timeline-archive-point-size));
	transition-duration: var(--timeline-archive-hover-duration);
}

.timeline-timestamp-session
	.timeline-timestamp-area:hover
	.timeline-timestamp-point,
.timeline-timestamp-archive
	.timeline-timestamp-area:hover
	.timeline-timestamp-point {
	top: calc(50% + var(--timeline-link-height) * -0.5 - 50%);
	height: calc(var(--timeline-link-height) + 50%);
}

.timeline-timestamp-season .timeline-timestamp-point {
	top: calc(50% - var(--timeline-season-point-size) * 0.5);

	width: var(--timeline-season-point-size);
	height: var(--timeline-season-point-size);

	border-radius: var(--timeline-season-point-size);
}

.timeline-timestamp-year .timeline-timestamp-point {
	top: calc(50% - var(--timeline-year-point-size) * 0.5);

	width: var(--timeline-year-point-size);
	height: var(--timeline-year-point-size);

	border-radius: var(--timeline-year-point-size);
}

.timeline-timestamp .ranking-date-button {
	position: absolute;

	font-family: Roboto-Light;
	white-space: nowrap;
}

.timeline-timestamp .ranking-date-button-bottom {
	bottom: 0.5em;
	font-size: 1.05em;
	color: var(--ranking-title-minor-color-idle);
}

.timeline-timestamp-season .ranking-date-button-bottom {
	bottom: 0.65em;
}

.timeline-timestamp .ranking-date-button-top {
	top: 0;
	font-size: 1.3em;
	color: var(--ranking-title-major-color-idle);
}

.timeline-timestamp-session .ranking-date-button-top,
.timeline-timestamp-archive .ranking-date-button-top {
	left: 50%;
	top: 5%;

	display: initial;
	padding-inline-start: 0.35em;

	text-align: left;
	font-size: 0.85em;
	color: hsla(0, 0%, 100%, 0%);

	pointer-events: none;

	transition-property: color, opacity, left, top;
	transition-delay: 50ms;
	transition-timing-function: ease-out;
}

.timeline-timestamp-session .ranking-date-button-top {
	transition-duration: var(--timeline-session-hover-duration);
}

.timeline-timestamp-archive .ranking-date-button-top {
	transition-duration: var(--timeline-archive-hover-duration);
}

.timeline-timestamp-season .ranking-date-button-top {
	display: none;
}

.timeline-timestamp-season .timeline-timestamp-area:hover .ranking-date-button,
.timeline-timestamp-area .ranking-date-button-bottom:hover {
	color: var(--ranking-title-minor-color-hover);
	transition-duration: 50ms;
}

.timeline-timestamp-year
	.timeline-timestamp-area:hover
	.ranking-date-button-top {
	color: var(--ranking-title-major-color-hover);
	transition-duration: 50ms;
}

.timeline-timestamp-season .timeline-timestamp-area:active .ranking-date-button,
.timeline-timestamp-area .ranking-date-button-bottom:active {
	color: var(--ranking-title-minor-color-active);
}

.timeline-timestamp-year
	.timeline-timestamp-area:active
	.ranking-date-button-top {
	color: var(--ranking-title-major-color-active);
}

.timeline-timestamp-session
	.timeline-timestamp-area:hover
	.ranking-date-button-top,
.timeline-timestamp-archive
	.timeline-timestamp-area:hover
	.ranking-date-button-top {
	top: -5px;
	color: var(--ranking-title-minor-color-hover);
}

.timeline-timestamp-area-inverted {
	direction: rtl;
}

.timeline-timestamp-session
	.timeline-timestamp-area-inverted
	.ranking-date-button,
.timeline-timestamp-archive
	.timeline-timestamp-area-inverted
	.ranking-date-button {
	right: 100%;
}

#timeline-head {
	position: absolute;
	bottom: calc(var(--timeline-head-point-size) * -0.5);
	z-index: 9999;

	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;

	pointer-events: none;
}

#timeline-head-point {
	margin: 0 1em;

	width: calc(var(--timeline-head-point-size));
	height: calc(var(--timeline-head-point-size) * 1.65);

	border-style: solid;
	border-width: 6px;
	border-color: black;
	border-radius: calc(var(--timeline-head-point-size) * 0.5 + 6px);

	background-color: white;
}

#timeline-head-content {
	position: relative;
}

#timeline-head-content * {
	white-space: nowrap;
	font-family: Roboto-Regular;
}

#timeline-head-navigator {
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
}

.timeline-head-title {
	margin: 0 var(--timeline-head-title-margins);
	font-size: var(--timeline-head-titles-font-size-max);
}

.timeline-head-button-anchor {
	position: relative;

	display: flex;
	flex-direction: row;
	align-items: center;

	width: 0;
	height: 100%;
}

.timeline-head-button {
	position: absolute;

	display: flex;
	flex-direction: row;
	align-items: center;

	color: var(--ranking-title-minor-color-idle);

	white-space: nowrap;

	pointer-events: initial;
	cursor: pointer;

	transition-property: color;
	transition-duration: 200ms;
}

.timeline-head-button:hover {
	color: var(--ranking-title-minor-color-hover);
}

.timeline-head-button:active {
	color: var(--ranking-title-minor-color-active);
}

.timeline-head-button-previous {
	text-align: right;
	right: 0;
}

.timeline-head-button-next {
	text-align: left;
	left: 0;
}

.timeline-head-button-label {
	font-size: var(--timeline-head-titles-font-size-min);
}

.timeline-head-button .icon {
	transition-property: opacity;
	transition-duration: 50ms;
}

.timeline-head-button-previous .icon {
	margin-left: 0.35em;
}

.timeline-head-button-next .icon {
	margin-right: 0.35em;
}

#titles-slider {
	position: absolute;
	left: 0;
	top: 0;

	display: flex;
	align-items: center;
	flex-direction: row;

	height: 100%;

	white-space: nowrap;
}

/* Scrollbar hidden */
#timeline-viewport::-webkit-scrollbar {
	height: var(--timeline-scrollbar-width);
	opacity: 0;
}

/* Scrollbar height */
#timeline-viewport.viewport-scrollable::-webkit-scrollbar {
	opacity: 1;
}

/* Scrollbar track */
#timeline-viewport.viewport-scrollable::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0%);
}

/* Scrollbar handle */
#timeline-viewport.viewport-scrollable::-webkit-scrollbar-thumb {
	border-radius: calc(var(--timeline-scrollbar-width) / 2);
	background-color: var(--timeline-scrollbar-background);
	transition: background-color 250ms;
}

/* Scrollbar handle on hover */
#timeline-viewport.viewport-scrollable::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 30%);
}

/* Scrollbar handle on active */
#timeline-viewport.viewport-scrollable::-webkit-scrollbar-thumb:active {
	background-color: rgba(255, 255, 255, 45%);
}

.rankings-ribbon {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	margin: 0.66em 0 0.44em 0;

	font-size: 1.85em;

	user-select: none;
}

.period-selector {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.period-selector-title-area {
	z-index: 1;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding-inline: 0.5em;

	width: 100%;

	font-family: Roboto-Medium;

	cursor: pointer;
}

.period-selector-title-area p {
	margin: 0;
	margin-right: 0.35em;
}

.period-selector-overlay {
	position: absolute;
	z-index: 2;

	width: 100%;
	height: 130%;
}

.period-selector-highlight {
	background-color: hsla(0, 0%, 100%, 0%);

	pointer-events: none;

	transition-property: color;
	transition-duration: 200ms;
}

.period-selector-closer {
	cursor: pointer;
}

.period-selector-title-area:hover + .period-selector-highlight {
	background-color: hsla(0, 0%, 100%, 15%);
}

.period-selector-combobox {
	position: absolute;
	bottom: -0.25em;

	display: flex;
	flex-direction: column-reverse;
	align-items: center;

	margin: 0;
	padding-block: 0;
	padding-inline: 0;
	width: max-content;

	background-size: 650% 100%;
	background-position: 20% 0;
	background-image: linear-gradient(
			0deg,
			hsla(0deg, 0%, 0%, 65%) 0%,
			hsla(0deg, 0%, 0%, 65%) 100%
		),
		linear-gradient(
			0deg,
			hsla(0deg, 0%, 100%, 15%) 0%,
			hsla(0deg, 0%, 100%, 15%) 100%
		),
		linear-gradient(
			75deg,
			var(--ranking-menu-color-1) 0%,
			var(--ranking-menu-color-2) calc(100% / 7 * 1),
			var(--ranking-menu-color-3) calc(100% / 7 * 2),
			var(--ranking-menu-color-4) calc(100% / 7 * 3),
			var(--ranking-menu-color-5) calc(100% / 7 * 4),
			var(--ranking-menu-color-6) calc(100% / 7 * 5),
			var(--ranking-menu-color-7) calc(100% / 7 * 6),
			var(--ranking-menu-color-1) 100%
		);

	box-shadow: 0 0 8px 2px hsla(0, 0%, 0%, 35%);
}

.period-selector-combobox li {
	position: relative;
	width: 100%;
	list-style-type: none;

	text-align: left;
}

.period-selector-combobox li span {
	margin: 0.5em;
}

.period-selector-combobox li:first-child {
	height: 1.85em;
	background-color: hsla(0deg, 0%, 100%, 17%);

	width: 100%;
	padding-inline: 0;
}

.period-selector-combobox li:not(:first-child) {
	padding-block: 0.4em;

	font-family: Roboto-Regular;
	font-size: 0.92em;

	cursor: pointer;

	transition-property: background-color;
	transition-duration: 200ms;
}

.period-selector-combobox li:not(:first-child)::after {
	content: "";

	position: absolute;
	left: 0.35em;
	right: 0.35em;
	bottom: 0;

	height: 1px;

	background-color: hsla(0deg, 0%, 100%, 45%);
}

.period-selector-combobox li:not(:first-child):hover {
	background-color: hsla(0deg, 0%, 100%, 12%);
}

.period-selector-combobox li:not(:first-child):active {
	background-color: hsla(0deg, 0%, 100%, 25%);
}

.period-list-anchor {
	position: relative;

	display: flex;
	align-items: center;

	width: 0;
	margin-inline: 0.35em;
}

.period-list {
	position: absolute;

	display: flex;
	align-items: center;

	gap: var(--ranking-ribbon-gap);

	font-family: Roboto-Regular;
	font-size: 0.72em;
}

.period-list-anchor-previous .period-list {
	flex-direction: row-reverse;
	right: 0;
}

.period-list-anchor-next .period-list {
	flex-direction: row;
	left: 0;
}

.ribbon-date-button {
	display: flex;
	gap: var(--ranking-ribbon-gap);
	align-items: center;

	color: var(--ranking-title-minor-color-idle);
}

.ribbon-date-button.ribbon-season-date-button {
	font-size: 0.9em;
}

.period-list-anchor-previous .ribbon-date-button {
	flex-direction: row-reverse;
}

.period-list-anchor-next .ribbon-date-button {
	flex-direction: row;
}

.ranking-date-button-body {
	display: flex;
	flex-direction: column;
}

.period-list-anchor-previous .ranking-date-button-body {
	align-items: flex-end;
}

.period-list-anchor-next .ranking-date-button-body {
	align-items: flex-start;
}

.ribbon-date-button .ribbon-date-button-label {
	margin: 0;
}

.ribbon-date-button .ribbon-date-button-label-year {
	opacity: 80%;
	font-size: 0.85em;
}

.ribbon-date-button:hover {
	color: var(--ranking-title-minor-color-hover);
}

.ribbon-date-button:active {
	color: var(--ranking-title-minor-color-active);
}

#ranking-tabs-container {
	z-index: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;

	background-color: hsla(0deg, 0%, 0%, 30%);

	user-select: none;
}

#ranking-tabs-container .ranking-tab {
	display: flex;
	justify-content: center;
	align-items: center;

	height: 100%;
	border: none;
	margin: 0;

	padding-inline: 1.5em;

	color: hsla(0deg, 0%, 100%, 65%);

	background-color: hsla(0deg, 0%, 100%, 0%);

	cursor: pointer;

	transform: skew(-15deg);
}

#ranking-tabs-container .ranking-tab:hover {
	color: hsla(0deg, 0%, 100%, 85%);
	background-color: hsla(0deg, 0%, 100%, 6%);
}

#ranking-tabs-container .ranking-tab:active,
#ranking-tabs-container .ranking-tab-selected,
#ranking-tabs-container .ranking-tab-selected:hover {
	color: hsla(0deg, 0%, 100%, 100%);
	background-color: hsla(0deg, 0%, 100%, 12%);
}

#ranking-tabs-container .ranking-tab span {
	padding-block: 0.5em;

	font-size: 1.65em;
	font-family: Roboto-Medium;

	transform: skew(15deg);
}

.ranking-empty-panel {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;

	align-items: center;
	justify-content: center;
	flex-direction: column;

	padding-bottom: 3em;

	width: 100%;
	height: 100%;

	font-family: Roboto-Medium;
	font-size: 2em;
}

.ranking-empty-panel .icon {
	font-size: 1.5em;
	color: hsla(0deg, 0%, 100%, 45%);
}

.ranking-empty-panel p {
	margin: 0;
	color: hsla(0deg, 0%, 100%, 60%);
}

/** OVERLAYS */

#ranking-travel-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: -500;

	width: 85%;
	height: 100%;

	margin-block: 5em;

	opacity: 0.12;

	background-image: url("../../assets/images/sprites/ranking_transition_background.png");
	background-size: cover;

	-webkit-mask: linear-gradient(
		90deg,
		transparent 0%,
		white 8%,
		white 92%,
		transparent 100%
	);
}

.debug-div {
	position: absolute;
	width: 20px;
	height: 20px;

	background-color: red;
}

@keyframes character-spawn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}