:root {
	color-scheme: light dark;
	font-family: Georgia, "Times New Roman", serif;
	font-synthesis: none;
	--background: #fafafa;
	--paper: #fff;
	--revealed: var(--paper);
	--ink: #111;
	--muted: #737373;
	--line: #d1d1d1;
	--grid-line: var(--ink);
	--focus: #2457a6;
	--covered: #dededb;
	--covered-hover: #d4d4d0;
	--inactive: #b8b8b4;
	--loading-overlay: rgb(250 250 250 / 90%);
	--path-pending: #ddd;
	--path-current: #888;
	--hint: #dfd39f;
	--hint-hover: #d5c88f;
	--hint-ink: #5b522b;
	--hint-line: #9b8c52;
	--danger: #d7574f;
	--on-danger: #fff;
	--danger-ink: #75251f;
	--danger-soft: #f8e3e1;
	--success: #55713d;
	--success-effect: #9bad8b;
	--marked-safe: #edf4ee;
	--marked-safe-hover: #e2ede4;
	--marked-safe-ink: #23472c;
	--marked-safe-line: #9db5a1;
	--marked-mine: #d2a4a0;
	--marked-mine-hover: #c99590;
	--marked-mine-ink: #5d2925;
	--marked-mine-line: #9d6762;
	--mine: #f3d5d2;
	--mine-ink: #8f302b;
	--flag-ink: #8a361f;
	--incorrect: #c77e78;
	--incorrect-line: #8f4944;
	--clue-1: #2055a5;
	--clue-2: #317441;
	--clue-3: #a33c32;
	--clue-4: #6941a5;
	--clue-5: #7a2828;
	--safe-label: #477452;
	--mine-label: #9a504a;
	--active-hint-line: #8f8050;
	--active-hint-inset: #b5a465;
	--tutorial: #d99019;
	--tutorial-ring: #fff2bd;
	--skip: #f3eee5;
	--skip-hover: #ebe2d4;
	--skip-ink: #684f31;
	--skip-line: #a98c68;
	--scratch-graphite: #282b2a;
	--scratch-blue: #2766a3;
	--scratch-red: #b94c43;
	--app-width: 420px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #171817;
		--paper: #222422;
		--revealed: #4b4e48;
		--ink: #d2d2cc;
		--muted: #aaa9a2;
		--line: #4b4d49;
		--grid-line: #747770;
		--focus: #8bb7ff;
		--covered: #343733;
		--covered-hover: #3e423d;
		--inactive: #1d1f1d;
		--loading-overlay: rgb(23 24 23 / 92%);
		--path-pending: #3f413e;
		--path-current: #9a9b96;
		--hint: #655e3b;
		--hint-hover: #746c43;
		--hint-ink: #fff1a8;
		--hint-line: #91834b;
		--danger: #e16d64;
		--on-danger: #171817;
		--danger-ink: #ffc2bd;
		--danger-soft: #472624;
		--success: #91b875;
		--success-effect: #76935f;
		--marked-safe: #394a3c;
		--marked-safe-hover: #435647;
		--marked-safe-ink: #b9e7c0;
		--marked-safe-line: #557860;
		--marked-mine: #49302e;
		--marked-mine-hover: #563936;
		--marked-mine-ink: #ffc1ba;
		--marked-mine-line: #8a5651;
		--mine: #4a2927;
		--mine-ink: #ffaaa3;
		--flag-ink: #ff9b82;
		--incorrect: #934f4a;
		--incorrect-line: #e18178;
		--clue-1: #8bb7ff;
		--clue-2: #8fd49c;
		--clue-3: #ff9e94;
		--clue-4: #c4a2ff;
		--clue-5: #ff8585;
		--safe-label: #9fd4aa;
		--mine-label: #e9968f;
		--active-hint-line: #a89858;
		--active-hint-inset: #84783f;
		--tutorial: #f1b84d;
		--tutorial-ring: #5f481d;
		--skip: #3d352b;
		--skip-hover: #4a4033;
		--skip-ink: #e8c99f;
		--skip-line: #806b50;
		--scratch-graphite: #eeeae2;
		--scratch-blue: #76b5eb;
		--scratch-red: #f08c82;
	}
}

