:root {
	--bg: #2b2b2b;
	--bg-dark: #232323;
	--bg-canvas: #252525;
	--bg-panel: #333;
	--border: #3a3a3a;
	--border-subtle: #2e2e2e;
	--text: #d4d4d4;
	--text-muted: #999;
	--text-dim: #888;
	--text-soft: #aaa;
	--text-light: #bbb;
	--text-placeholder: #666;
	--green: #5e8c61;
	--green-dark: #4a7c4f;
	--green-bg: #2a3a2a;
	--red: #cc9999;
	--red-bg: #3a2a2a;
	--blue: #9999cc;
	--blue-bg: #2a2a3a;
	--error: #c45;
	--hover: #4a4a4a;
}

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

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: var(--bg);
	color: var(--text);
}

.header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 16px 32px; background: var(--bg-dark); border-bottom: 2px solid var(--border);
}
.header h1 {
	font-size: 28px; color: var(--green); letter-spacing: 2px; cursor: pointer;
}
.header-right { display: flex; align-items: center; gap: 16px; }
.header-right .username { color: var(--text-soft); font-size: 16px; }

button {
	padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer;
	font-size: 16px; font-weight: 600; transition: background 0.2s;
}
.btn-primary { background: var(--green-dark); color: #eee; }
.btn-primary:hover { background: var(--green); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--hover); }
.btn-small { padding: 6px 16px; font-size: 14px; }

canvas { background: var(--bg-canvas); border-radius: 8px; }

.recenter-btn {
	position: absolute; bottom: 12px; right: 12px;
	width: 36px; height: 36px; border: none; border-radius: 6px;
	background: rgba(58, 58, 58, 0.8); color: var(--text-muted); font-size: 20px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	padding: 0;
}
.recenter-btn:hover { background: rgba(74, 74, 74, 1); color: var(--text); }

.game-list {
	background: var(--bg-dark); border-radius: 8px;
	border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;
}
.game-list-header {
	padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text-dim);
	border-bottom: 1px solid var(--border);
}
.game-list-items { flex: 1; overflow-y: auto; }

.game-entry {
	display: flex; align-items: center; padding: 10px 14px;
	cursor: pointer; border-bottom: 1px solid var(--border-subtle); font-size: 14px;
}
.game-entry:hover { background: var(--border-subtle); }
.game-entry.selected { background: var(--green-bg); }
.game-entry .p1 { flex: 1; text-align: left; }
.game-entry .moves { flex: 0 0 auto; text-align: center; color: var(--text-dim); font-size: 12px; padding: 0 8px; }
.game-entry .p2 { flex: 1; text-align: right; }
.game-entry .winner { color: var(--green); }
.game-entry .draw { color: var(--text-placeholder); }