/**
 * Minesweeper board.
 *
 * Flat tiles, a warm neutral palette and CSS drawn symbols. The classic beveled
 * grey tiles, the smiley reset button and the seven segment counter of other
 * implementations are deliberately not reproduced here.
 */

.pzar-modal {
	--pzar-ms-tile: var(--pzar-surface-3);
	--pzar-ms-open: var(--pzar-surface);
	--pzar-ms-mine: #3d3a34;
	--pzar-ms-flag: #b1543a;
	--pzar-ms-flag-pole: #6d675e;
	--pzar-ms-gap: 2px;
}

@media ( prefers-color-scheme: dark ) {

	.pzar-modal {
		--pzar-ms-mine: #d6d2ca;
		--pzar-ms-flag: #d98872;
		--pzar-ms-flag-pole: #9c9992;
	}
}

.pzar-ms__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.pzar-ms__counter {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--pzar-surface-2);
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pzar-ms__counter-icon {
	position: relative;
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--pzar-ms-mine);
}

.pzar-ms__counter-icon::before {
	content: "";
	position: absolute;
	inset: -25%;
	background:
		linear-gradient( var(--pzar-ms-mine), var(--pzar-ms-mine) ) center / 14% 100% no-repeat,
		linear-gradient( var(--pzar-ms-mine), var(--pzar-ms-mine) ) center / 100% 14% no-repeat;
}

/*
 * A bordered, filled panel around the grid. Without it the board has no
 * visible edge on a large screen: it just floats inside a mostly empty
 * window and the play area is impossible to judge at a glance.
 */
.pzar-ms__frame {
	display: inline-block;
	margin: auto;
	padding: 0.6rem;
	border: 1px solid var(--pzar-line);
	border-radius: calc( var(--pzar-radius) + 4px );
	background: var(--pzar-surface-2);
}

.pzar-ms {
	/* Sized so that the widest board still fits a 375px phone without
	   scrolling; narrower screens fall back to the floor and scroll. */
	--pzar-ms-cell:
		clamp(
			1.25rem,
			calc( ( 100vw - 3rem - ( var(--pzar-ms-cols) - 1 ) * var(--pzar-ms-gap) ) / var(--pzar-ms-cols) ),
			2.75rem
		);

	display: grid;
	grid-template-columns: repeat( var(--pzar-ms-cols), var(--pzar-ms-cell) );
	gap: var(--pzar-ms-gap);
}

/*
 * Qualified with the `.pzar-ms` parent everywhere a background is set. The
 * shared button reset in frontend.css (`.pzar-modal button { background:
 * none; }`) is one class plus an element, which outranks a bare
 * `.pzar-ms__cell` class selector — without this the hidden tiles lost their
 * fill and became invisible against the page.
 */
.pzar-ms > .pzar-ms__cell {
	position: relative;
	width: var(--pzar-ms-cell);
	height: var(--pzar-ms-cell);
	border-radius: 3px;
	background: var(--pzar-ms-tile);
	/* Every cell keeps a visible edge, opened or not, so the grid reads as a
	   set of distinct buttons rather than a flat, borderless field. */
	box-shadow: inset 0 0 0 1px var(--pzar-line);
	font-size: calc( var(--pzar-ms-cell) * 0.56 );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: var(--pzar-ms-cell);
	text-align: center;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

@media ( hover: hover ) {

	.pzar-ms > .pzar-ms__cell:not( .is-open ):hover {
		filter: brightness( 1.08 );
	}
}

.pzar-ms > .pzar-ms__cell.is-open {
	background: var(--pzar-ms-open);
}

/* Number colours chosen for this plugin, not copied from anywhere. */
.pzar-ms__cell[data-count="1"] { color: #2f6f6b; }
.pzar-ms__cell[data-count="2"] { color: #4a7a35; }
.pzar-ms__cell[data-count="3"] { color: #9d3f2c; }
.pzar-ms__cell[data-count="4"] { color: #4a5aa0; }
.pzar-ms__cell[data-count="5"] { color: #8a5220; }
.pzar-ms__cell[data-count="6"] { color: #2f6f8f; }
.pzar-ms__cell[data-count="7"] { color: #6b4f8a; }
.pzar-ms__cell[data-count="8"] { color: #5c574f; }

@media ( prefers-color-scheme: dark ) {

	.pzar-ms__cell[data-count="1"] { color: #74b6ae; }
	.pzar-ms__cell[data-count="2"] { color: #98c47c; }
	.pzar-ms__cell[data-count="3"] { color: #e08a76; }
	.pzar-ms__cell[data-count="4"] { color: #9aa7e0; }
	.pzar-ms__cell[data-count="5"] { color: #d8a86a; }
	.pzar-ms__cell[data-count="6"] { color: #7ab6d0; }
	.pzar-ms__cell[data-count="7"] { color: #b79ad0; }
	.pzar-ms__cell[data-count="8"] { color: #a8a49b; }
}

/* Mine: a disc with four short spikes. */
.pzar-ms__cell.is-mine::before {
	content: "";
	position: absolute;
	inset: 18%;
	background:
		linear-gradient( var(--pzar-ms-mine), var(--pzar-ms-mine) ) center / 16% 100% no-repeat,
		linear-gradient( var(--pzar-ms-mine), var(--pzar-ms-mine) ) center / 100% 16% no-repeat;
}

.pzar-ms__cell.is-mine::after {
	content: "";
	position: absolute;
	inset: 30%;
	border-radius: 50%;
	background: var(--pzar-ms-mine);
}

.pzar-ms__cell.is-exploded {
	/* The symbol inherits this, so the mine turns light on the red tile. */
	--pzar-ms-mine: #ffffff;

	background: var(--pzar-danger);
}

/* Flag: a pennant on a slim pole. */
.pzar-ms__cell.is-flag::before {
	content: "";
	position: absolute;
	left: 34%;
	top: 20%;
	width: 9%;
	height: 58%;
	border-radius: 1px;
	background: var(--pzar-ms-flag-pole);
}

.pzar-ms__cell.is-flag::after {
	content: "";
	position: absolute;
	left: 43%;
	top: 20%;
	width: 30%;
	height: 26%;
	background: var(--pzar-ms-flag);
	clip-path: polygon( 0 0, 100% 50%, 0 100% );
}

.pzar-ms__cell.is-wrong {
	background: var(--pzar-danger-soft);
}

.pzar-ms__cell.is-wrong::after {
	background: var(--pzar-muted);
}