@font-face {
    font-family: Nunito;
    src: url(Nunito-Regular.ttf);
}
@font-face {
    font-family: NotoSans;
    src: url(NotoSans.ttf);
}

body {
	/* font-family: 'Nunito'; */
	font-family: 'NotoSans';

	background-color: #1a1619;
	color: #ddd;
	margin: 0;
}

.main-header {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #100e10;
	border-bottom: 1px solid #c43a77;
}

.main-header > a {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none!important;
}

.header-bold {
	color: #c43a77;
}

a {
	color: rgb(125, 191, 221)
}
a:visited {
	color: rgb(63, 135, 202)
}

td {
	border-bottom: 1px solid #31282d;
}

th {
	/* border: 1px solid #111; */
	color: #706069;
	background-color: #161315;
}

tr {
	/* border-left: 1px solid #111;
	border-right: 1px solid #111; */
}

td, th {
	padding: 0px 5px 0px 5px;
	min-width: 50px;
	text-align: center;
}

table {
	border-collapse: collapse;
	table-layout:fixed;
}
.tables {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.tables > div > table {
	width: 100%;
}
.tables_profile > div {
	width: 18%;
	margin: 0px 1% 0px;
}
.empty_table {
    width: 100%;
	margin-top: 20px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}
.activity_container {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.activity_header {
	display: flex;
}
.activity_header h3 {
	text-align: center;
}
.activity {
	display: flex;
	justify-content: center;
}
.activity_scores,
.activity #year_activity_scores {
	width: 74%;
}
#month_active_players {
	overflow: hidden;
	width: 24%;
}
.scores_table_contents > table {
	width: 100%;
}
.scores_table_head {
	display: flex;
	justify-content: center;
	align-items: center;
}
.scores_table_head h2 {
	margin-bottom: 0;
}
.scores_table_comment {
	text-align: center;
	font-size: 90%;
    color: #d0c5cc;
}

.choice {
	margin-top: 15px;
	margin-left: 15px;
}
.completion_small {
	font-size: 70%;
}
.scanpercent {
	opacity: 0.5;
	font-size: 55%;
	color: #c5b3bd;
}

.center {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.clamp {
	white-space: nowrap;
	overflow: hidden;
	line-clamp: 1;
}
.clamp-date {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	line-height: 22px;
	height: 22px;
	justify-content: center;
}
.right-hide-date {
	padding-left: 5px;
}
.tables_completion td {
	padding: 0 3px 0;
	overflow: hidden;
}
.text-left {
	padding: 4px 0;
	text-align: left;
}
.text-right {
	padding: 2px 0;
	text-align: right;
}

.table_full {
	min-width: 1200px;
	width: 98%;
	margin: 0 1% 0;
}
.table_demi {
	min-width: 600px;
	width: 48%;
	margin: 0 1% 0;
}
.table_tier {
	min-width: 400px;
	width: 31.33%;
	margin: 0 1% 0;
}
.table_halftier {
	width: 14.33%;
	margin: 0 1% 0;
}
.table_quart {
	min-width: 300px;
	width: 23%;
	margin: 0 1% 0;
}

a {
	color: #d6bbca;
	text-decoration: none;
}

a:visited {
	color: #d6bbca;
}

a:hover {
	color: #e9e1e5;
	text-decoration: underline;
}

.table {
	background-color: #201a1d;
	position: relative;
}
.scores_table_contents {
	min-height: 1172px;
}
.scores_table_contents.small {
	min-height: 200px;
}

.percent-completion:hover {
	cursor: pointer;
}

[xtitle] {
	position: relative;
}

[xtitle]:after {
	content: attr(xtitle);
	color: #d6bbca;
	position: absolute;
	left: 75%;
	bottom: 100%;
	background-color: rgba(18,15,16,1);
	border: 1px solid #31282d;
	border-radius: 5px;
	padding: 3px;
	width: max-content;
	opacity: 0;
}

[xtitle]:hover:after {
	opacity: 1;
}

.sum_count_max {
	color: #813489;
}
.sum_count_perfect {
	color: #b17e47;
}
.sum_count_great {
	color: #3b973b;
}
.sum_count_good {
	color: #7272b5;
}
.sum_count_bad {
	color: #7f6363;
}
.sum_count_miss {
	color: #bf4747;
}

/* score */

#score {
	min-height: 100vh;
	display: flex;
    justify-content: center;
}

#score > .score {
	display: flex;
	flex-direction: column;

	max-width: 500px;
	margin-top: 15vh;
}

#score > .score .beatmap {
	display: flex;
	flex-direction: column;
}

