/* ---- Login button in navbar ---- */
.login-btn {
	background: none;
	border: 1px solid #555;
	color: #a0a0a0;
	font-family: "Share Tech", sans-serif;
	font-size: 0.85rem;
	cursor: pointer;
	padding: 0.3rem 0.9rem;
	border-radius: 4px;
	transition: background-color 0.15s, color 0.15s;
	min-width: 4rem;
}
.login-btn:hover {
	background-color: #3a3a3a;
	color: #d0d0d0;
}

/* Hover shows "Logout" for logged-in users */
.login-btn.logged-in:hover::before {
	content: "Logout";
}
.login-btn.logged-in:hover {
	color: #e07070;
	border-color: #e07070;
	font-size: 0;
}
.login-btn.logged-in:hover::before {
	font-size: 0.85rem;
}

/* ---- Leaderboard ---- */
.sidebar-heading {
	font-family: "Share Tech", monospace;
	font-size: 1.1rem;
	color: #d0d0d0;
	margin-bottom: 0.3rem;
}

.sidebar-stat {
	font-size: 0.8rem;
	color: #707070;
	margin-bottom: 1.2rem;
}

.leaderboard { overflow-y: auto; max-height: 60vh; }

.leaderboard-title {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #606060;
	margin-bottom: 0.6rem;
}

.leaderboard-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.lb-entry {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.5rem;
	border-radius: 4px;
	font-size: 0.82rem;
	transition: background 0.1s;
}
.lb-entry:hover { background: rgba(255,255,255,0.04); }
.lb-first { background: rgba(82,92,235,0.1); }

.lb-rank {
	color: #505050;
	font-size: 0.72rem;
	width: 1.2rem;
	text-align: right;
	flex-shrink: 0;
}
.lb-first .lb-rank { color: #8b96f5; }

.lb-name {
	flex: 1;
	color: #a0a0a0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.lb-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4caf7d;
	flex-shrink: 0;
	display: inline-block;
}

.lb-score {
	color: #707070;
	font-size: 0.78rem;
	font-family: "Share Tech", monospace;
}

/* ---- Guest prompt ---- */
.guest-prompt {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.8rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid #333;
	border-radius: 6px;
	margin-top: 0.8rem;
	font-size: 0.8rem;
	color: #707070;
	flex-shrink: 0;
}

.guest-login-btn {
	background: none;
	border: 1px solid #525CEB;
	border-radius: 4px;
	color: #8b96f5;
	cursor: pointer;
	font-family: "Share Tech", sans-serif;
	font-size: 0.8rem;
	padding: 0.35rem;
	transition: background 0.15s;
}
.guest-login-btn:hover { background: rgba(82,92,235,0.15); }

/* ---- Modal overlay ---- */
.login-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 300;
	align-items: center;
	justify-content: center;
}
.login-overlay.open {
	display: flex;
}

/* ---- Modal box ---- */
.login-modal {
	background-color: #1e1e1e;
	border: 1px solid #3a3a3a;
	border-radius: 8px;
	padding: 2rem 2.5rem;
	width: 100%;
	max-width: 360px;
	position: relative;
	font-family: "Share Tech", sans-serif;
	color: #c0c0c0;
}

.login-modal-close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	background: none;
	border: none;
	color: #666;
	font-size: 1.1rem;
	cursor: pointer;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	transition: background-color 0.15s;
}
.login-modal-close:hover { background-color: #2e2e2e; color: #a0a0a0; }

.login-heading {
	font-size: 1.5rem;
	color: #a0a0a0;
	margin: 0 0 1.5rem 0;
	letter-spacing: 0.05em;
}

/* ---- Form ---- */
.login-form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.login-input {
	background-color: #2a2a2a;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	color: #c0c0c0;
	font-family: "Share Tech", sans-serif;
	font-size: 1rem;
	padding: 0.6rem 0.9rem;
	outline: none;
	transition: border-color 0.15s;
}
.login-input::placeholder { color: #555; }
.login-input:focus { border-color: #606060; }

.login-submit {
	background-color: #3a3a3a;
	border: 1px solid #505050;
	border-radius: 4px;
	color: #c0c0c0;
	font-family: "Share Tech", sans-serif;
	font-size: 1rem;
	padding: 0.6rem;
	cursor: pointer;
	transition: background-color 0.15s;
	margin-top: 0.3rem;
}
.login-submit:hover { background-color: #484848; }

/* ---- Error message ---- */
.login-error {
	color: #e07070;
	font-size: 0.85rem;
	margin: 0;
	min-height: 1.1rem;
}

/* ---- Footer ---- */
.login-footer {
	margin: 1.2rem 0 0 0;
	font-size: 0.9rem;
	color: #555;
	text-align: center;
}
.login-footer a {
	color: #808080;
	text-decoration: none;
}
.login-footer a:hover { text-decoration: underline; }