@layer components {
	[data-game-kit-docs] {
		> nav {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: .5rem 1rem;
			margin-block: 1rem;
		}

		> nav:has(ol) {
			display: block;
			ol { columns: 2 15rem; padding-inline-start: 1.5rem; }
			li { break-inside: avoid; padding-block: .15rem; }
		}

		section {
			border-block-start: 1px solid var(--color-border);
			padding-block-start: 1rem;
			scroll-margin-block-start: 1rem;
		}

		figure[data-code] pre {
			background: #182336;
			border-color: #445672;
			color: #ecf0f7;
			max-block-size: 24rem;
			overflow: auto;

			code { white-space: pre-wrap; overflow-wrap: anywhere; }
		}

		[data-token="tag"] { color: #9dd8ff; }
		[data-token="attribute"] { color: #f5d5a0; }
		[data-token="value"] { color: #aee9bc; }
		[data-token="punctuation"] { color: #b4c1d4; }

		td > span { display: block; }
		th { min-width: 0; }
		td, th { overflow-wrap: anywhere; }
	}

	[data-game-demo] {
		padding: clamp(.75rem, 2.5vw, 1.25rem);
		margin-block: 1rem;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		--game-screen-background: #202440;
		--game-screen-width: 25rem;

		> label:not([hidden]) {
			display: grid;
			gap: .25rem;
			margin-block-start: .75rem;
			max-inline-size: var(--game-screen-width);
		}

		> [data-game-event] { overflow-wrap: anywhere; font-family: monospace; }
		game-screen { border-radius: .25rem; }

		dialog {
			max-inline-size: min(26rem, 90vw);
			color: var(--color-text);
			background: var(--color-surface);
			border: 1px solid var(--color-border);
			border-radius: var(--radius);
			padding: 1.25rem;
		}

		dialog::backdrop { background: #121426ba; }

		game-menu a {
			display: inline-grid;
			place-items: center;
			min-block-size: 44px;
			padding-inline: .85rem;
			border: 1px solid var(--color-border);
			border-radius: .25rem;
		}
	}
}