.classic-minefield {
	--cm-surface: #c0c0c0;
	--cm-accent: #2457a6;
	--cm-digit: #ff3b30;
	--cm-dark: #808080;
	--cm-darker: #404040;
	--cm-light: #dfdfdf;
	--cm-lighter: #fff;
	box-sizing: border-box;
	color: #171717;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	margin: 1.5rem auto;
	max-width: 100%;
	width: max-content;
}

.classic-minefield *,
.classic-minefield *::before,
.classic-minefield *::after {
	box-sizing: border-box;
}

.classic-minefield button,
.classic-minefield input,
.classic-minefield select {
	font: inherit;
}

.classic-minefield .cm-controls {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: center;
	margin: 0 0 0.75rem;
}

.classic-minefield .cm-field {
	display: grid;
	gap: 0.2rem;
	min-width: 10rem;
}

.classic-minefield .cm-field--number {
	min-width: 4.5rem;
	width: 5.5rem;
}

.classic-minefield .cm-field__label {
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.02em;
}

.classic-minefield .cm-controls select,
.classic-minefield .cm-controls input,
.classic-minefield .cm-apply-custom {
	background: #fff;
	border: 1px solid #6b7280;
	border-radius: 4px;
	color: #171717;
	min-height: 2.35rem;
	padding: 0.35rem 0.55rem;
}

