/* --- CLEANED, FLAT, ACCESSIBLE STYLES --- */
:root {
	color-scheme: light;
	--main-blue: #1769ff;
	--accent-gold: #ffd600;
	--neutral-white: #ffffff;
	--bg-start: #eaf1fb;
	--bg-end: #c7d7f5;
	--panel: #f7fbff;
	--border: #1769ff33;
	--text: #102040;
	--muted: #5f6b7a;
	--accent: var(--accent-gold);
	--accent-strong: #c7a600;
	--success: #1769ff;
	--danger: #b9482d;
	--shadow: 0 28px 80px #1769ff22;
	/* removed stray closing brace */

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 88px 24px 24px;
	font-family: "Space Grotesk", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at top left, var(--main-blue) 10%, transparent 40%),
		radial-gradient(circle at bottom right, var(--accent-gold) 10%, transparent 40%),
		linear-gradient(135deg, var(--bg-start), var(--bg-end));
}

.game-main {
	width: min(1100px, 100%);
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 24px;
	margin-top: 32px;
}

.game-panel, .profile-panel, .chat-panel, .inventory-panel, .quests-panel {
	background: linear-gradient(135deg, var(--main-blue) 60%, var(--accent-gold) 100%);
	border: 2px solid var(--main-blue);
	border-radius: 28px;
	box-shadow: 0 8px 32px var(--main-blue)22, 0 1.5px 0 var(--accent-gold) inset;
	color: var(--text);
	margin-bottom: 18px;
	padding: 32px 28px 24px 28px;
	position: relative;
	overflow: hidden;
	font-size: 1.15rem;
}

.game-panel h2, .profile-panel h3, .chat-panel h3, .inventory-panel h3, .quests-panel h3 {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--main-blue);
	margin-bottom: 18px;
	text-shadow: 0 2px 12px var(--accent-gold), 0 1px 0 var(--neutral-white);
	font-size: 1.5em;
}

.game-area {
	background: rgba(0,0,0,0.04);
	border-radius: 18px;
	padding: 18px;
	min-height: 120px;
	box-shadow: 0 2px 12px var(--main-blue) inset;
}

.chat-window {
	background: var(--neutral-white);
	border-radius: 14px;
	min-height: 120px;
	max-height: 220px;
	overflow-y: auto;
	margin-bottom: 12px;
	padding: 16px 14px;
	box-shadow: 0 1px 8px var(--main-blue) inset;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1.15rem;
	color: var(--text);
}

.chat-message {
	margin-bottom: 7px;
	padding: 4px 0;
	border-bottom: 1px solid var(--main-blue)22;
}

#chatInput {
	border: 2px solid var(--main-blue);
	background: var(--neutral-white);
	color: var(--text);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1.1em;
	padding: 12px 16px;
}

.inventory-panel ul, .quests-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.inventory-panel li, .quests-panel li {
	background: var(--main-blue);
	color: var(--neutral-white);
	border-radius: 12px;
	margin-bottom: 10px;
	padding: 14px 20px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 1.15rem;
	box-shadow: 0 1px 6px var(--main-blue)33 inset;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	outline: none;
}
.inventory-panel li:focus, .quests-panel li:focus {
	outline: 3px solid var(--accent-gold);
	outline-offset: 2px;
}
.inventory-panel li:hover, .quests-panel li:hover {
	background: var(--accent-gold);
	color: var(--main-blue);
}

.profile-panel button, .game-panel button {
	background: var(--main-blue);
	color: var(--neutral-white);
	font-weight: 700;
	border: none;
	border-radius: 999px;
	padding: 14px 28px;
	margin-top: 16px;
	box-shadow: 0 2px 8px var(--main-blue)aa;
	transition: background 0.2s, color 0.2s;
	font-size: 1.1em;
	outline: none;
}
.profile-panel button:focus, .game-panel button:focus {
	outline: 3px solid var(--accent-gold);
	outline-offset: 2px;
}
.profile-panel button:hover, .game-panel button:hover {
	background: var(--accent-gold);
	color: var(--main-blue);
}