*, *::before, *::after {
	box-sizing: border-box;
}
[x-cloak] {
	display: none !important;
}

html {
	min-width: 320px;
	background: var(--background);
}

body {
	min-height: 100vh;
	margin: 0;
	background: var(--background);
	color: var(--ink);
	font-size: 15px;
	line-height: 1.35;
	-webkit-tap-highlight-color: transparent;
}

button, select {
	color: inherit;
	font: 14px ui-sans-serif, system-ui, sans-serif;
	cursor: pointer;
	user-select: none;
}
button:not(.cell) {
	transition: transform 90ms ease-out, filter 140ms ease-out;
}
button:not(.cell):hover:not(:disabled) {
	filter: brightness(.96);
}
button:not(.cell):active:not(:disabled) {
	transform: translateY(1px) scale(.985);
	filter: brightness(.9);
}
button:disabled {
	cursor: default;
}
button:focus-visible, select:focus-visible, a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.site-header,
.app-shell {
	width: min(var(--app-width), calc(100% - 20px));
	margin-inline: auto;
}

.site-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 0 9px;
	border-bottom: 2px solid var(--ink);
}

.brand {
	color: var(--ink);
	font: 800 23px/1 ui-sans-serif, system-ui, sans-serif;
	letter-spacing: -.04em;
	text-decoration: none;
}

