/* 1728092506257 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; }
html { height: 100%; }
body {
	font-family: sans-serif; text-align: center; font-size: 16px; background-color: rgb(40 40 40);
	height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; color: rgb(255 255 255);
}
main {
	position: relative; height: 100vmin; width: 100vmin;
	--control-height: 100px;
}
gobble-controls {
	position: absolute; height: var(--control-height); width: calc(100% - (var(--control-height) * 2));
	display: flex; align-items: center; padding: 20px 0; gap: 20px;
}
	#TopControls { top: 0; left: var(--control-height); transform: rotate(180deg); }
	#LeftControls { top: 0; left: 0; transform: rotate(90deg); transform-origin: 0 100%; }
	#RightControls { top: 0; right: 0; transform: rotate(-90deg); transform-origin: 100% 100%; }
	#BottomControls { bottom: 0; left: var(--control-height); }
	gobble-def { width: 100%; }
		gobble-def:empty { display: none; }
		gobble-def:not(:empty) ~ button { display: none; }
	.controlBtn {
		height: 100%; aspect-ratio: 1; background: none; color: inherit;
		border: 1px solid currentcolor; border-radius: 50%;
	}
		.controlBtn:hover { color: rgb(255 255 0); }
		.controlBtn svg { fill: currentcolor; }
		.typeBtn { font-size: 18px; }
		.sizeBtn { font-size: 24px; letter-spacing: -0.2em; }
		.timeBtn svg { height: 50%; }
		.startBtn { flex-grow: 1; border-radius: 10px; flex-direction: column; font-size: 3.5vmin; padding: 5px; }
			.startBtn::after { content: "Tap to start a new game"; }
			.startBtn[sec]::before { content: attr(sec) "s left"; font-size: 20px; }
			.startBtn[sec]::after { content: "Tap to restart"; }
dialog { flex-direction: column; padding: 0; background-color: inherit; color: inherit; border: none; }
	dialog[open] { display: flex; }
	dialog::backdrop { background: rgba(0 0 0 / 0.25); }
	dialog form { display: flex; flex-direction: column; gap: 30px; align-items: start; background-color: inherit; }

	dialog :is(header, footer) { position: sticky; width: 100%; padding: 20px; background-color: inherit; }
	dialog header { top: 0; font-size: 24px; text-align: center; }
	dialog label {
		width: 100%; text-align: left; line-height: 1.5em; cursor: pointer; padding: 15px 20px;
		border: 1px solid rgb(100 100 100); border-radius: 5px;
	}
		dialog fieldset { display: flex; flex-direction: column; gap: 10px; width: calc(100% - 40px); margin: 0; }
			dialog fieldset.row { flex-direction: row; }
		dialog input { vertical-align: 2px; }
		dialog span { font-size: 20px; }
		dialog aside { color: rgb(200 200 200); }
		dialog input:checked + span { font-weight: bold; }
		dialog input:checked ~ aside { color: rgb(200 200 255); }
	dialog footer { bottom: 0; }
		.saveBtn {
			background-color: rgb(0 128 0); border-radius: 5px; color: inherit; border: none; width: 100%;
			font: inherit; font-size: 20px; padding: 10px;
		}
#Grid {
	position: absolute; top: var(--control-height); left: var(--control-height);
	width: calc(100% - (var(--control-height) * 2)); aspect-ratio: 1;
	grid-area: cubes; display: grid; gap: 2vmin;
	grid-template-rows: repeat(var(--size), 1fr); grid-template-columns: repeat(var(--size), 1fr);
	cursor: default;
}
.cube {
	display: flex; position: relative;
	background-clip: padding-box !important;
	--border-width: 2px;
	border: var(--border-width) solid transparent; border-radius: 2vmin;
	justify-content: center; align-items: center;
	font-size: calc(40vmin / var(--size)); font-weight: bold;
	--background: rgb(250 250 245); background: var(--background);
	--highlight: rgb(120 120 120);
	color: rgb(100 50 50);
	box-shadow: 0 0 1vmin 0 rgba(0 0 0 / 0.55);
}
	.cube input { position: absolute; top: -100vh; left: -100vw; }
	.cube:has(:checked) { color: var(--selected); }
	.cube::before {
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: -1;
		margin: calc(0px - var(--border-width));
		border-radius: inherit;
		background-image: conic-gradient(from 0turn, var(--highlight), var(--highlight) var(--pctRemaining), var(--background) var(--pctRemaining));
	}

	.cube::after { content: attr(letter); }
		.cube.rotate2::after { transform: rotate(90deg); }
		.cube.rotate3::after { transform: rotate(180deg); }
		.cube.rotate4::after { transform: rotate(270deg); }
	[letter="W"], [letter="M"], [letter="Z"], [letter="N"] { text-decoration: underline; text-underline-offset: 0.15em; }
	[letter="*"]::after { line-height: 0.5; }