input, select, textarea {
	font-size: 1.1em;
	border-radius: 8px;
	border: 2px solid var(--main-blue);
	padding: 12px 16px;
	background: var(--neutral-white);
	color: var(--text);
	margin-bottom: 10px;
}
input:focus, select:focus, textarea:focus {
	outline: 3px solid var(--accent-gold);
	outline-offset: 2px;
}
.brand-link {
	color: var(--main-blue);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25em;
	padding: 10px 22px;
	border-radius: 18px;
	background: var(--neutral-white);
	border: 2px solid var(--main-blue);
	margin-right: 18px;
	box-shadow: 0 2px 8px var(--main-blue)11;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
	}

	.nav-link {
		text-decoration: none;
		color: var(--main-blue);
		background: var(--neutral-white);
		padding: 12px 26px;
		border-radius: 18px;
		font-weight: 600;
		font-size: 1.08em;
		border: 2px solid var(--main-blue);
		box-shadow: 0 2px 8px var(--main-blue)11;
		transition: background 180ms, color 180ms, border 180ms;
		outline: none;
		margin-bottom: 2px;
	}

	.nav-link.active,
	.nav-link:hover {
		background: var(--accent-gold);
		color: var(--main-blue);
		border: 2px solid var(--accent-gold);
	}

	.nav-user {
		max-width: 180px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 1em;
		color: var(--main-blue);
		padding: 10px 20px;
		border-radius: 18px;
		background: var(--neutral-white);
		border: 2px solid var(--main-blue);
		margin-right: 8px;
		font-weight: 600;
		box-shadow: 0 2px 8px var(--main-blue)11;
	}

	.nav-signout {
		border: 2px solid var(--main-blue);
		border-radius: 18px;
		padding: 10px 22px;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		color: var(--neutral-white);
		background: var(--main-blue);
		transition: background 0.2s, color 0.2s, border 0.2s;
		margin-left: 8px;
		box-shadow: 0 2px 8px var(--main-blue)11;
	}
	.nav-signout:hover {
		background: var(--accent-gold);
		color: var(--main-blue);
		border: 2px solid var(--accent-gold);
		transform: translateY(-1px);
	}
}

/* .nav-user block is now defined later with correct syntax */

/* .nav-signout:hover block is now defined later with correct syntax */
/* .nav-link.active block is now defined later with correct syntax */

.home-main {
	width: min(900px, 100%);
	grid-template-columns: 1fr;
/* Remove stray closing brace */
	input, select, textarea {
	    font-size: 1.1em;
	    border-radius: 8px;
	    border: 2px solid var(--main-blue);
	    padding: 12px 16px;
	    background: var(--neutral-white);
	    color: var(--text);
	    margin-bottom: 10px;
	}
	position: fixed;
	border-radius: 999px;
	pointer-events: none;
	filter: blur(8px);
	input:focus, select:focus, textarea:focus {
	    outline: 3px solid var(--accent-gold);
	    outline-offset: 2px;
	}
	height: 260px;
	background: rgba(221, 107, 61, 0.1);
	top: 40px;
	right: -70px;
}

body::after {
	width: 320px;
	height: 320px;
	background: rgba(18, 32, 58, 0.07);
	left: -100px;
	bottom: -110px;
}

main {
	width: min(1100px, 100%);
	display: grid;
	grid-template-columns: 1.15fr 0.95fr;
	gap: 24px;
	align-items: stretch;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 30px;
	box-shadow: var(--shadow);
	backdrop-filter: blur(16px);
}

.intro {
	padding: 36px;
	animation: rise 700ms ease-out;
}

