/*
 * On-screen controls legend.
 *
 * The lives indicator is drawn straight onto the WebGL canvas in the
 * bottom-left corner, sized innerWidth/6 x innerHeight/6 (see
 * renderer.setViewport in js/projeto.js), so the legend keeps a left
 * gutter of that same width and never sits on top of it.
 */

#controls-hud {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	pointer-events: none;
}

/*
 * The toggle is positioned against the viewport, not against the panel, so
 * it stays in exactly the same spot whether the legend is open or closed.
 */
#hudToggle {
	pointer-events: auto;
	position: fixed;
	right: 12px;
	bottom: 12px;
	background: rgba(9, 14, 26, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	color: #cfe4ff;
	font-family: inherit;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
	cursor: pointer;
}

#hudToggle:hover {
	background: rgba(30, 48, 80, 0.85);
	border-color: rgba(159, 216, 255, 0.6);
	color: #fff;
}

/* Phone-only quick bar; the media query below is what turns it on. */
#hudQuick {
	display: none;
}

#hudPanel {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
	/* right gutter clears the toggle, left gutter clears the lives */
	padding: 12px 132px 12px clamp(92px, 17vw, 250px);
	background: linear-gradient(to top, rgba(4, 8, 18, 0.88), rgba(4, 8, 18, 0));
}

#hudPanel[hidden] {
	display: none;
}

/* Label in a fixed gutter, keys filling the rest: every row lines up. */
.hud-section {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	align-items: center;
	gap: 0 10px;
}

.hud-section h3 {
	margin: 0;
	font-size: 9px;
	font-weight: bold;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6fb6f5;
	text-align: right;
}

/*
 * One uniform column track shared by every row, so the keys line up in a
 * grid instead of each row sizing itself independently.
 */
.hud-keys {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.hud-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: #c3d2e2;
	font-family: inherit;
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
	padding: 4px 8px 4px 4px;
	cursor: pointer;
}

.hud-row:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.hud-row:active,
.hud-row.hud-row-active {
	background: rgba(111, 182, 245, 0.35);
	border-color: #9fd8ff;
	color: #fff;
}

.hud-row kbd {
	flex: 0 0 auto;
	min-width: 17px;
	text-align: center;
	background: #cfe4ff;
	color: #0b1220;
	border-radius: 4px;
	padding: 3px 4px;
	font-family: inherit;
	font-size: 11px;
	font-weight: bold;
	line-height: 1;
}

.hud-row span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Below this the longest label stops fitting in a seventh of the row. */
@media (max-width: 1150px) {
	.hud-keys {
		grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	}
}

@media (max-width: 760px) {
	#hudQuick:not([hidden]) {
		pointer-events: auto;
		position: fixed;
		left: clamp(74px, 18vw, 110px);
		right: 10px;
		/* its own strip, just above the toggle's corner */
		bottom: 48px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	#hudQuick .hud-row {
		background: rgba(9, 14, 26, 0.72);
		border-color: rgba(255, 255, 255, 0.22);
		font-size: 11px;
		padding: 10px 6px;
	}

	#hudQuick .hud-row kbd {
		font-size: 13px;
		min-width: 20px;
	}

	#hudPanel {
		gap: 8px;
		/* bottom gutter reserves the strip the toggle sits in */
		padding: 10px 10px 42px clamp(74px, 18vw, 110px);
	}

	/* Too narrow for a label gutter: stack the label above its keys. */
	.hud-section {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.hud-section h3 {
		text-align: left;
	}

	.hud-keys {
		grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	}

	.hud-row {
		padding: 6px 5px;
	}
}