/* HUD: lightweight, text + one 2D canvas, no layout thrash (fixed-width numerals). */
.smgpu-hud {
	display: grid;
	gap: 0.75rem;
}

.smgpu-hud__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: 0.5rem;
	margin: 0;
}

.smgpu-hud__grid > div {
	padding: 0.6rem 0.8rem;
	background: var(--smgpu-surface, #f5f8ff);
	border: 1px solid var(--smgpu-border, #e1e7f3);
	border-radius: 10px;
}

.smgpu-hud__grid dt {
	margin: 0;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	color: var(--smgpu-muted, #5b6475);
}

.smgpu-hud__grid dd {
	margin: 0.1rem 0 0;
	font-size: clamp(1.15rem, 2.6vw, 1.6rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
	color: var(--smgpu-primary, #0b5cff);
	min-height: 1.4em;
}

.smgpu-hud__grid > div:nth-child(2) dd,
.smgpu-hud__grid > div:nth-child(4) dd {
	color: var(--smgpu-secondary, #12a150);
}

.smgpu-graph {
	height: 140px;
	padding: 0.4rem;
	background: var(--smgpu-bg, #fff);
	border: 1px solid var(--smgpu-border, #e1e7f3);
	border-radius: 10px;
}

.smgpu-graph canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.smgpu-stage:fullscreen ~ .smgpu-hud {
	display: none;
}

/* v3 tiles */
.smgpu-hud__grid { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
.smgpu-hud__grid > div { background: #fff; box-shadow: 0 6px 18px -16px rgba(11, 18, 32, 0.4); }
.smgpu-hud__grid dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.smgpu-graph { height: 170px; background: #fff; box-shadow: 0 6px 18px -16px rgba(11, 18, 32, 0.4); }

@media (min-width: 700px) { .smgpu-hud__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.smgpu-hud__grid dd { font-size: clamp(1.05rem, 1.8vw, 1.5rem); }

.smgpu-hud__grid dd { font-size: clamp(0.95rem, 1.5vw, 1.3rem); white-space: nowrap; }

/* ---- responsive ---- */
.smgpu-hud { min-width: 0; }
.smgpu-hud__grid { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
.smgpu-hud__grid > div { min-width: 0; }
.smgpu-hud__grid dt { font-size: 0.75rem; text-transform: uppercase; }
.smgpu-hud__grid dd { font-size: clamp(1.05rem, 0.8rem + 0.55vw, 1.35rem); overflow: hidden; text-overflow: ellipsis; }
.smgpu-graph { min-width: 0; touch-action: pan-y; }
.smgpu-graph canvas { touch-action: pan-y; }
@media (max-width: 700px) {
	.smgpu-hud__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.smgpu-hud__grid > div:last-child:nth-child(3n + 2) { grid-column: span 2; }
	.smgpu-hud__grid dd { font-size: 1.2rem; }
	.smgpu-graph { height: 140px; }
}
@media (max-width: 400px) {
	.smgpu-hud__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.smgpu-hud__grid > div:last-child:nth-child(3n + 2) { grid-column: auto; }
	.smgpu-hud__grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-height: 480px) and (orientation: landscape) { .smgpu-graph { height: 110px; } }