:root {
	--user-font-scale: 1rem - 1rem;
	--max-width: calc(100% - 1rem);

	scrollbar-width: thin;
	text-rendering: optimizespeed;
}

body {
	--header-height: 4rem;

	background: var(--theme-bg);
	color: var(--theme-text);
	display: flex !important;
	flex-direction: column;
	font-family: var(--font-body);
	font-size: clamp(0.875rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
	margin: 0;
	max-width: 100vw;
	min-height: 100vh;
	padding: 0;
}

a,
a:visited {
	color: var(--theme-text-accent);
	font-weight: 400;
	text-decoration: none;
	text-underline-offset: 0.08em;
	transition: color 0.1s ease-out;
}

a:active,
a:focus,
a:hover {
	color: var(--theme-text-accent-dark);
	text-decoration: underline;
}

a[hx-post] {
	cursor: pointer;
	user-select: none;
}

h1>a,
h1>a:visited {
	color: var(--theme-text);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.1s ease-out;
}

h1>a:active,
h1>a:focus,
h1>a:hover {
	color: var(--theme-text-40);
	text-decoration: none;
}

.authorized,
:root.authenticated .anonymous {
	display: none;
}

:root.authenticated .authorized {
	display: initial;
}

nav ul {
	list-style: none;
	padding: 0;
}

.login-trigger {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	position: relative;
}

.login-panel {
	display: none;
}

.login-panel>form {
	margin: 0;
	padding: 0.5em;
}

.login-panel>form>:not(:last-child) {
	margin-block-end: 0.5em;
}

.login-trigger:focus-within .login-panel {
	background-color: var(--theme-bg);
	border: 0.0625rem solid var(--theme-text);
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	top: 0;
}

main > :not(article) {
	margin: 1em;
}

input.tab-trigger {
	display: none;
}

input.tab-trigger+label {
	background-color: var(--theme-bg-accent);
	display: inline-flex;
	padding: 0.5rem 1.5rem;
}

input.tab-trigger+label>svg.material {
	margin-right: 0.5em;
	min-width: calc(min(1.5em, 24px));
}

input.tab-trigger:checked+label {
	background-color: var(--theme-bg-accent-hover);
}

article.tab-content {
	border-top: 0.0625rem solid var(--theme-bg-accent-hover);
	display: none;
	padding: 1em;
	padding-bottom: 0;
}

input.tab-trigger#tab-browse:checked~article.tab-content#tab-browse-content,
input.tab-trigger#tab-manifests:checked~article.tab-content#tab-manifests-content {
	display: block;
}

.list > *:not(:last-child) {
	margin-block-end: 1em;
}

svg.material {
	fill: currentColor;
	min-width: calc(min(1.5em, 24px));
}

svg.material {
	fill: currentColor;
	max-height: calc(min(1.5em, 24px));
	max-width: calc(min(1.5em, 24px));
}

svg.material.button {
	cursor: pointer;
}

.not-implemented {
	display: none;
}

[data-type=Directory] .only-file,
[data-type=File] .only-directory {
	visibility: hidden;
}

td.actions {
	display: flex;
	justify-content: space-evenly;
}

article[data-tab="browse"]>table {
	width: 100%;
}

