:root {
	--chess-ink: #18202b;
	--chess-muted: #5d6773;
	--chess-panel: #ffffff;
	--chess-border: #cfd6de;
	--chess-light: #f0d9b5;
	--chess-dark: #8f603f;
	--chess-focus: #005fcc;
	--chess-selected: #ffbf00;
}

body {
	margin: 0;
	color: var(--chess-ink);
	background: #f4f6f8;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

kbd {
	padding: .12rem .35rem;
	color: #fff;
	background: #273240;
	border-radius: .25rem;
}

.chess-intro { margin-bottom: 1.25rem; }
.chess-intro h1 { margin-bottom: .5rem; }
.chess-intro p { max-width: 70rem; }

.chess-panel {
	margin-bottom: 1.25rem;
	padding: 1.25rem;
	background: var(--chess-panel);
	border: 1px solid var(--chess-border);
	border-radius: .7rem;
	box-shadow: 0 .2rem .7rem rgba(25, 40, 60, .06);
}

.chess-panel h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.chess-panel h3 { margin-top: 1.4rem; font-size: 1.08rem; }

.chess-settings,
.chess-save-controls {
	display: grid;
	grid-template-columns: minmax(10rem, auto) minmax(12rem, 22rem);
	gap: .75rem 1rem;
	align-items: center;
}

.chess-settings .btn,
.chess-save-controls .chess-actions { grid-column: 2; justify-self: start; }

.chess-status {
	padding: .85rem 1rem;
	font-size: 1.05rem;
	font-weight: 650;
	background: #eef5ff;
	border-left: .3rem solid var(--chess-focus);
}

.chess-engine-status { color: var(--chess-muted); }
.chess-engine-status.is-ready { color: #176b31; }
.chess-engine-status.is-error { color: #9c1c1c; }

.chess-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1rem;
}

.chess-columns {
	display: grid;
	grid-template-columns: minmax(18rem, 34rem) minmax(18rem, 1fr);
	gap: 1.25rem;
}

.chess-board {
	display: grid;
	grid-template-columns: repeat(8, minmax(2.3rem, 1fr));
	width: 100%;
	max-width: 34rem;
	margin: 1rem 0;
	border: 2px solid #35281f;
}

.chess-board-row { display: contents; }

.chess-square {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	min-width: 0;
	padding: 0;
	color: #121212;
	font-size: clamp(1.45rem, 6vw, 2.5rem);
	line-height: 1;
	border: 0;
	border-radius: 0;
}

.chess-square.light { background: var(--chess-light); }
.chess-square.dark { background: var(--chess-dark); }
.chess-square:hover { filter: brightness(1.08); }
.chess-square:focus-visible {
	position: relative;
	z-index: 2;
	outline: .25rem solid var(--chess-focus);
	outline-offset: -.25rem;
}
.chess-square.is-selected { box-shadow: inset 0 0 0 .3rem var(--chess-selected); }
.chess-square.is-legal::after {
	content: "";
	width: 24%;
	aspect-ratio: 1;
	background: rgba(0, 60, 20, .65);
	border-radius: 50%;
}
.chess-square.is-legal.has-piece::after {
	position: absolute;
	width: 78%;
	background: transparent;
	border: .2rem solid rgba(0, 60, 20, .72);
}

.chess-piece-symbol {
	display: inline-block;
	line-height: 1;
}

.chess-square-status {
	min-height: 2.2rem;
	padding: .55rem .7rem;
	background: #f5f6f8;
	border: 1px solid var(--chess-border);
}

.chess-history {
	max-height: 24rem;
	padding-left: 2rem;
	overflow: auto;
}
.chess-history li { margin-bottom: .35rem; }

.chess-help summary {
	cursor: pointer;
	font-size: 1.15rem;
	font-weight: 700;
}
.chess-help ul { margin: 1rem 0 0; }

@media (max-width: 850px) {
	.chess-columns { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.chess-panel { padding: 1rem; }
	.chess-settings,
	.chess-save-controls { grid-template-columns: 1fr; }
	.chess-settings .btn,
	.chess-save-controls .chess-actions { grid-column: 1; }
	.chess-board { grid-template-columns: repeat(8, minmax(1.9rem, 1fr)); }
}

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

@media (forced-colors: active) {
	.chess-square { border: 1px solid CanvasText; }
	.chess-square.is-selected { outline: 3px solid Highlight; }
}