@font-face{
	font-family:"Remilia-Mono"; 
	src:url("assets/fonts/Remilia-Mono-Regular.woff2") format("woff2");
	font-weight:400;
	font-style:normal;
	font-display:swap;
	ascent-override:92.822266%;
	descent-override:23.583984%;
	line-gap-override:0%
}

@font-face {
  font-family: "Remilia-Mincho";
  src: url("assets/fonts/RemiliaMincho-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2010, U+2013-2016, U+2018-201A, U+201C-201E, U+2020-2022, U+2025-2026, U+2030, U+2032-2033, U+2039-203C, U+203E-203F, U+2042, U+2044, U+2047-2049, U+2051, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

html {
	background: linear-gradient(to bottom, #fffdf7 50%, whitesmoke);
	font-family: monospace;
	color: #2c3382;
	height: 100%;
	width: 100%;
	display:flex;
	flex-direction: column;
	user-select: none;
	overflow: hidden;
}

body {
	margin: 0;
	height: 100%;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	filter: url(#duotone);
}

.pointer {
	cursor: pointer;
}

.shaders {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.header {
	display: flex;
	justify-content: space-between;
}

.title {
	margin: 0;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	filter: url(#boil);
}

.logo-wrapper, .logo {
	position: relative;
	height: 42px;
	aspect-ratio: 1/1;
}

.logo-wrapper::before {
	content: "";
	position: absolute;
	height: 42px;
	aspect-ratio: 1/1;
	mask: url("./assets/logo-mask.png") center/contain no-repeat;
	background: #ffff01;
	pointer-events: none;
}

.title h1 {
	font-size: 1.85rem;
	font-family: "Remilia-Mincho";
}

a {
	font-family: "Remilia-Mono";
	text-decoration: none;
	color: #2c3382;
}

a:hover {
	color: #606060;
}

.content {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: 15% auto 15%;
	margin: 0 auto auto auto;
}

.filters {
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.user-search {
	display: none;
}

.user-search label {
	font-size: 2rem;
	color: #2c3382;
}

.user-search input, .user-search input:focus {
	border-color: transparent;
	font-family: "Remilia-Mono";
	color: #2c3382;
	outline: 0;
}

.user-search-zone {
	position: relative;
}

.user-search-zone::before {
  content: "";
  position: absolute;
  inset: 0;
	border-bottom: 1px solid #2c3382;
  filter: url(#boil);
  pointer-events: none;
}

#user-search-message {
	display: none;
	font-size: 1rem;
	font-family: 'Remilia-Mincho';
	text-align: center;
	padding: 0.5rem 0;
}

.toggle-filter {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}

.toggle-filter label input {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  margin: 0;
  font: inherit;
  color: #2c3382;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid #2c3382;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.toggle-filter label {
	display: flex;
	gap: 4px;
  cursor: pointer;
}

.toggle-filter label input[type="checkbox"]::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	transform: scale(0);
	box-shadow: inset 1em 1em #2c3382;
}

.toggle-filter label input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.stats-frame {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stats-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #2c3382;
  filter: url(#boil);
  pointer-events: none;
  z-index: 11;
}

.stats-table {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

table, th {
	background: #fffdf7;
	text-align: left;
}

th {
	border: 2px solid #2c3382;
	border-left: none;
	border-collapse: separate;
	position: sticky;
	top: 0;
	font-size: 1.05rem;
	background: whitesmoke;
	z-index: 10;
	padding: 0.85rem;
}

th::before {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 2px solid #2c3382;
  border-bottom: 2px solid #2c3382;
  filter: url(#boil);
  pointer-events: none;
  z-index: 11;
}

th:last-child {
	border-right: none;
}

th[aria-sort="descending"]::after { 
	content: " ▼"; 
}
th[aria-sort="ascending"]::after { 
	content: " ▲"; 
}

td {
	padding: 0.5rem 1.5rem;
	border-bottom: 1px solid #2c338240;
}

tr {
	position: relative;
	overflow: hidden;
}

tbody tr {
	position: relative;
	clip-path: inset(0);
}

tbody tr.searched {
	position: sticky;
	bottom: 0;
	z-index: 1;
	background: #2c3382;
	color: white;
}

tbody tr.searched .cell-name p {
	color: white;
}

tbody tr.searched .user-barcode {
	background:none;
	filter: invert(1) contrast(100);
}
tbody tr.searched::before {
	background: #ffffff30;
}

tr:hover {
	background: whitesmoke;
}

tr::before {
	content: "";
	position: absolute;
	bottom: 20px;
	right: -20px;
	width: 120px;
	height: 120px;
	mask: url("./assets/profile-seal.svg") center/contain no-repeat;
	background: #2c338220;
	pointer-events: none;
}

table {
	border: 2px solid #2c3382;
	border-top: none;
	border-bottom: none;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	padding: 0;
}

.toggle {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: #a8a8a8;
}

.toggle input {
	display: none;
	cursor: pointer;
}
.toggle label {
	cursor: pointer;
}

.toggle input:checked + label {
	color: #2c3382;
}

.user-filter {
	font-size: 0.9rem;
	font-weight: 300;
	cursor: pointer;
}

.user-filter:hover {
	font-weight:600;
}

.user-filter p {
	color: #2c338295;
	margin: 0;
}

.project-img, .user-img, .trophy-img {
	height: 55px;
	aspect-ratio: 1/1;
  object-fit: cover;
}

.cell-project, .cell-user, .cell-trophy {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	position: relative;
}

.global-rank {
	min-width: 28px;
}
.user-ranks {
	min-width: 38px;
}
.global-rank, .user-ranks {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.user-rank {
  font: 10px/1.4 "Remilia-Mono", monospace;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.user-rank p {
	margin: 0;
}

.user-rank p:first-child {
  color: #606060;
}

.cell-name {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

.cell-name p {
	margin: 0;
  letter-spacing: 0;
}

.cell-name .displayName {
  font: 400 15px/1.4 "Remilia-Mono", monospace;
  letter-spacing: -0.227px;
  overflow-wrap: anywhere;
  width: fit-content;
}

.cell-name .username {
  font: 12px/1.4 "Remilia-Mono", monospace;
  color: #606060;
  overflow-wrap: anywhere;
}


.project-barcode, .user-barcode, .trophy-barcode {
	width:96px;
	max-width:32%;
	height:18.5px;
	padding:1px 3px;
	background:white;
	object-fit:fill;
}

.user-barcode {
	position: absolute;
	bottom: -2px;
	left: 45%;
}

.members-link, .owners-link {
	opacity: 0.75;
	font-size:0.8rem;
	text-wrap: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.members-link:hover, .owners-link:hover {
	opacity: 1;
	text-decoration: underline;
}

footer {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2.5rem;
	color: #a8a8a8;
	font-size: 0.85rem;
}

footer span {
	display: flex;
	align-items: baseline;
	justify-content: space-evenly;
	gap: 0.5rem;
}

.heart {
	color: #2c3382;
}

.founder {
	color: #2c3382;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 4px;
}

.founder p:last-child {
  color: #606060;
}
/* ---------- Responsive ---------- */

.user-search-zone {
	display: flex;
	align-items: baseline;
}

.user-search input {
	flex: 1;
	min-width: 0;
}

/* Tablets / small laptops: filters go above the table, no side gutters */
@media (max-width: 1024px) {
	.content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		padding: 0 1rem;
		box-sizing: border-box;
	}

	.filters {
		padding: 0 0 1rem 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.5rem;
	}

	.user-search {
		flex: 0 1 16rem;
	}

	.toggle {
		flex-wrap: wrap;
	}
}

/* Phones: tighter spacing, smaller images, no barcodes */
@media (max-width: 600px) {
	.title {
		padding: 0.75rem;
		gap: 0.75rem;
	}

	.title h1 {
		font-size: 1.5rem;
		margin: 0.5rem 0;
	}

	.content {
		padding: 0 0.5rem;
	}

	.filters {
		padding-bottom: 0.75rem;
	}

	.user-search {
		flex-basis: 100%;
	}

	th {
		padding: 0.5rem;
		font-size: 0.8rem;
	}

	td {
		padding: 0.5rem;
	}

	.project-img, .user-img, .trophy-img {
		height: 40px;
	}

	.cell-project, .cell-user, .cell-trophy {
		gap: 0.6rem;
	}

	.user-ranks {
		flex-shrink: 0;
		min-width: max-content;
	}

	.cell-name .displayName {
		font-size: 13px;
	}

	.cell-name .username {
		font-size: 11px;
	}

	.project-barcode, .user-barcode, .trophy-barcode {
		display: none;
	}

	/* keep only the arrow of "Members ❯" / "Owners ❯" */
	.members-link p:first-child, .owners-link p:first-child {
		display: none;
	}

	.members-link, .owners-link {
		font-size: 1rem;
		padding: 0.5rem 0.25rem;
	}

	/* Projects view: drop Total Beetles, keep Members + Total Score */
	table:has(#toggleProjects:checked) th:nth-child(3),
	table:has(#toggleProjects:checked) td:nth-child(3) {
		display: none !important;
	}

	footer {
		gap: 1rem;
		font-size: 0.75rem;
		flex-wrap: wrap;
	}

	footer p {
		margin: 0.5rem 0;
	}
}