#score > .score .beatmap .song {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#score > .score .beatmap .beatmap_info {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#score > .score .score_info {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#score > .score .score_info .score_metadata .score_results {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#score > .score .score_info .score_metadata .score_results .total_score {
	font-size: 250%;
}

#score > .score .score_info .score_metadata .score_results .acc {
	font-size: 150%;
}

#score > .score .score_info .score_metadata .player {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#score > .score .score_judges .judge_types,
#score > .score .score_judges .judge_counts {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#score > .score .score_judges .judge_types > div,
#score > .score .score_judges .judge_counts > div {
	text-align: center;
	width: calc(100%/6);
}

.options {
	display: flex;
	flex-direction: row;
	gap: 50px;
	align-items: center;
}

.sroptions {
	display: flex;
	gap: 30px;
    align-items: center;
}

.srwidget {
	display: flex;
	flex-direction: column;

	width: 400px;
}

.koptions {
	width: 100px;
	height: 50px;
}

.soptions select,
.ooptions select,
.koptions select {
	width: 100%;
	height: 50px;
	margin-top: 5px;

	color: white;
	background: #363034;
	border: 1px solid #fff;
	border-radius: 3px;

	cursor: pointer;
	text-align: center;
}

.updatesr {
	width: 100px;
	height: 50px;
}
.updatesr button {
	font-family: 'NotoSans';
	width: 100%;
	height: 100%;
	margin-top: 5px;

	color: white;
	background: #363034;
	border: 1px solid #fff;
	border-radius: 3px;

	cursor: pointer;
}
.updatesr button:hover {
	background: #3b3636;
}

.currentsr {
	display: flex;
	justify-content: space-between;

	margin-bottom: 10px;
}

.noUi-connect {
	background: #bfb4ba!important;
}

.noUI-connects {
	background: #363034!important;
}

.noUi-handle {
	background: #3b3636!important;
	cursor: pointer!important;
	box-shadow: inset 0 0 1px #8d8383, inset 0 1px 3px #ebebeb00, 0 1px 1px 0px #635a5a85!important;
}

.team_flag {
	width: 40px;
	height: 20px;
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: min(.25em, 6px);
    display: inline-block;
	margin-top: 3px;
    margin-bottom: -3px;
	margin-right: 3px;
}
.team_flag.empty {
	background: #332f32;
	margin-right: 7px;
}

.text-with-team {
    align-items: center;
    padding: 2px 0;
}

.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.team-tag {
	margin: 0 3px;
}

/* ============================================================
   Header (was previously inline-styled in head.php)
   ============================================================ */
.main-header {
	position: relative;
}
.main-header-brand {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none !important;
}
.brand-logo {
	max-height: 35px;
}
.brand-title-wrap {
	position: relative;
}
.brand-subtitle {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	font-size: 55%;
	white-space: nowrap;
}

.header-left {
	margin-right: auto;
	margin-left: 25px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-stats {
	position: absolute;
	bottom: 1px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 80%;
	color: #c43a77;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 10px;
}

.header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.header-username {
	display: flex;
	align-items: center;
	gap: 15px;
}
.header-avatar {
	width: 40px;
	height: 40px;
	border-radius: 5px;
}

.snipe-overlay-iframe {
	position: fixed;
	top: 60px;
	right: 0;
	width: 100vw;
	height: calc(100vh - 60px);
	border: none;
	z-index: 100;
	pointer-events: none;
}

/* ============================================================
   Burger menu (visible on mobile only, for index page)
   ============================================================ */
.burger-btn {
	display: none;
	width: 42px;
	height: 36px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: 1px solid #c43a77;
	border-radius: 4px;
	padding: 0;
	cursor: pointer;
	margin-right: 8px;
}
.burger-btn span {
	display: block;
	width: 22px;
	height: 2px;
	background: #d6bbca;
	border-radius: 2px;
}

.mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 150;
}
body.menu-open .mobile-overlay {
	display: block;
}

/* ============================================================
   Index layout (sidebar + content)
   ============================================================ */