.classic-minefield .cm-custom-controls {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.classic-minefield .cm-custom-controls[hidden],
.classic-minefield .cm-best-time[hidden] {
	display: none !important;
}

.classic-minefield .cm-apply-custom {
	background: var(--cm-accent);
	border-color: #17376a;
	border-color: color-mix(in srgb, var(--cm-accent) 65%, #000);
	color: #fff;
	cursor: pointer;
	font-weight: 650;
}

.classic-minefield .cm-apply-custom:hover {
	filter: brightness(1.08);
}

.classic-minefield .cm-machine {
	background: var(--cm-surface);
	border-color: var(--cm-lighter) var(--cm-darker) var(--cm-darker) var(--cm-lighter);
	border-style: solid;
	border-width: 4px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
	max-width: min(100%, 100vw - 24px);
	padding: 10px;
	width: max-content;
}

.classic-minefield .cm-machine__header {
	align-items: center;
	border-color: var(--cm-darker) var(--cm-lighter) var(--cm-lighter) var(--cm-darker);
	border-style: solid;
	border-width: 3px;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	margin-bottom: 10px;
	min-width: 210px;
	padding: 7px;
}

.classic-minefield .cm-display {
	background: #151515;
	border: 2px inset var(--cm-dark);
	color: var(--cm-digit);
	display: inline-block;
	font-family: "Courier New", ui-monospace, monospace;
	font-size: clamp(1.35rem, 4vw, 1.75rem);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	min-width: 3.6ch;
	padding: 0.18em 0.22em 0.12em;
	text-align: center;
	text-shadow: 0 0 8px var(--cm-digit);
	text-shadow: 0 0 8px color-mix(in srgb, var(--cm-digit) 65%, transparent);
}

.classic-minefield .cm-reset {
	align-items: center;
	background: var(--cm-surface);
	border-color: var(--cm-lighter) var(--cm-darker) var(--cm-darker) var(--cm-lighter);
	border-style: solid;
	border-width: 3px;
	color: #171717;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.35rem;
	height: 2.4rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 2.4rem;
}

.classic-minefield .cm-reset:active {
	border-color: var(--cm-darker) var(--cm-lighter) var(--cm-lighter) var(--cm-darker);
}

.classic-minefield .cm-board-scroll {
	max-width: calc(100vw - 48px);
	overflow: auto;
	overscroll-behavior-inline: contain;
}

.classic-minefield .cm-board {
	--cm-cell-size: 30px;
	background: var(--cm-dark);
	border-color: var(--cm-darker) var(--cm-lighter) var(--cm-lighter) var(--cm-darker);
	border-style: solid;
	border-width: 3px;
	display: grid;
	grid-auto-rows: var(--cm-cell-size);
	grid-template-columns: repeat(var(--cm-columns), var(--cm-cell-size));
	min-width: max-content;
	touch-action: manipulation;
	user-select: none;
}

.classic-minefield .cm-cell {
	align-items: center;
	appearance: none;
	background: var(--cm-surface);
	border-color: var(--cm-lighter) var(--cm-darker) var(--cm-darker) var(--cm-lighter);
	border-radius: 0;
	border-style: solid;
	border-width: 2px;
	color: #111;
	cursor: pointer;
	display: inline-flex;
	font-family: Arial, sans-serif;
	font-size: calc(var(--cm-cell-size) * 0.62);
	font-weight: 900;
	height: var(--cm-cell-size);
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	width: var(--cm-cell-size);
}

.classic-minefield .cm-cell:hover:not(.is-revealed) {
	background: #c8c8c8;
	background: color-mix(in srgb, var(--cm-surface) 88%, var(--cm-accent));
}

.classic-minefield .cm-cell:focus-visible,
.classic-minefield button:focus-visible,
.classic-minefield select:focus-visible,
.classic-minefield input:focus-visible {
	outline: 3px solid var(--cm-accent);
	outline-offset: 2px;
	position: relative;
	z-index: 2;
}

.classic-minefield .cm-cell.is-revealed {
	background: #c8c8c8;
	background: color-mix(in srgb, var(--cm-surface) 94%, #fff);
	border: 1px solid var(--cm-dark);
	cursor: default;
}

.classic-minefield .cm-cell.is-flagged {
	color: #c5162e;
}

.classic-minefield .cm-cell.is-question {
	color: #111;
}

.classic-minefield .cm-cell.is-mine {
	color: #111;
}

.classic-minefield .cm-cell.is-exploded {
	background: #e53935;
	color: #fff;
}

.classic-minefield .cm-cell.is-wrong {
	background: #ffd5d5;
	color: #b00020;
}

.classic-minefield .cm-cell[data-number="1"] { color: #1546c8; }
.classic-minefield .cm-cell[data-number="2"] { color: #167328; }
.classic-minefield .cm-cell[data-number="3"] { color: #c11b17; }
.classic-minefield .cm-cell[data-number="4"] { color: #31138a; }
.classic-minefield .cm-cell[data-number="5"] { color: #7b1717; }
.classic-minefield .cm-cell[data-number="6"] { color: #087c7c; }
.classic-minefield .cm-cell[data-number="7"] { color: #111; }
.classic-minefield .cm-cell[data-number="8"] { color: #555; }

.classic-minefield .cm-status,
.classic-minefield .cm-best-time,
.classic-minefield .cm-noscript {
	font-size: 0.82rem;
	margin: 0.65rem 0 0;
	max-width: 52rem;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: center;
	width: 100%;
}

.classic-minefield .cm-status {
	font-weight: 650;
}

.classic-minefield .cm-best-time {
	margin-top: 0.2rem;
	opacity: 0.78;
}

.classic-minefield[data-cm-status="won"] .cm-status {
	color: #0b6825;
}

.classic-minefield[data-cm-status="lost"] .cm-status {
	color: #a31524;
}

.classic-minefield-editor .classic-minefield {
	pointer-events: none;
}

@media (max-width: 600px) {
	.classic-minefield {
		font-size: 15px;
		width: 100%;
	}

	.classic-minefield .cm-controls {
		align-items: stretch;
		justify-content: flex-start;
	}

	.classic-minefield .cm-field,
	.classic-minefield .cm-custom-controls {
		width: 100%;
	}

	.classic-minefield .cm-custom-controls .cm-field--number {
		flex: 1 1 4.5rem;
		width: auto;
	}

	.classic-minefield .cm-apply-custom {
		flex: 1 1 100%;
	}

	.classic-minefield .cm-machine {
		margin-inline: auto;
		padding: 7px;
	}

	.classic-minefield .cm-machine__header {
		gap: 0.4rem;
		padding: 5px;
	}

	.classic-minefield .cm-board {
		--cm-cell-size: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.classic-minefield *,
	.classic-minefield *::before,
	.classic-minefield *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.classic-minefield .cm-cell,
	.classic-minefield .cm-machine,
	.classic-minefield .cm-machine__header,
	.classic-minefield .cm-board {
		forced-color-adjust: auto;
	}
}