@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:slnt,wght@-6,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Patrick+Hand&family=Share+Tech&display=swap');

:root {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	--box-size: 2.7rem;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.6rem;
	background-color: #303030;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 4.5rem; /* offset for fixed navbar */
}

/* ---- Navbar ---- */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4rem;
	background-color: #303030;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 1.5rem;
	z-index: 100;
	border-bottom: 1px solid #444;
	box-sizing: border-box;
}

.navbar-title {
	font-family: "Bitcount Grid Double", monospace;
	color: #a0a0a0;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	grid-column: 2;
}

.sidebar-toggle {
	background: none;
	border: 1px solid #555;
	color: #a0a0a0;
	font-size: 1.4rem;
	cursor: pointer;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	transition: background-color 0.15s;
	grid-column: 1;
	justify-self: start;
}
.sidebar-toggle:hover { background-color: #3a3a3a; }

/* ---- Navbar right: score + login ---- */
.navbar-right {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.score-display {
	font-family: "Share Tech", monospace;
	font-size: 0.85rem;
	color: #a0a0a0;
	letter-spacing: 0.05em;
}

/* ---- Sidebar ---- */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100%;
	background-color: #1e1e1e;
	z-index: 200;
	padding: 1.5rem;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	color: #c0c0c0;
	font-family: "Share Tech", sans-serif;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sidebar.open {
	transform: translateX(0);
}

.sidebar-close {
	background: none;
	border: none;
	color: #606060;
	font-size: 0.9rem;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	transition: background-color 0.15s, color 0.15s;
	align-self: flex-end;
	margin-bottom: 0.5rem;
}
.sidebar-close:hover { background-color: #2e2e2e; color: #a0a0a0; }

/* ---- Overlay ---- */
.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 150;
}
.sidebar-overlay.open { display: block; }

.main {
	background-color: #505050;
	margin: 0rem 4rem 2rem 4rem;
	width: 90vw;
	min-height: 90vh;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--box-size), 1fr));
	grid-auto-rows: var(--box-size);
}

.checkbox {
	border: 0.3px solid #303030;
	transition: background-color 0.1s ease;
	touch-action: manipulation;
}

.checkbox:active {
	scale: 0.98;
	background-color: #454545;
}
.checkbox.toggled {
	background-color: #707070;
}

.skeleton {
	background: linear-gradient(90deg, #404040 25%, #4a4a4a 50%, #404040 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}