.index-layout {
	display: flex;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

.sidebar {
	width: 180px;
	flex-shrink: 0;
	padding: 15px 10px;
	box-sizing: border-box;
	/* Stick to the top of the viewport while scrolling.
	   align-self prevents the sidebar from stretching to the flex parent's
	   height, which would defeat position: sticky. */
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #c43a77 transparent;
}
.sidebar::-webkit-scrollbar {
	width: 8px;
}
.sidebar::-webkit-scrollbar-track {
	background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
	background: #3b2530;
	border-radius: 4px;
	border: 1px solid #4a3540;
}
.sidebar::-webkit-scrollbar-thumb:hover {
	background: #c43a77;
}

.sidebar-section {
	margin-bottom: 25px;
}

.sidebar-section-title {
	font-size: 80%;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #c43a77;
	margin-bottom: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid #31282d;
}

.sidebar-mobile-nav {
	display: none;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #31282d;
}
.sidebar-mobile-nav a {
	padding: 6px 8px;
	border-radius: 4px;
}
.sidebar-mobile-nav a:hover {
	background: #2a2225;
	text-decoration: none;
}

.sidebar-categories ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sidebar-categories li {
	margin-bottom: 2px;
}
.sidebar-categories li a {
	display: block;
	padding: 8px 10px;
	border-radius: 4px;
	color: #d6bbca;
	text-decoration: none;
}
.sidebar-categories li a:hover {
	background: #2a2225;
	text-decoration: none;
}
.sidebar-categories li.active a {
	background: #3b2530;
	color: #fff;
	font-weight: bold;
}

/* Override the filter widgets so they stack nicely in the sidebar */
.sidebar .sroptions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}
.sidebar .srwidget {
	width: 100%;
	/* Inner horizontal padding so the noUiSlider handles (which stick out
	   ~11px beyond the bar at each end) don't overflow the sidebar. */
	padding: 0 13px;
	box-sizing: border-box;
}
.sidebar .updatesr {
	width: 100%;
	height: auto;
}
.sidebar .updatesr button {
	height: 36px;
	margin-top: 0;
}

/* Vertical key-mode picker (replaces the old <select>) */
.koptions-radio {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}
.key-option {
	font-family: 'NotoSans';
	display: block;
	width: 100%;
	padding: 8px 10px;
	text-align: center;
	color: #ddd;
	background: #363034;
	border: 1px solid #4a4044;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.key-option:hover {
	background: #44393e;
}
.key-option.active {
	background: #5a2b40;
	border-color: #c43a77;
	color: #fff;
	font-weight: bold;
}

.index-content {
	flex: 1;
	min-width: 0;
	padding: 0 10px;
	box-sizing: border-box;
}

.active-category-label {
	display: none; /* shown by default only on mobile (hidden header) */
	font-size: 110%;
	margin: 15px 0 5px;
	color: #c43a77;
	font-style: italic;
	text-align: center;
}

/* Top-10 by default with a "+" reveal button per leaderboard.
   The dyn_html scripts already return all 50 rows; everything beyond #10
   is hidden via CSS until the user toggles .expanded. */
.scores_table_contents tbody tr:nth-child(n+11) {
	display: none;
}
.scores_table.expanded .scores_table_contents tbody tr:nth-child(n+11) {
	display: table-row;
}

/* Class-based row visibility used by renderLeaderboardRows() in lib/dyn_html/utils.php.
   The gap (…) and player rows live past position 10, so the nth-child rules above hide
   them by default — these tr.lb-* rules override that with equal specificity + source
   order so the player row and gap stay visible in the collapsed view. */
