/* Serial-Chess.css */

:root {
	--bg: rgba(11, 15, 20, 0.0);
	--fg: rgba(230, 237, 243, 1);
	--muted: rgba(159, 179, 200, 0.6);
	--accent: rgba(125, 211, 252, 0.6);
	--card: rgba(17, 24, 39, 0.6);
	--card2: rgba(15, 23, 42, 0.6);
	--good: rgba(52, 211, 153, 0.95);
	--warn: rgba(251, 191, 36, 0.95);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	/* background: var(--bg); */
	color: var(--fg);
	font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

header {
	padding: 28px 20px 10px;
	text-align: center;
	/* background: linear-gradient(180deg, #0b1220 0%, rgba(11,15,20,0) 100%); */
	border-bottom: 1px solid #1f2937;
}

h1 {
	margin: 0 0 8px;
	font-size: 2rem;
}

.sub {
	color: var(--muted);
	font-size: 0.95rem;
}

main {
	max-width: 950px;
	margin: 0 auto;
	padding: 22px 16px 60px;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 20px;
}

nav {
	position: sticky;
	top: 12px;
	align-self: start;
	background: var(--card);
	border: 1px solid #1f2937;
	border-radius: 14px;
	padding: 14px 14px;
}

nav h2 {
	margin: 4px 0 8px;
	font-size: 1rem;
	color: var(--accent);
}

nav a {
	display: block;
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--fg);
	text-decoration: none;
	font-size: 0.95rem;
}

nav a:hover {
	/* background: #0e1626; */
}

section {
	background: radial-gradient(80% 140% at 20% -10%, #0f1b2e 0%, var(--card2) 45%, var(--card) 100%);
	border: 1px solid #1f2937;
	border-radius: 16px;
	padding: 18px;
	margin-bottom: 18px;
}

h2 {
	margin: 0 0 8px;
	font-size: 1.3rem;
	color: var(--accent);
}

h3 {
	margin: 16px 0 8px;
	font-size: 1.05rem;
}

p {
	margin: 8px 0;
}

ul, ol {
	margin: 8px 0 8px 20px;
}

.tip {
	background: rgba(52, 211, 153, 0.12);
	border:1px solid rgba(52,211,153,0.3);
	padding:10px 12px;
	border-radius:12px;
}

.warn {
	background: rgba(251, 191, 36, 0.12);
	border:1px solid rgba(251,191,36,0.3);
	padding:10px 12px;
	border-radius:12px;
}

code,kbd {
	background:#0c1422;
	padding:2px 6px;
	border:1px solid #1f2937;
	border-radius:6px;
}

footer {
	text-align:center;
	color:var(--muted);
	padding: 24px 12px 40px;
}

.board {
	display:grid;
	grid-template-columns: repeat(8, 32px);
	gap: 0;
	border: 2px solid #1f2937;
	border-radius: 8px;
	overflow: hidden;
	user-select: none;
	width: fit-content;
	background: #1f2937;
	margin: 8px 0;
}

.sq {
	width: 32px;
	height: 32px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
}

.l {
	background: #b58863;
	color:#fff;
}

.d {
	background: #f0d9b5;
	color:#fff;
}

.legend {
	font-size: 0.85rem;
	color: var(--muted);
}