#menu {
	display: grid;
	gap: 0.6rem;
	max-width: 24rem;
}
#menu label { color: var(--dim); font-weight: 600; margin-top: 0.4rem; }
#menu button { margin-bottom: 0.6rem; }
#menu .check { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.check input { width: 1.3rem; height: 1.3rem; accent-color: var(--glow); }
#code { text-transform: uppercase; letter-spacing: 0.3em; }
#room-code { color: var(--hot); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
#players { list-style: none; padding: 0; margin: 0 0 1.25rem; }
#players li { padding: 0.25rem 0 0.25rem 1.6rem; position: relative; font-weight: 600; }
#players li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65rem;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	background: #35e0ff;
}
#players li[data-slot="1"]::before { background: #ff5fd2; }
#players li[data-slot="2"]::before { background: #ffe14a; }
#players li[data-slot="3"]::before { background: #6dff7a; }
#lobby button { margin: 0 0.6rem 0.6rem 0; }
#stage {
	border-radius: 0.8rem;
	overflow: hidden;
	border: 2px solid var(--edge);
	line-height: 0;
}
#stage:focus-visible { outline-offset: 0; }
#canvas { display: block; width: 100%; aspect-ratio: 8 / 5; }
#caption { min-height: 3.2em; margin: 0.8rem 0; font-size: 1.15rem; font-weight: 600; }
#error { margin: 0.8rem 0; color: #ff9a8f; font-weight: 600; }
#error:empty, #caption:empty { margin: 0; min-height: 0; }
#session { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
dialog {
	max-width: 34rem;
	color: var(--ink);
	background: var(--panel);
	border: 2px solid var(--glow);
	border-radius: 0.8rem;
	padding: 1.5rem;
}
dialog::backdrop { background: rgba(3, 5, 15, 0.75); }
dialog ul { margin: 0 0 1rem; padding-left: 1.2rem; }
dialog h2:focus { outline: none; }