@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Share+Tech+Mono&display=swap");

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
}

body {
	margin: 0;
	min-height: 100%;
	font-family: "Share Tech Mono", ui-monospace, monospace;
	background:
		linear-gradient(180deg, rgba(0, 255, 200, 0.04), transparent 28%),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.28) 3px
		),
		radial-gradient(120% 80% at 50% 0%, #1a0840 0%, #07040f 55%, #020105 100%);
	color: #d7fff4;
}

nav,
main,
#welcome {
	max-width: 390px;
	margin: 0 auto;
}

#top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 2px solid #00ffc8;
	box-shadow: 0 0 18px rgba(0, 255, 200, 0.35);
	background: rgba(8, 0, 24, 0.72);
}

#user-cluster {
	display: flex;
	align-items: center;
	gap: 10px;
}

#user-cluster[hidden],
#app-menu[hidden],
#welcome[hidden],
#main[hidden],
#name-form[hidden],
#name-status[hidden] {
	display: none;
}

#menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 12px;
	background: #12081f;
	color: #00ffc8;
	border: 2px solid #00ffc8;
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 255, 200, 0.45);
}

.burger-line {
	display: block;
	width: 18px;
	height: 2px;
	background: #00ffc8;
	box-shadow: 0 0 6px #00ffc8;
}

#current-user {
	font-size: 1rem;
	color: #ff3df2;
	text-shadow: 0 0 8px rgba(255, 61, 242, 0.7);
}

#app-menu {
	padding: 0 16px 8px;
	background: rgba(8, 0, 24, 0.72);
	border-bottom: 1px solid #ff3df2;
}

main,
#welcome {
	padding: 8px 16px 24px;
}

h1 {
	margin: 0;
	font-family: Orbitron, sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00ffc8;
	text-shadow:
		0 0 8px #00ffc8,
		0 0 18px rgba(255, 61, 242, 0.55);
}

p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: #c8fff2;
}

button {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 12px 16px;
	font-family: Orbitron, sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 2px solid #ff3df2;
	border-radius: 0;
	background: #16041c;
	color: #ff3df2;
	box-shadow:
		0 0 12px rgba(255, 61, 242, 0.45),
		inset 0 0 8px rgba(255, 61, 242, 0.12);
}

button[hidden] {
	display: none;
}

#menu-toggle {
	width: 44px;
	margin-top: 0;
	font-size: 0;
	letter-spacing: 0;
	text-transform: none;
}

#logout {
	border-color: #00ffc8;
	color: #00ffc8;
	box-shadow:
		0 0 12px rgba(0, 255, 200, 0.4),
		inset 0 0 8px rgba(0, 255, 200, 0.1);
}

#name-form {
	margin-top: 16px;
}

#name-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 1rem;
	color: #c8fff2;
}

#chosen-name {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-family: "Share Tech Mono", ui-monospace, monospace;
	font-size: 1rem;
	color: #d7fff4;
	background: #12081f;
	border: 2px solid #00ffc8;
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 255, 200, 0.35);
}

#name-status {
	margin-top: 12px;
}