:root{
	--bg: #020617;
	--accent: #38bdf8;
	--card-bg: rgba(30,41,59,0.45);
	--border-light: rgba(255,255,255,0.06);
	--board-bg: #0b1220;
	--light-square: #efe6c9; /* lighter beige for contrast */
	--dark-square: #3e8f61;  /* lighter green for better contrast */
	--piece-white: #38bdf8; /* blue for white pieces */
	--piece-black: #071018; /* near-black for black pieces */
}

*{box-sizing:border-box;margin:0;padding:0}

/* container & positioning (kept local to this page) */
body{background:var(--bg);color:#e6eef6;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;padding:18px}
main{display:flex;justify-content:center}
.glass{background:var(--card-bg);backdrop-filter:blur(10px);padding:18px;border-radius:14px;border:1px solid var(--border-light);box-shadow:0 8px 30px rgba(2,6,23,0.6);display:inline-block}

/* board */
#board{display:grid;grid-template-columns:repeat(8,64px);grid-template-rows:repeat(8,64px);gap:0;background:var(--board-bg);border:3px solid rgba(56,189,248,0.08);padding:6px;border-radius:8px;box-shadow:0 10px 30px rgba(56,189,248,0.06)}
.square{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:36px;cursor:pointer;user-select:none;border-radius:6px;transition:transform .06s ease, background .12s;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,0.25)}
.square.light{background:var(--light-square)}
.square.dark{background:var(--dark-square)}
.square.highlight{outline:3px solid rgba(56,189,248,0.95);box-shadow:0 8px 24px rgba(56,189,248,0.12);transform:translateY(-2px)}

/* piece colors independent from square color */
.piece{font-size:36px;line-height:1;display:inline-block}
.piece.white{color:var(--piece-white);font-weight:800;text-shadow:0 1px 0 rgba(0,0,0,0.2)}
.piece.black{color:var(--piece-black);font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,0.02)}

/* controls */
#controls{margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
#controls label{font-size:0.95rem;color:rgba(230,238,246,0.85);margin-left:4px}
#controls select, #controls input{
	padding:6px 8px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.06);
	background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
	color:inherit;
	min-height:34px;
	-webkit-appearance:none;appearance:none;
	font-size:0.95rem;
	min-width:84px;
}
#controls select{cursor:pointer;padding-right:26px}
#controls select:focus, #controls input:focus{outline:2px solid rgba(56,189,248,0.12);box-shadow:0 6px 18px rgba(56,189,248,0.06)}
#startGame,#newGame{padding:8px 12px;border-radius:10px;border:none;background:var(--accent);color:var(--bg);font-weight:700;cursor:pointer}
#startGame:hover,#newGame:hover{box-shadow:0 0 22px rgba(56,189,248,0.18);transform:translateY(-3px)}

/* small devices: make controls full-width rows */
@media (max-width:520px){
	#controls{justify-content:center;flex-wrap:wrap}
	#controls select, #controls input{width:100%;max-width:220px}
	#startGame,#newGame{width:100%;max-width:220px}
}

/* responsive */
@media (max-width:700px){
	#board{grid-template-columns:repeat(8,44px);grid-template-rows:repeat(8,44px)}
	.square{width:44px;height:44px;font-size:20px}
}