article[data-tab="browse"]>table>thead {
	background-color: color-mix(in srgb, var(--theme-bg-accent), #fff 12.5%);
}

tr[data-type=Directory] input.browse-node-trigger:checked+label>.name::after {
	content: '/';
	margin: 0 0.25em;
}

article[data-tab="browse"]>table>tbody>tr>th {
	font-family: monospace;
}

tr[data-parent-collapsed] {
	display: none;
}

tr>th>label>.name::before {
	content: '├─ ';
}

tr[data-last-child]>th>label>.name::before {
	content: '└─ ';
}

th>label {
	display: block;
}

td.checksum:not([data-checksum]),
td.size:not([data-size]) {
	color: color-mix(in srgb, var(--theme-text), #000 50%);
	text-align: center;
}

td.size {
	text-align: right;
}

tbody>tr>th {
	text-align: left;
}

tbody>tr>* {
	padding: 0 0.5em;
}

tbody>tr {
	background-color: color-mix(in srgb, var(--theme-bg-accent), #000 25%);
}

tbody>tr:nth-child(2n of :not([data-parent-collapsed])) {
	background-color: var(--theme-bg-accent);
}

input.browse-node-trigger {
	display: none;
}

section.manifest>.entries {
	--entries-border: solid color-mix(in srgb, var(--theme-text), #000 33%);
	border-bottom: 0.0625rem var(--entries-border);
	border-top: 0.125rem var(--entries-border);
	max-height: calc((100vh - (10.1875rem + 0.25rem + 2.25rem * 2)) / 2);
	overflow: scroll;
}

section.manifest:not(:last-child) {
	padding-bottom: 0.25rem;
}

section.manifest>h2 {
	margin-top: 0;
	margin-bottom: 0.25rem;
}

article.manifest-entry {
	background-color: color-mix(in srgb, var(--theme-bg-accent), #000 25%);
	display: grid;
	grid-template-columns: 1fr 0.25fr minmax(12rem, 0.1fr);
	padding: 0.5rem 1rem;
}

article.manifest-entry:nth-child(2n) {
	background-color: var(--theme-bg-accent);
}

article.manifest-entry>* {
	position: relative;
}

article.manifest-entry>* {
	font-size: 1rem;
	margin: 0;
	margin-top: 0.5em;
}

article.manifest-entry>:not(:last-child) {
	margin-right: 1rem;
}

article.manifest-entry [class*='entry-']::before {
	color: var(--theme-text-accent);
	font-size: 0.8em;
	font-weight: normal;
	position: absolute;
	top: -1.2em;
}

article.manifest-entry .entry-name::before {
	content: 'Path';
}

article.manifest-entry>.entry-checksum::before {
	content: 'Checksum';
}

article.manifest-entry>.entry-size::before {
	content: 'Size';
}

/* Form/Input Styling */

form span {
	/* debugging */
	/*border: 1px solid #bbb;*/
	display: block;
	position: relative;
	margin-top: 1.5em;
}

form span.field {
	margin-top: 0.5em;
}

form span:first-of-type,
form span.field:first-of-type {
	margin-top: initial;
}

form span.field {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / 3;
}

form span.field > label {
	display: inline-flex;
	justify-content: end;
	align-items: center;
}

form span.field > label+* {
	text-align: start;
}

form span.field > label+input[type=checkbox] {
	width: min-content;
}

fieldset {
	padding: 0 0.5em 0.5em;
}

form span.field > fieldset {
	grid-column: 1 / 3;
}

form span > input {
	border-width: 0;
	border-bottom-width: 0.0625em;
}

form span > input:invalid {
	border-color: var(--theme-accent-error, color-mix(in srgb, red, #777 25%));
}

form span > input:invalid+label {
	border-color: var(--theme-accent-error, color-mix(in srgb, red, #777 25%));
}

form span.expand > * {
	width: 100%;
}

form  span > input:not([type=checkbox]) {
	padding: 0.5em;
}

form  span > input:not([type=checkbox])+label {
	left: 0.5em;
	position: absolute;
	top: 1.75em;
	transform-origin: 0 0;
	transition: transform ease-in-out 0.2s;
}

input:not(:placeholder-shown)+label,
input[placeholder]:not([placeholder=""])+label,
input:focus+label
{
	transform: translateY(-1.65em) scale(0.8);
}
/* BSC Header Styling */
header {
	background: linear-gradient( to right, var(--bsc-dark), var(--bsc-navy) );
	border-bottom: 2px solid var(--bsc-gold);
	padding: 10px 20px;
}

	header h1 a {
		color: var(--bsc-gold);
		text-decoration: none;
		font-weight: bold;
	}

/* BSC Navigation */
nav ul {
	list-style: none;
	display: flex;
	gap: 20px;
}

nav a {
	color: var(--bsc-gold) !important;
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s;
}

	nav a:hover {
		color: #ffffff !important;
	}

/* BSC Leaderboard Table */
table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bsc-navy);
	border: 1px solid var(--bsc-gold);
}

th {
	background: var(--bsc-blue);
	color: var(--bsc-gold);
	padding: 12px;
	text-align: left;
	border-bottom: 2px solid var(--bsc-gold);
}

td {
	padding: 10px 12px;
	border-bottom: 1px solid #2a3a6b;
	color: #ffffff;
}

tr:hover {
	background: rgba(200, 160, 32, 0.1);
}

/* BSC Footer */
footer {
	background: var(--bsc-dark);
	border-top: 2px solid var(--bsc-gold);
	color: var(--bsc-gold);
	padding: 15px;
	text-align: center;
}

/* BSC Buttons */
.btn-primary {
	background: var(--bsc-gold) !important;
	border-color: var(--bsc-gold) !important;
	color: var(--bsc-dark) !important;
	font-weight: bold;
}

	.btn-primary:hover {
		background: #E8C84A !important;
	}

/* BSC Leaderboard Layout */
article.page.list {
	max-width: 800px;
	margin: 20px auto;
	padding: 0 20px;
}

	article.page.list h2 {
		text-align: center;
		color: #C8A020;
		border-bottom: 2px solid #C8A020;
		padding-bottom: 10px;
	}

/* Player Card Styling */
article.player.card {
	display: flex;
	background: #162040;
	border: 1px solid #C8A020;
	border-radius: 4px;
	margin-bottom: 10px;
	overflow: hidden;
}

/* Rank Column */
section.column.rank {
	background: #1B2A6B;
	color: #C8A020;
	font-size: 1.5rem;
	font-weight: bold;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-right: 2px solid #C8A020;
}

/* Avatar */
img.avatar {
	width: 80px !important;
	height: 80px !important;
	image-rendering: pixelated;
}

/* Stats */
section.column.body {
	padding: 10px 15px;
	flex: 1;
}

	section.column.body h3 {
		color: #C8A020;
		margin: 0 0 8px 0;
	}
/* Fix rank bar taking full width */
article.player.card {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
}

section.column.rank {
	min-width: 60px !important;
	max-width: 60px !important;
	width: 60px !important;
	align-self: stretch !important;
}

/* Fix body section layout */
section.column.body {
	display: flex !important;
	flex-direction: column !important;
	padding: 10px 15px !important;
	flex: 1 !important;
}

	/* Fix row inside body */
	section.column.body section.row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 15px !important;
	}

		/* Fix stats layout */
		section.column.body section.row
		section.column {
			display: flex !important;
			flex-direction: column !important;
			gap: 4px !important;
		}

			section.column.body section.row
			section.column span {
				display: block !important;
				color: #cccccc !important;
				font-size: 0.9rem !important;
			}
/* Fix Header - Logo Center, Nav Right */
header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 10px 20px !important;
	position: relative !important;
}

	header h1 {
		position: absolute !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		margin: 0 !important;
	}

	header nav {
		margin-left: auto !important;
	}

		/* Fix Nav items to top right */
		header nav ul {
			display: flex !important;
			flex-direction: row !important;
			align-items: center !important;
			gap: 15px !important;
			list-style: none !important;
			margin: 0 !important;
			padding: 0 !important;
		}
/* Fix card to be proper row layout */
article.player.card {
	display: grid !important;
	grid-template-columns: 60px 1fr !important;
	border: 1px solid #C8A020 !important;
	background: #162040 !important;
	margin-bottom: 10px !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	min-height: 100px !important;
}

/* Name above avatar/stats row */
section.column.body {
	display: flex !important;
	flex-direction: column !important;
	padding: 10px 15px !important;
}

	section.column.body h3 {
		color: #C8A020 !important;
		margin: 0 0 8px 0 !important;
		font-size: 1.1rem !important;
	}

	section.column.body > section.row {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 15px !important;
	}

		/* Stats vertical layout */
		section.column.body > section.row > section.column {
			display: flex !important;
			flex-direction: column !important;
			gap: 3px !important;
			justify-content: center !important;
		}

			section.column.body > section.row > section.column > span {
				display: block !important;
				color: #cccccc !important;
				font-size: 0.85rem !important;
				line-height: 1.4 !important;
			}
/* Complete Player Card Fix */
article.player.card {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	border: 1px solid #C8A020 !important;
	background: #162040 !important;
	margin-bottom: 10px !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	min-height: 100px !important;
	width: 100% !important;
}

section.column.rank {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #1B2A6B !important;
	border-right: 2px solid #C8A020 !important;
	min-width: 60px !important;
	max-width: 60px !important;
	color: #C8A020 !important;
	font-size: 1.5rem !important;
	font-weight: bold !important;
	padding: 10px !important;
	flex-shrink: 0 !important;
}

section.column.body {
	display: flex !important;
	flex-direction: column !important;
	padding: 10px 15px !important;
	flex: 1 !important;
	min-width: 0 !important;
}

	section.column.body h3 {
		color: #C8A020 !important;
		margin: 0 0 8px 0 !important;
	}

	section.column.body > section.row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 15px !important;
	}

		section.column.body > section.row img.avatar {
			width: 80px !important;
			height: 80px !important;
			image-rendering: pixelated !important;
			border: 2px solid #C8A020 !important;
		}

		section.column.body > section.row > section.column {
			display: flex !important;
			flex-direction: column !important;
			gap: 4px !important;
		}

			section.column.body > section.row > section.column span {
				display: block !important;
				color: #cccccc !important;
				font-size: 0.85rem !important;
			}
/* Fix stats to stack vertically */
span.column {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	justify-content: center !important;
}

	span.column span.row {
		display: block !important;
		color: #cccccc !important;
		font-size: 0.85rem !important;
		white-space: nowrap !important;
	}

/* Hide the material icon */
svg.material {
	display: none !important;
}

/* Bigger avatar */
span.avatar-container {
	flex-shrink: 0 !important;
}

	span.avatar-container img.avatar {
		width: 80px !important;
		height: 80px !important;
		image-rendering: pixelated !important;
		display: block !important;
	}

/* NAVBAR */
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 30px;
	border-bottom: 2px solid var(--bsc-gold);
}

nav {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

	nav ul {
		list-style: none;
		display: flex;
		gap: 20px;
		padding: 0;
		margin: 0;
	}

	nav a {
		color: var(--bsc-gold);
		text-decoration: none;
		font-weight: 600;
		transition: 0.2s;
	}

		nav a:hover {
			color: white;
		}

.page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
}

	.page h1 {
		margin-bottom: 10px;
	}
	.page h2,
	.page h3 {
		color: white;
	}

	.page > p {
		margin-bottom: 20px;
		color: #cfd6e6;
	}
	.page li {
		color: #d7dbe8;
		line-height: 1.6;
	}

.card {
	background: var(--bsc-navy);
	border: 1px solid var(--bsc-gold);
	border-radius: 8px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

	.card h2,
	.card h3 {
		margin-top: 0;
		color: var(--bsc-gold);
	}

.page ul,
.page ol {
	padding-left: 22px;
}

.leaderboard-tabs {
	max-width: 1100px;
	margin: 0 auto 18px auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

	.leaderboard-tabs a {
		display: inline-block;
		padding: 8px 14px;
		border: 1px solid var(--bsc-gold);
		border-radius: 6px;
		background: var(--bsc-navy);
		color: var(--bsc-gold);
		text-decoration: none;
		font-weight: 600;
		transition: 0.2s ease;
	}

		.leaderboard-tabs a:hover {
			color: white;
			border-color: white;
		}

		.leaderboard-tabs a.active {
			background: var(--bsc-gold);
			color: var(--bsc-dark);
			box-shadow: 0 0 10px rgba(200, 160, 32, 0.45);
			border-color: #ffd54a;
		}

main {
	min-height: calc(100vh - 180px);
}

footer {
	margin-top: 40px;
}

.hero {
	max-width: 1100px;
	margin: 0 auto 30px auto;
	padding: 30px 24px;
	text-align: center;
}

	.hero h1 {
		margin-bottom: 10px;
		color: var(--bsc-gold);
		font-size: 2.4rem;
	}

	.hero p {
		max-width: 800px;
		margin: 0 auto 20px auto;
		color: #d7dbe8;
		font-size: 1.05rem;
	}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

	.hero-actions a {
		display: inline-block;
		padding: 10px 18px;
		border: 1px solid var(--bsc-gold);
		border-radius: 6px;
		background: var(--bsc-navy);
		color: var(--bsc-gold);
		text-decoration: none;
		font-weight: 700;
	}

		.hero-actions a:hover {
			color: white;
			border-color: white;
		}

.exp-bar {
	width: 100%;
	height: 6px;
	background: #0d1117;
	border: 1px solid var(--bsc-gold);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 4px;
}

.exp-fill {
	height: 100%;
	background: linear-gradient(90deg, #C8A020, #ffd54a);
	transition: width 0.3s ease;
}
.player.card {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

	.player.card:hover {
		transform: translateY(-2px);
		box-shadow: 0 0 14px rgba(200, 160, 32, 0.25);
		border-color: #ffd54a;
	}

.guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 24px;
}

.guide-card {
	display: block;
	background: var(--bsc-navy);
	border: 1px solid var(--bsc-gold);
	border-radius: 8px;
	padding: 20px;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

	.guide-card h2 {
		margin-top: 0;
		color: var(--bsc-gold);
	}

	.guide-card p {
		color: #d7dbe8;
		margin-bottom: 0;
	}

	.guide-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 0 16px rgba(200, 160, 32, 0.35);
		border-color: #ffd54a;
	}
.site-header {
	position: relative;
	padding-top: 34px;
	padding-bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid var(--bsc-gold);
}

.site-logo-wrap {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -60%);
	margin: 0;
	z-index: 20;
}

.site-logo {
	display: block;
	height: 80px;
	width: auto;
	filter: drop-shadow(0 0 8px rgba(200, 160, 32, 0.65));
}
.page .card {
	margin-top: 20px;
}

	.page .card:first-of-type {
		margin-top: 10px;
	}
.back-link {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--bsc-gold);
	text-decoration: none;
}

	.back-link:hover {
		text-decoration: underline;
	}
.download-hero {
	text-align: left;
}
	.download-hero strong {
		color: var(--bsc-gold);
	}
	.download-hero .hero-actions {
		text-align: center;
		margin-top: 16px;
	}
.download-button {
	display: inline-block;
	font-size: 16px;
	margin-top: 10px;
	padding: 14px 26px;
	border: 1px solid var(--bsc-gold);
	border-radius: 8px;
	background: var(--bsc-gold);
	color: var(--bsc-dark);
	text-decoration: none;
	font-weight: 700;
	transition: 0.18s ease;
	box-shadow: 0 0 12px rgba(200, 160, 32, 0.35);
}

	.download-button:hover {
		background: #ffd54a;
		border-color: #ffd54a;
		color: #111;
	}

.download-note {
	text-align: center;
	font-size: 13px;
	color: #aab3c9;
	margin-top: 8px;
}
.bsc-download-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
	color: #fff;
}

.bsc-download-hero {
	text-align: center;
	margin-bottom: 2.5rem;
}

	.bsc-download-hero h1 {
		color: var(--bsc-gold);
		font-size: 3rem;
		margin-bottom: 1rem;
		line-height: 1.1;
	}

.bsc-download-subtext {
	max-width: 760px;
	margin: 0 auto 1.75rem;
	font-size: 1.15rem;
	color: #e6e6e6;
	line-height: 1.6;
}

.bsc-download-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.bsc-download-actions-small {
	margin-top: 1rem;
	margin-bottom: 0;
}

.bsc-btn {
	display: inline-block;
	padding: 0.85rem 1.35rem;
	border: 1px solid var(--bsc-gold);
	border-radius: 8px;
	background: var(--bsc-navy);
	color: var(--bsc-gold);
	text-decoration: none;
	font-weight: 700;
	transition: all 0.2s ease;
}

	.bsc-btn:hover {
		background: var(--bsc-gold);
		color: var(--bsc-dark);
		text-decoration: none;
	}

.bsc-btn-primary {
	background: var(--bsc-gold);
	color: var(--bsc-dark);
	box-shadow: 0 0 14px rgba(200, 160, 32, 0.25);
}

	.bsc-btn-primary:hover {
		filter: brightness(1.05);
	}

.bsc-download-version {
	margin-top: 0.75rem;
	color: #d8d8d8;
	font-size: 0.95rem;
}

	.bsc-download-version span {
		color: var(--bsc-gold);
		font-weight: 700;
	}

.bsc-download-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.bsc-download-card {
	background: var(--bsc-navy);
	border: 1px solid var(--bsc-gold);
	border-radius: 10px;
	padding: 1.5rem;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

	.bsc-download-card h2 {
		margin-top: 0;
		margin-bottom: 1rem;
		color: var(--bsc-gold);
		font-size: 1.45rem;
		border-bottom: 2px solid var(--bsc-gold);
		padding-bottom: 0.5rem;
		display: inline-block;
	}

	.bsc-download-card p,
	.bsc-download-card li {
		color: #f0f0f0;
		line-height: 1.65;
	}

	.bsc-download-card ul,
	.bsc-download-card ol {
		margin: 0;
		padding-left: 1.25rem;
	}

.bsc-download-beta-note,
.bsc-download-help {
	margin-top: 1.5rem;
}

@media (max-width: 800px) {
	.bsc-download-hero h1 {
		font-size: 2.2rem;
	}

	.bsc-download-subtext {
		font-size: 1rem;
	}

	.bsc-download-grid {
		grid-template-columns: 1fr;
	}

	.bsc-btn {
		width: 100%;
		max-width: 360px;
		text-align: center;
	}
}