:root {
	/* Board colors — defaults for the 'classic' skin; js/skins.js overrides
	   these on documentElement when the active skin changes. */
	--light-square: #f0d9b5;
	--dark-square: #b58863;
	--board-border: #404040;

	/* Player UI colors */
	--white-panel-bg: #f0f0f0;
	--black-panel-bg: #d0d0d0;
	--active-border: #4a90e2;

	/* Card colors */
	--white-card-bg: #f8f8f8;
	--black-card-bg: #e0e0e0;
	--disabled-card-bg: #d0d0d0;

	/* General colors */
	--text-color: #333;
	--highlight-color: #4a90e2;
	--button-bg: #4a90e2;
	--button-hover: #3678c5;
	--button-text: #fff;
	--button-disabled-bg: #cccccc;

	/* Redraw-chip accent (limited resource, reads distinct from blue buttons) */
	--redraw-bg: #6b4ea0;
	--redraw-hover: #563d82;

	/* ── Design tokens — change once, applies everywhere ── */
	/* Spacing scale (4px base). Use these instead of ad-hoc px. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;

	/* Sizing */
	--control-height: 36px;
	--radius-pill: 20px;
	--radius-panel: 4px;
	--board-size: 480px;

	/* Elevation */
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Calculate base sizes based on viewport */
	--vh: 1vh;
	--vw: 1vw;
	--app-height: 100vh;
	/* Will be updated by JS */
}

/* Base styles */
* {
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	color: var(--text-color);
	background-color: #f5f5f5;
	padding: 20px;
	margin: 0;
	padding: 0;
	height: var(--app-height);
	overflow: hidden;
	/* Prevent scrolling */
}

.container {
	max-width: 1000px;
	margin: 0 auto;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	height: var(--app-height);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Skin-driven board colors. Overrides the hardcoded hexes in the vendored
   lib/chessboard.css (loaded earlier → these later same-specificity rules win).
   Don't edit chessboard.css itself; it's third-party. */
.white-1e1d7 { background-color: var(--light-square); }
.black-3c85d { background-color: var(--dark-square); }
.board-b72b1 { border-color: var(--board-border); }
/* Contains AI-generated edits. */