.scores_table_contents tbody tr.lb-gap,
.scores_table_contents tbody tr.lb-player {
	display: table-row;
}
.scores_table.expanded .scores_table_contents tbody tr.lb-collapsed-only {
	display: none;
}
.scores_table_contents tbody tr.lb-gap td {
	text-align: center;
	color: rgba(255, 255, 255, 0.35);
	padding: 2px 0;
	letter-spacing: 4px;
	border-top: 1px dashed rgba(255, 255, 255, 0.08);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.scores_table_contents tbody tr.lb-self {
	background-color: rgba(196, 58, 119, 0.14);
}
.scores_table_contents tbody td:first-child {
	white-space: nowrap;
}

.lb-expand-btn {
	display: block;
	width: 100%;
	margin-top: 0;
	padding: 6px 0;
	background: #1a1517;
	border: none;
	border-top: 1px solid #31282d;
	color: #c43a77;
	font-size: 130%;
	line-height: 1;
	cursor: pointer;
	font-family: 'NotoSans';
}
.lb-expand-btn::before {
	content: "+";
}
.scores_table.expanded .lb-expand-btn::before {
	content: "−";
}
.lb-expand-btn:hover {
	background: #251a1e;
	color: #e9b8cd;
}
.scores_table_contents:has(.empty_table) .lb-expand-btn {
	display: none;
}

/* Collapsed cards no longer need 1172px placeholder height. */
.scores_table_contents {
	min-height: 320px;
}
.scores_table.expanded .scores_table_contents {
	min-height: 0;
}

/* Graph pages (history.php, history_per_maps.php) — fill the content area. */
.graph-pane {
	width: 100%;
	height: calc(100vh - 80px);
	min-height: 400px;
}

.lb-subcategory {
	margin-top: 25px;
}
.lb-subcategory-title {
	margin: 0 0 10px;
	padding: 6px 12px;
	background: #1f191c;
	border-left: 3px solid #c43a77;
	font-size: 100%;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #d6bbca;
}

/* ============================================================
   Activity area (was previously inline-styled in index.php)
   ============================================================ */
.activity-scores-pane {
	height: 300px;
	width: 50%;
	margin: 20px;
	position: relative;
}
.activity-scores-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #1a1619 0%, transparent 17%);
	pointer-events: none;
}
.activity-scores-label {
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translateY(-80%);
	font-size: 95%;
	color: #c43a77;
	font-style: italic;
}
.activity-scores-iframe {
	border: none;
	min-width: 365px;
	height: 100%;
	width: 99%;
}
.activity-players-pane {
	width: 23%;
	margin-right: 2%;
	overflow: hidden;
}
.activity-players-title {
	text-align: center;
	margin: 5px 0;
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */

/* Tablet — collapse heavy desktop widths */
@media (max-width: 1100px) {
	.table_full   { min-width: 0; width: 98%; }
	.table_demi   { min-width: 0; width: 48%; }
	.table_tier   { min-width: 0; width: 31.33%; }
	.table_quart  { min-width: 0; width: 48%; }

	.activity-scores-pane { width: 60%; margin: 15px; }
	.activity-players-pane { width: 36%; margin-right: 2%; }
	.activity .activity-players-pane:nth-of-type(3) {
		display: none; /* keep just one side-pane on tablets */
	}

	.sidebar { width: 160px; }
}

/* Mobile — burger menu + drawer + single column */
@media (max-width: 768px) {
	.burger-btn {
		display: flex;
	}

	.main-header {
		flex-wrap: wrap;
		padding: 8px;
		gap: 8px;
	}
	.brand-subtitle {
		display: none;
	}
	.header-left {
		display: none; /* moved to drawer */
	}
	.header-stats {
		position: static;
		transform: none;
		left: auto;
		bottom: auto;
		flex-basis: 100%;
		justify-content: center;
		order: 99;
		font-size: 75%;
	}
	.header-right .header-devs,
	.header-right .header-sep {
		display: none;
	}
	.header-right {
		margin-left: auto;
	}
	.header-username {
		display: none; /* moved to drawer */
	}

	/* Index layout becomes a single column on mobile; sidebar becomes a drawer */
	.index-layout {
		display: block;
	}
	.sidebar {
		position: fixed;
		top: 0;
		left: -320px;
		width: 280px;
		max-width: 85vw;
		height: 100vh;
		overflow-y: auto;
		background: #100e10;
		border-right: 1px solid #c43a77;
		z-index: 200;
		transition: left 0.25s ease;
		padding: 15px;
	}
	body.menu-open .sidebar {
		left: 0;
	}
	.sidebar-mobile-nav {
		display: flex;
	}

	.index-content {
		padding: 0 5px;
	}
	.active-category-label {
		display: block;
	}

	/* Activity area stacks vertically */
	.activity {
		flex-direction: column;
		align-items: stretch;
	}
	.activity-scores-pane {
		width: auto;
		margin: 10px;
	}
	.activity-players-pane {
		width: auto;
		margin: 10px;
	}
	.activity .activity-players-pane:nth-of-type(3) {
		display: block; /* show all panes again, just stacked */
	}

	/* Leaderboard cards full-width */
	.table_full,
	.table_demi,
	.table_tier,
	.table_quart {
		min-width: 0;
		width: 100%;
		margin: 0 0 12px;
	}
	.tables {
		flex-direction: column;
	}
	.scores_table_contents {
		min-height: 0;
	}

	/* Header iframe overlay shouldn't cover useful content on mobile */
	.snipe-overlay-iframe {
		display: none;
	}

	/* Tighten cell padding on narrow screens */
	td, th {
		min-width: 0;
		padding: 0 3px;
		font-size: 90%;
	}
}

/* Very small screens — extra trimming */
@media (max-width: 420px) {
	.brand-title-wrap {
		font-size: 90%;
	}
	.header-stats {
		font-size: 70%;
		flex-direction: column;
		gap: 2px;
	}
	td, th {
		font-size: 85%;
	}
}