.mode-switcher {
	display: flex;
	gap: 10px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mode-switcher button {
	padding: 3px 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

.mode-switcher button:hover {
	color: var(--ink);
}
.mode-switcher button:disabled {
	color: var(--line);
}
.mode-switcher button.active {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.sound-toggle {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 4px;
	border: 1px solid var(--line);
	background: var(--paper);
}

.sound-toggle:hover {
	border-color: var(--ink);
}
.sound-toggle.muted {
	color: var(--muted);
}
.sound-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.app-shell {
	padding: 10px 0 calc(28px + env(safe-area-inset-bottom));
}

.game-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}

.game-heading h1 {
	margin: 0;
	font-size: 19px;
	line-height: 1.1;
}
.game-heading p {
	margin: 3px 0 0;
	color: var(--muted);
	font: 12px ui-sans-serif, system-ui, sans-serif;
}
.heading-copy {
	min-width: 0;
}
.share-puzzle {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 5px;
	border: 0;
	background: transparent;
	color: var(--muted);
}
.share-puzzle:hover:not(:disabled) {
	color: var(--ink);
}
.share-puzzle:disabled {
	color: var(--line);
	opacity: .7;
}
.share-puzzle svg {
	width: 18px;
	height: 18px;
	fill: var(--paper);
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.heading-share {
	flex: none;
	margin-left: auto;
}

.timer {
	text-align: right;
}
.timer span {
	display: block;
	color: var(--muted);
	font: 11px ui-sans-serif, system-ui, sans-serif;
}
.timer strong {
	display: block;
	font: 700 18px/1.15 ui-sans-serif, system-ui, sans-serif;
	font-variant-numeric: tabular-nums;
}

.difficulty-picker {
	margin-bottom: 10px;
}
.study-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 104px;
	gap: 8px;
}
.difficulty-picker select {
	width: 100%;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
}

.difficulty-description {
	margin: 7px 1px 0;
	color: var(--muted);
	font: 11px/1.4 ui-sans-serif, system-ui, sans-serif;
}

.study-streak {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 2px;
	height: 44px;
	padding: 5px 10px;
	border: 1px solid var(--line);
	background: var(--paper);
	font-family: ui-sans-serif, system-ui, sans-serif;
}

.study-streak > span {
	color: var(--muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	text-transform: uppercase;
}

.study-streak > strong {
	width: 6ch;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
}

.challenge-intro {
	padding: 0 0 4px;
}

.challenge-invitation {
	margin-bottom: 12px;
}

.challenge-invitation h2 {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.1;
}

.challenge-target {
	margin: -2px 0 12px;
	font-family: ui-sans-serif, system-ui, sans-serif;
}

.challenge-target strong {
	font-variant-numeric: tabular-nums;
}

.challenge-difficulty-grid {
	display: grid;
	grid-template-columns: repeat(var(--challenge-invitation-difficulty-count), minmax(0, 1fr));
	gap: 6px;
}

.challenge-difficulty {
	display: grid;
	gap: 3px;
	min-width: 0;
	padding: 10px 6px;
	border: 1px solid var(--line);
	background: var(--paper);
	font-family: ui-sans-serif, system-ui, sans-serif;
	text-align: center;
}

.challenge-difficulty strong {
	font-size: 11px;
}

.challenge-difficulty span {
	color: var(--muted);
	font-size: 9px;
}

.challenge-mode-picker {
	display: grid;
	gap: 7px;
	margin-bottom: 12px;
}

.challenge-mode-picker button {
	display: grid;
	gap: 4px;
	padding: 9px 10px;
	border: 1px solid var(--line);
	outline: 2px solid transparent;
	outline-offset: 2px;
	background: var(--paper);
	text-align: left;
	transition: transform 90ms ease-out, filter 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, outline-color 140ms ease-out;
}

.challenge-mode-picker button:hover {
	border-color: color-mix(in srgb, var(--muted) 40%, var(--line));
}
.challenge-mode-picker button.active {
	border-color: color-mix(in srgb, var(--muted) 72%, var(--line));
	box-shadow: inset 2px 0 color-mix(in srgb, var(--muted) 72%, var(--line));
}
.challenge-mode-picker button:focus-visible {
	outline-color: color-mix(in srgb, var(--focus) 65%, var(--background));
}
.challenge-mode-heading {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.challenge-mode-heading strong {
	font-size: 12px;
}
.challenge-mode-heading > span,
.challenge-mode-route {
	color: var(--muted);
	font-size: 10px;
}

.tutorial-progress {
	color: var(--muted);
	font: 700 10px ui-sans-serif, system-ui, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.challenge-kicker {
	display: none;
	color: var(--muted);
	font: 700 10px ui-sans-serif, system-ui, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.challenge-intro > p {
	max-width: 440px;
	margin: 0;
	color: var(--muted);
	font: 13px/1.5 ui-sans-serif, system-ui, sans-serif;
}

.challenge-start {
	width: 100%;
	min-height: 46px;
	margin-top: 18px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
}

.challenge-start:disabled {
	border-color: var(--line);
	background: var(--covered);
	color: var(--muted);
}
.challenge-ready {
	display: block;
	margin-top: 7px;
	color: var(--success);
	font: 11px ui-sans-serif, system-ui, sans-serif;
	text-align: center;
}

.challenge-finish {
	position: relative;
	isolation: isolate;
	padding: 24px 0 4px;
	text-align: center;
}

.challenge-finish h2 {
	margin: 0 0 6px;
	font-size: 32px;
	line-height: 1;
}

.challenge-finish > p {
	margin: 0;
	color: var(--muted);
	font: 13px ui-sans-serif, system-ui, sans-serif;
}

.victory-effect {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin: 4px auto 22px;
	border: 2px solid var(--success);
	border-radius: 50%;
	background: var(--paper);
	color: var(--success);
	box-shadow: 0 0 0 8px var(--background), 0 0 0 9px var(--success-effect);
	animation: victory-pulse 1400ms ease-in-out infinite alternate;
	user-select: none;
}

.victory-effect::before {
	position: absolute;
	inset: -28px;
	z-index: -1;
	background: repeating-conic-gradient(from 0deg, var(--success-effect) 0 2deg, transparent 2deg 18deg);
	content: '';
	-webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
	mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
	animation: victory-rays 14s linear infinite;
}

.victory-effect span {
	font: 800 43px/1 ui-sans-serif, system-ui, sans-serif;
}

.victory-effect.failed {
	border-color: var(--danger);
	color: var(--danger);
	box-shadow: 0 0 0 8px var(--background), 0 0 0 9px var(--danger);
}

.victory-effect.failed::before {
	background: repeating-conic-gradient(from 0deg, var(--danger) 0 2deg, transparent 2deg 18deg);
}

.finish-scorecard {
	max-width: 340px;
	margin: 22px auto 0;
	padding: 7px;
	border: 1px solid var(--line);
	background: var(--paper);
	box-shadow: 0 10px 30px rgb(0 0 0 / 6%);
}

.finish-scorecard.beaten {
	border-color: color-mix(in srgb, var(--success) 55%, var(--line));
	box-shadow: inset 0 3px var(--success), 0 10px 30px rgb(0 0 0 / 7%);
}

.finish-time {
	padding: 18px 14px 20px;
}

.finish-time span {
	display: block;
	color: var(--muted);
	font: 700 10px ui-sans-serif, system-ui, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.finish-time strong {
	display: block;
	margin-top: 3px;
	font: 800 34px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
	font-variant-numeric: tabular-nums;
}

.finish-comparison {
	display: grid;
	gap: 10px;
	padding: 13px 15px 12px;
	background: color-mix(in srgb, var(--covered) 58%, var(--paper));
}

.challenge-time-result {
	display: block;
	font: 700 17px/1.2 Georgia, "Times New Roman", serif;
}

.their-time {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	color: var(--muted);
	font-family: ui-sans-serif, system-ui, sans-serif;
}

.their-time span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.their-time strong {
	font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
	font-variant-numeric: tabular-nums;
}

.challenge-finish .challenge-start {
	margin-top: 16px;
}

@keyframes victory-pulse {
	from { transform: scale(.97); }
	to { transform: scale(1.04); }
}

@keyframes victory-rays {
	to { transform: rotate(1turn); }
}

.challenge-path {
	display: grid;
	grid-template-columns: repeat(var(--challenge-difficulty-count), 1fr);
	gap: 7px;
	margin: 1px 0 10px;
}

.path-label {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font: 10px ui-sans-serif, system-ui, sans-serif;
}

.path-steps {
	display: grid;
	grid-template-columns: repeat(var(--challenge-puzzle-count), 1fr);
	gap: 3px;
}
.path-step {
	height: 5px;
	background: var(--path-pending);
}
.path-step.current {
	background: var(--path-current);
}
.path-step.complete {
	background: var(--ink);
}
.path-step.failed {
	background: var(--danger);
}

.board-card {
	background: transparent;
}

.minefield-shell {
	position: relative;
}
.minefield-shell.scratch-mode {
	box-shadow: 0 0 0 2px var(--focus);
}

.minefield {
	display: grid;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--grid-line);
	border-left: 1px solid var(--grid-line);
	background: var(--grid-line);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}

.tutorial-bubble {
	position: absolute;
	z-index: 3;
	padding: 11px 12px 12px;
	border: 2px solid var(--tutorial);
	border-radius: 9px;
	background: var(--paper);
	box-shadow: 3px 4px 0 color-mix(in srgb, var(--tutorial-ring) 85%, transparent);
	user-select: none;
}

.tutorial-bubble::before {
	position: absolute;
	top: var(--tutorial-pointer-y);
	width: 0;
	height: 0;
	border-block: 9px solid transparent;
	content: '';
}

.tutorial-bubble-right {
	top: calc(var(--tutorial-top) + 4px);
	right: 8px;
	left: calc(var(--tutorial-right-edge) + 12px);
	--tutorial-pointer-y: 12px;
}

.tutorial-bubble-right::before {
	right: 100%;
	border-right: 12px solid var(--tutorial);
}

.tutorial-bubble-left {
	right: calc(var(--tutorial-space-right) + 12px);
	bottom: calc(var(--tutorial-space-below) + 4px);
	left: 8px;
	--tutorial-pointer-y: calc(100% - 30px);
}

.tutorial-bubble-left::before {
	left: 100%;
	border-left: 12px solid var(--tutorial);
}

.tutorial-bubble-below {
	top: calc(var(--tutorial-bottom-edge) + 12px);
	right: 8px;
	left: 8px;
}

.tutorial-bubble-below::before {
	bottom: 100%;
	left: calc(var(--tutorial-target-center) - 17px);
	border: 0;
	border-right: 9px solid transparent;
	border-bottom: 12px solid var(--tutorial);
	border-left: 9px solid transparent;
}

.tutorial-bubble h2 {
	margin: 4px 0 3px;
	font-size: clamp(14px, 4.5vw, 18px);
}

.tutorial-bubble p {
	margin: 0;
	color: var(--muted);
	font: 11px/1.4 ui-sans-serif, system-ui, sans-serif;
}

.scratch-canvas {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: .88;
	pointer-events: none;
}

.scratch-canvas.active {
	cursor: crosshair;
	pointer-events: auto;
	touch-action: none;
}
.scratch-canvas.erasing {
	cursor: cell;
}
.board-loading {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	border: 1px solid var(--ink);
	background: var(--loading-overlay);
	color: var(--ink);
	text-align: center;
}

.board-loading strong {
	font: 800 15px ui-sans-serif, system-ui, sans-serif;
}

.board-loading > span:last-child {
	color: var(--muted);
	font: 11px ui-sans-serif, system-ui, sans-serif;
}

.board-loading-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--line);
	border-top-color: var(--ink);
	border-radius: 50%;
	animation: board-loading-spin 700ms linear infinite;
}

@keyframes board-loading-spin {
	to { transform: rotate(1turn); }
}

.cell {
	display: grid;
	place-items: center;
	min-width: 0;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--grid-line);
	border-bottom: 1px solid var(--grid-line);
	border-radius: 0;
	background: var(--covered);
	color: var(--ink);
	font: 800 clamp(12px, calc(44vw / var(--columns)), 23px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-touch-callout: none;
}

.cell:hover:not(:disabled):not(.revealed) {
	background: var(--covered-hover);
}
.cell:active:not(:disabled):not(.revealed) {
	filter: brightness(.94);
}
.cell:focus-visible {
	position: relative;
	z-index: 2;
	outline-width: 3px;
	outline-offset: -3px;
}
.cell:disabled {
	opacity: 1;
}
.cell.inactive {
	background: var(--inactive);
}
.cell.revealed {
	background: var(--revealed);
	cursor: default;
}
.cell.flagged {
	color: var(--flag-ink);
}
.cell.marked-safe {
	background: var(--marked-safe);
	color: var(--marked-safe-ink);
	box-shadow: inset 0 0 0 1px var(--marked-safe-line);
}
.cell.marked-mine {
	background: var(--marked-mine);
	color: var(--marked-mine-ink);
	box-shadow: inset 0 0 0 1px var(--marked-mine-line);
}
.cell.marked-safe:hover:not(:disabled) {
	background: var(--marked-safe-hover);
}
.cell.marked-mine:hover:not(:disabled) {
	background: var(--marked-mine-hover);
}
.cell.hinted {
	background: var(--hint);
	color: var(--hint-ink);
	box-shadow: inset 0 0 0 1px var(--hint-line);
	animation: hint-reveal 180ms ease-out;
}
.cell.hinted:hover:not(:disabled) {
	background: var(--hint-hover);
}
@keyframes hint-reveal {
	from {
		background: var(--covered);
		color: transparent;
		box-shadow: inset 0 0 0 1px transparent;
	}
}
.cell.tutorial-target {
	position: relative;
	z-index: 1;
	box-shadow: inset 0 0 0 3px var(--tutorial), 0 0 0 3px var(--tutorial-ring);
	animation: tutorial-target 900ms ease-in-out infinite alternate;
}
.cell.mine {
	background: var(--mine); color: var(--mine-ink);
}
.cell.incorrect-guess {
	z-index: 1;
	background: var(--incorrect);
	color: var(--on-danger);
	box-shadow: inset 0 0 0 2px var(--incorrect-line);
	animation: incorrect-guess 600ms ease-in-out;
}
.cell.incorrect-guess:hover:not(:disabled) {
	background: var(--incorrect);
}
.cell.detonated {
	background: var(--danger);
	color: var(--on-danger);
	box-shadow: none;
}
.cell.clue-1 { color: var(--clue-1); }
.cell.clue-2 { color: var(--clue-2); }
.cell.clue-3 { color: var(--clue-3); }
.cell.clue-4 { color: var(--clue-4); }
.cell.clue-5 { color: var(--clue-5); }
.cell.clue-6 { color: var(--clue-5); }

@keyframes incorrect-guess {
	0%, 100% { transform: translateX(0); }
	18%, 54% { transform: translateX(-4px); }
	36%, 72% { transform: translateX(4px); }
}

@keyframes tutorial-target {
	from { filter: brightness(1); }
	to { filter: brightness(1.12); }
}

.study-status,
.result-banner {
	min-height: 52px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.result-banner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 12px;
}

.study-status strong, .study-status span,
.result-banner strong, .result-banner span {
	display: block;
}
.study-status strong,
.result-banner strong {
	font: 700 14px ui-sans-serif, system-ui, sans-serif;
}
.study-status span,
.result-banner span {
	margin-top: 2px;
	color: var(--muted);
	font: 11px ui-sans-serif, system-ui, sans-serif;
}
.result-banner button,
.board-actions button {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
}

.game-controls {
	margin-top: 12px;
}
.action-switcher {
	display: block;
}
.board-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.board-actions.challenge-actions { grid-template-columns: 1fr; }
.board-actions.shared-actions { grid-template-columns: 1fr; }
.board-actions.tutorial-actions { grid-template-columns: 1fr; }
.action-switch,
.board-actions button {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
}

.action-switch {
	display: grid;
	grid-template-columns: minmax(64px, 1fr) 28px minmax(64px, 1fr);
	align-items: center;
	min-width: 224px;
	padding: 4px 8px;
	border-color: var(--ink);
}
.action-mapping {
	display: grid;
	gap: 1px;
	text-align: left;
}
.action-mapping:last-child {
	text-align: right;
}
.action-mapping small {
	color: var(--muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	text-transform: uppercase;
}
.action-mapping strong {
	font-size: 12px;
	line-height: 1.2;
}
.action-mapping i {
	margin-right: 4px;
	font-style: normal;
}
.action-mapping.safe strong {
	color: var(--safe-label);
}
.action-mapping.mine strong {
	color: var(--mine-label);
}
.switch-arrows {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: auto;
	border: 1px solid var(--line);
	background: var(--background);
	font-size: 13px;
	transition: transform 120ms ease, background 120ms ease;
}
.action-switch:hover .switch-arrows {
	background: var(--covered);
}
.action-switch[aria-checked="true"] .switch-arrows {
	transform: rotate(180deg);
}
.board-actions button {
	padding: 0 16px;
}
.board-actions button.secondary:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--ink) 45%, var(--line));
	background: color-mix(in srgb, var(--paper) 82%, var(--covered));
}
.board-actions button.secondary.active {
	border-color: var(--active-hint-line);
	background: var(--hint);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--active-hint-inset);
}
.board-actions button.secondary.active:hover {
	background: var(--hint-hover);
}
.board-actions button.give-up-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	touch-action: none;
	transition: transform 90ms ease-out, filter 140ms ease-out, border-color 160ms ease;
}
.give-up-label {
	position: relative;
	z-index: 1;
}
.give-up-progress {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--danger-soft);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease-out;
	pointer-events: none;
}
.give-up-progress::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 26px;
	height: 100%;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--danger) 45%, transparent));
	content: '';
}
.board-actions button.give-up-button.is-holding {
	border-color: var(--danger);
}
.give-up-button.is-holding .give-up-progress {
	transform: scaleX(1);
	transition-duration: var(--give-up-duration, 900ms);
	transition-timing-function: linear;
}
.board-actions button.primary {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}
.board-actions button.skip {
	border-color: var(--skip-line);
	background: var(--skip);
	color: var(--skip-ink);
}
.board-actions button.skip:hover {
	background: var(--skip-hover);
}
.board-actions.is-searching button:disabled {
	opacity: .42;
}
.result-banner button {
	width: 100%;
}
.result-banner button:disabled,
.board-actions button:disabled {
	border-color: var(--line);
	background: var(--covered);
	color: var(--muted);
	box-shadow: none;
	opacity: .65;
}