.eyebrow,
.field-label,
.hint,
.status-log,
.meta {
	font-family: "IBM Plex Mono", monospace;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(18, 32, 58, 0.06);
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

h1 {
	margin: 18px 0 14px;
	font-size: clamp(2.7rem, 5.2vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
}

.lead {
	margin: 0;
	max-width: 54ch;
	color: var(--muted);
	line-height: 1.8;
	font-size: 1.02rem;
}

.highlights {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.highlight {
	padding: 18px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(18, 32, 58, 0.08);
}

.highlight strong {
	display: block;
	margin-top: 10px;
	font-size: 1.2rem;
}

.meta {
	margin-top: 28px;
	color: var(--muted);
	line-height: 1.8;
	font-size: 0.86rem;
}

.auth-card {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: rise 900ms ease-out;
}

.field-label {
	display: block;
	margin-bottom: 8px;
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

input {
	width: 100%;
	border: 1px solid rgba(18, 32, 58, 0.14);
	border-radius: 18px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--text);
	font: inherit;
}

textarea {
	width: 100%;
	min-height: 130px;
	border: 1px solid rgba(18, 32, 58, 0.14);
	border-radius: 18px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--text);
	font: inherit;
	resize: vertical;
}

.row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

button {
	border: 0;
	border-radius: 999px;
	padding: 12px 18px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

button:hover {
	transform: translateY(-1px);
}

.primary {
	background: var(--accent);
	color: #fffaf6;
	box-shadow: 0 14px 28px rgba(185, 85, 45, 0.24);
}

.primary:hover {
	background: var(--accent-strong);
}

.secondary {
	background: rgba(18, 32, 58, 0.08);
	color: var(--text);
}

.ghost {
	background: transparent;
	border: 1px solid rgba(18, 32, 58, 0.14);
	color: var(--text);
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(18, 32, 58, 0.06);
	color: var(--muted);
	font-size: 0.9rem;
}

.chip.active {
	background: rgba(28, 140, 110, 0.12);
	color: var(--success);
}

.chip.error {
	background: rgba(185, 72, 45, 0.12);
	color: var(--danger);
}

.hint {
	margin: 0;
	color: var(--muted);
	line-height: 1.7;
	font-size: 0.84rem;
}

.status-log {
	margin: 0;
	min-height: 156px;
	padding: 16px;
	border-radius: 22px;
	background: rgba(18, 32, 58, 0.96);
	color: #d8f1e8;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow: auto;
}

.status-text {
	margin: 0;
	font-size: 1rem;
}

.dashboard-main {
	width: min(1100px, 100%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

.dashboard-profile {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: rise 700ms ease-out;
}

.dashboard-form-card {
	padding: 32px;
	animation: rise 900ms ease-out;
}

.dashboard-heading {
	margin: 0 0 16px;
	font-size: 1.2rem;
}

.dashboard-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.dashboard-user {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(18, 32, 58, 0.08);
}

.avatar-pill {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-weight: 700;
	background: rgba(221, 107, 61, 0.18);
	color: var(--text);
}

.dashboard-user-name,
.dashboard-user-email {
	margin: 0;
}

.dashboard-user-name {
	font-weight: 700;
	font-size: 1.04rem;
}

.dashboard-user-email {
	margin-top: 4px;
	color: var(--muted);
	font-size: 0.94rem;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 900px) {
	main {
		grid-template-columns: 1fr;
	}

	.dashboard-main {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	body {
		padding: 82px 16px 16px;
	}

	.site-nav {
		top: 10px;
		width: calc(100% - 12px);
		border-radius: 18px;
		padding: 10px 12px;
	}

	.nav-meta {
		width: 100%;
		justify-content: flex-end;
	}

	.nav-user {
		max-width: 120px;
	}

	.intro,
	.auth-card,
	.home-card {
		padding: 22px;
	}

	.highlights,
	.dashboard-grid,
	.row {
		grid-template-columns: 1fr;
	}

	h1 {
		font-size: 2.7rem;
	}
}