html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#000;
}

#wrap {
	position:relative;
	width:100%;
	height:100%;
}

canvas {
	display:block;
	width:100%;
	height:100%;
	image-rendering: pixelated;
}


/* Hide the OS mouse cursor over the play canvas.
   (The game draws its own cursor overlay.) */
#c {
	cursor:none;
}


/* Gamepad virtual cursor overlay: its own canvas on top of everything */
#gpCursorCanvas {
	position:absolute;
	left:0;
	top:0;
	z-index: 999999;
	pointer-events:none;
	image-rendering: pixelated;
}
#hud {
	position:absolute;
	left:8px;
	bottom:8px;
	z-index:3;
	color:#fff;
	font:12px/1.3 monospace;
	background:rgba(0,0,0,0.6);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:8px;
	padding:6px 8px;
	white-space:pre;
}


/* Top-right overlay cluster (account + reset) */
#topRight {
	position:absolute;
	top:8px;
	right:8px;
	z-index:5;
	display:flex;
	align-items:center;
	gap:8px;
}

/* Reset Button (inside #topRight) */
#resetBtn {
	width:34px;
	height:34px;
	padding:0;
	margin:0;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.22);
	background:rgba(0,0,0,0.62);
	color:#fff;
	font:18px/34px monospace;
	text-align:center;
	cursor:pointer;
	user-select:none;
}
#resetBtn:hover {
	background:rgba(255,64,64,0.78);
	border-color:rgba(255,255,255,0.38);
}
#resetBtn:active {
	transform:translateY(1px);
}

/* Login button (shown when not logged in) */
#loginBtn {
	height:34px;
	padding:0 10px;
	margin:0;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.22);
	background:rgba(0,0,0,0.62);
	color:#fff;
	font:12px/34px monospace;
	cursor:pointer;
	user-select:none;
	display:none;
	/* toggled by JS */
}
#loginBtn:hover {
	background:rgba(64,160,255,0.78);
	border-color:rgba(255,255,255,0.38);
}
#loginBtn:active {
	transform:translateY(1px);
}


/* Username badge (shown when logged in/admin) */
#userBadge {
	height:34px;
	padding:0 10px;
	margin:0;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.16);
	background:rgba(0,0,0,0.42);
	color:#fff;
	font:12px/34px monospace;
	white-space:nowrap;
	max-width:min(42vw, 360px);
	overflow:hidden;
	text-overflow:ellipsis;
	user-select:none;
	display:none;
	/* toggled by JS */
}


	/* On-Screen Keyboard (OSKB) */
	.osk {
		position:absolute;
		left:50%;
		bottom:12px;
		transform:translateX(-50%);
		z-index:10;
		display:none;
		min-width:min(720px, calc(100% - 24px));
		max-width:calc(100% - 24px);
		background:rgba(0,0,0,0.82);
		border:1px solid rgba(255,255,255,0.22);
		border-radius:12px;
		box-shadow:0 12px 32px rgba(0,0,0,0.55);
		user-select:none;
	}
	.osk.open {
	display:block;
}

	.oskBar {
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:8px 10px;
		border-bottom:1px solid rgba(255,255,255,0.12);
	}
	.oskTitle {
		color:#fff;
		font:12px/1.2 monospace;
		opacity:0.9;
	}
	.oskClose {
		width:28px;
		height:24px;
		border-radius:8px;
		border:1px solid rgba(255,255,255,0.22);
		background:rgba(0,0,0,0.55);
		color:#fff;
		cursor:pointer;
	}
	.oskClose:hover {
	background:rgba(255,64,64,0.78);
}

	.oskGrid {
	padding:8px;
}

	.oskRow {
	display:flex;
	gap:6px;
	margin-bottom:6px;
}

	.oskRow:last-child {
	margin-bottom:0;
}

	.oskKey {
		flex:1 1 auto;
		height:34px;
		border-radius:10px;
		border:1px solid rgba(255,255,255,0.16);
		background:rgba(255,255,255,0.08);
		color:#fff;
		font:14px/34px monospace;
		text-align:center;
		cursor:pointer;
	}
	.oskKey:hover {
	background:rgba(255,255,255,0.16);
}

	.oskKey:active {
	transform:translateY(1px);
}

	.oskKey[data-key="Backspace"],
	.oskKey[data-key="Enter"],
	.oskKey[data-key="Space"] {
	flex:1.6 1 auto;
}

	.oskKey[data-key^="Arrow"] {
	flex:0.9 1 auto;
}

	.oskKey[data-key="Escape"] {
	flex:1.2 1 auto;
}

	.oskKey[data-key="Shift"] {
	flex:1.3 1 auto;
}

.oskKey.active {
	background:rgba(255,255,255,0.22);
	border-color:rgba(255,255,255,0.32);
}

/* LOAD dropdown item hover highlight */
.guardian-load-menu .load-item {
	cursor: pointer;
	padding: 4px 8px;
}

.guardian-load-menu .load-item:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* Optional: keyboard / programmatic highlight */
.guardian-load-menu .load-item.active,
.guardian-load-menu .load-item.selected {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}