.input-help-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 24px;
	margin-top: 8px;
}
.input-help {
	min-width: 0;
	margin: 0;
	color: var(--muted);
	font: 11px ui-sans-serif, system-ui, sans-serif;
	text-align: left;
}
.board-utilities {
	display: flex;
	flex: none;
	align-items: center;
	gap: 3px;
}
.scratch-tools,
.scratch-options {
	display: flex;
	align-items: center;
}
.scratch-tools {
	min-height: 40px;
	border: 1px solid transparent;
}
.scratch-tools.active {
	border-color: var(--line);
	background: var(--paper);
}
.scratch-options {
	gap: 2px;
	padding-right: 3px;
}
.scratch-tools button {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--muted);
}
.scratch-tools button:hover:not(:disabled) {
	color: var(--ink);
}
.scratch-tools .scratch-toggle {
	grid-template-columns: 16px auto;
	gap: 4px;
	padding-inline: 5px 7px;
	font-size: 11px;
	font-weight: 700;
}
.scratch-toggle.active {
	color: var(--ink);
}
.scratch-eraser.active {
	background: var(--covered);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line);
}
.scratch-tools svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}
.scratch-eraser svg {
	transition: width 120ms ease, height 120ms ease;
}
.scratch-eraser.active svg {
	width: 20px;
	height: 20px;
}
.scratch-tools button.scratch-color {
	position: relative;
	min-width: 28px;
	width: 28px;
	border-radius: 4px;
}
.scratch-color::before {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--scratch-color);
	content: '';
	transition: width 120ms ease, height 120ms ease;
}
.scratch-color.graphite {
	--scratch-color: var(--scratch-graphite);
}
.scratch-color.blue {
	--scratch-color: var(--scratch-blue);
}
.scratch-color.red {
	--scratch-color: var(--scratch-red);
}
.scratch-tools button.scratch-color[aria-pressed="true"] {
	background: var(--covered);
	box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 12%);
}
.scratch-color[aria-pressed="true"]::before {
	width: 20px;
	height: 20px;
}
.scratch-tools button:disabled {
	opacity: .3;
}
.engine-error {
	margin: 0 0 10px;
	padding: 9px 10px;
	border: 1px solid var(--danger);
	background: var(--danger-soft);
	color: var(--danger-ink);
	font: 12px ui-sans-serif, system-ui, sans-serif;
}

.share-feedback {
	position: fixed;
	right: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom));
	z-index: 10;
	margin: 0;
	padding: 9px 13px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	font: 700 12px ui-sans-serif, system-ui, sans-serif;
	transform: translateX(50%);
	box-shadow: 0 3px 14px rgb(0 0 0 / 18%);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.board-loading-spinner {
		animation: none;
	}
}