/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*, *::before, *::after {
	box-sizing: border-box;
}


/* Theme System - Light and Dark Mode Variables */

/* Dark Theme */
:root {
	/* Color Scheme */
	color-scheme: dark;
	
	/* Background Colors */
	--bg-canvas: #0d1117;
	--bg-canvas-inset: #010409;
	--bg-canvas-subtle: #161b22;
	--bg-surface: #0d1117;
	--bg-surface-inset: #010409;
	--bg-surface-subtle: #161b22;
	--bg-overlay: #161b22;
	--bg-header: #0d1117;
	--bg-sidebar: #0d1117;
	
	/* Border Colors */
	--border-default: #30363d;
	--border-muted: #21262d;
	--border-subtle: #21262d;
	--border-accent: #aaafb4;
	
	/* Text Colors */
	--fg-default: #f0f6fc;
	--fg-muted: #8b949e;
	--fg-subtle: #6e7681;
	--fg-on-emphasis: #ffffff;
	
	/* Accent Colors */
	--accent-fg: #58a6ff;
	--accent-emphasis: #1f6feb;
	--accent-muted: rgba(88, 166, 255, 0.4);
	--accent-subtle: rgba(88, 166, 255, 0.1);
	
	/* Success Colors */
	--success-fg: #3fb950;
	--success-emphasis: #238636;
	--success-muted: rgba(63, 185, 80, 0.4);
	--success-subtle: rgba(63, 185, 80, 0.1);
	
	/* Button Colors */
	--btn-primary-bg: #238636;
	--btn-primary-hover-bg: #2ea043;
	--btn-primary-active-bg: #1a7f37;
	--btn-primary-fg: #ffffff;
	--btn-primary-border: rgba(240, 246, 252, 0.1);
	
	--btn-default-bg: #21262d;
	--btn-default-hover-bg: #30363d;
	--btn-default-active-bg: #282e33;
	--btn-default-fg: #f0f6fc;
	--btn-default-border: rgba(240, 246, 252, 0.1);
	
	/* Form Colors */
	--input-bg: #0d1117;
	--input-border: #30363d;
	--input-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2);
	
	/* Shadow */
	--shadow-small: 0 1px 0 rgba(1, 4, 9, 0.04);
	--shadow-medium: 0 3px 6px rgba(140, 149, 159, 0.15);
	--shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2);
	--shadow-extra-large: 0 12px 28px rgba(140, 149, 159, 0.15);
	
	/* Layout */
	--header-height: 64px;
	--sidebar-width: 280px;
	
	/* Icon Filters */
	--icon-filter: brightness(1.2) contrast(1.1);
}

/* Light Theme */
[data-color-mode="light"], 
[data-color-mode="auto"][data-light-theme="light"] {
	/* Color Scheme */
	color-scheme: light;
	
	/* Background Colors */
	--bg-canvas: #ffffff;
	--bg-canvas-inset: #f6f8fa;
	--bg-canvas-subtle: #f6f8fa;
	--bg-surface: #ffffff;
	--bg-surface-inset: #f6f8fa;
	--bg-surface-subtle: #f6f8fa;
	--bg-overlay: #ffffff;
	--bg-header: #ffffff;
	--bg-sidebar: #ffffff;
	
	/* Border Colors */
	--border-default: #d0d7de;
	--border-muted: #d8dee4;
	--border-subtle: #d8dee4;
	--border-accent: #777b80;
	
	/* Text Colors */
	--fg-default: #1f2328;
	--fg-muted: #636c76;
	--fg-subtle: #6e7681;
	--fg-on-emphasis: #ffffff;
	
	/* Accent Colors */
	--accent-fg: #0969da;
	--accent-emphasis: #0969da;
	--accent-muted: rgba(9, 105, 218, 0.4);
	--accent-subtle: rgba(9, 105, 218, 0.1);
	
	/* Success Colors */
	--success-fg: #1a7f37;
	--success-emphasis: #1f883d;
	--success-muted: rgba(26, 127, 55, 0.4);
	--success-subtle: rgba(26, 127, 55, 0.1);
	
	/* Button Colors */
	--btn-primary-bg: #1f883d;
	--btn-primary-hover-bg: #1a7f37;
	--btn-primary-active-bg: #18832f;
	--btn-primary-fg: #ffffff;
	--btn-primary-border: rgba(31, 35, 40, 0.15);
	
	--btn-default-bg: #f6f8fa;
	--btn-default-hover-bg: #f3f4f6;
	--btn-default-active-bg: #ebecf0;
	--btn-default-fg: #24292f;
	--btn-default-border: rgba(31, 35, 40, 0.15);
	
	/* Form Colors */
	--input-bg: #ffffff;
	--input-border: #d0d7de;
	--input-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2);
	
	/* Shadow */
	--shadow-small: 0 1px 0 rgba(31, 35, 40, 0.04);
	--shadow-medium: 0 3px 6px rgba(140, 149, 159, 0.15);
	--shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2);
	--shadow-extra-large: 0 12px 28px rgba(140, 149, 159, 0.15);
	
	/* Icon Filters */
	--icon-filter: invert(1) brightness(0.8) contrast(1.2);
}

/* Legacy variable mapping for backward compatibility */
:root {
	/* Map new theme variables to existing ones */
	--background-color-primary: var(--bg-canvas);
	--color-primary: var(--fg-default);
	--color-secondary: var(--bg-canvas-subtle);
	--text-color: var(--fg-default);
	--text-accent: var(--accent-fg);
	--bg-light: var(--bg-canvas-subtle);
	--bg-secondary: var(--bg-surface-subtle);
	--border-color: var(--border-default);
	--bg-dark: var(--bg-canvas);
	--text-light: var(--fg-muted);
	--text-success: var(--success-fg);
	--button-bg: var(--btn-default-bg);
	--button-hover: var(--btn-default-hover-bg);
	--button-primary-bg: var(--btn-primary-bg);
	--button-primary-text: var(--btn-primary-fg);
	--button-primary-hover-bg: var(--btn-primary-hover-bg);
	--accent-green: var(--success-fg);
	--accent-highlight: #8b5cf6;
}

/* Theme Transition */
*, *::before, *::after {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, fill 0.2s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
	}
}

/* Base Styles */
:root {
	--page-max-width: 900px;
	--duration: 1s;
	--nav-duration: calc(var(--duration) / 4);
	--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
	--space: 1rem;
	--font-primary: "Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-heading: serif;
	--font-size: 1.125rem;
	--line-height: 1.5;
}

body {
	font-family: var(--font-primary);
	font-size: var(--font-size);
	line-height: var(--line-height);
	margin: 0;
	padding: 0;
	min-height: 100vh;
	color: var(--fg-default);
	background-color: var(--bg-canvas);
	overflow-x: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
}

/* Footer Styles */
.footer {
	background-color: var(--bg-canvas-subtle);
	border: none;
	padding: 2rem;
	margin-top: 3rem;
}

.footer-content {
	text-align: center;
}

.footer-links {
	display: flex;
	gap: 2rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.footer-links a {
	color: var(--fg-default);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-links a:hover {
	color: var(--accent-fg);
}

.footer-copyright {
	color: var(--fg-default);
	font-size: 0.9rem;
}

.footer p {
	margin: 0;
}

@media (max-width: 768px) {
	.footer-links {
		flex-direction: column;
	}

	.footer-links a {
		padding: 0.5rem 0;
	}
}

/* Button Styles (moved from home.css) */
.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: var(--border-radius);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s ease;
	border: 2px solid transparent;
	cursor: pointer;
	font-size: 1rem;
}

.btn-primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
	border-color: var(--btn-primary-bg);
}

.btn-primary:hover {
	background-color: var(--btn-primary-hover-bg);
	border-color: var(--btn-primary-hover-bg);
	transform: translateY(-2px);
}

.btn-secondary {
	background-color: var(--accent-highlight);
	color: var(--btn-primary-fg);
	border-color: var(--accent-highlight);
}

.btn-secondary:hover {
	background-color: rgb(140, 120, 260);
	border-color: rgb(140, 120, 260);
	transform: translateY(-2px);
}

.btn-outline {
	background-color: transparent;
	color: var(--accent-fg);
	border-color: var(--accent-fg);
}

.btn-outline:hover {
	background-color: var(--accent-fg);
	color: var(--bg-canvas);
	transform: translateY(-2px);
}

.btn-glow {
	box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
}

.btn-primary.btn-glow {
	box-shadow: 0 0 20px rgba(45, 105, 200, 0.4);
}

.game-actions .btn {
	flex: 1;
	min-width: 120px;
	text-align: center;
}

@media (max-width: 480px) {
	.btn {
		padding: 0.6rem 1.2rem;
		font-size: 0.9rem;
	}
	.hero-buttons .btn,
	.cta-buttons .btn {
		width: 100%;
	}
	.cta-buttons .btn:last-child {
		margin-top: 0.5rem;
	}
}

/* Fullscreen Mode Styles */
:fullscreen {
	background-color: var(--bg-canvas);
}

:-webkit-full-screen {
	background-color: var(--bg-canvas);
}

:-moz-full-screen {
	background-color: var(--bg-canvas);
}

:-ms-fullscreen {
	background-color: var(--bg-canvas);
}

/* Fullscreen mode adjustments */
:fullscreen .main-header {
	background-color: var(--bg-header);
	border-bottom: 1px solid var(--border-default);
}

:-webkit-full-screen .main-header {
	background-color: var(--bg-header);
	border-bottom: 1px solid var(--border-default);
}

:-moz-full-screen .main-header {
	background-color: var(--bg-header);
	border-bottom: 1px solid var(--border-default);
}

:-ms-fullscreen .main-header {
	background-color: var(--bg-header);
	border-bottom: 1px solid var(--border-default);
}

/* Hide sidebar overlay in fullscreen mode */
:fullscreen .sidebar-overlay,
:-webkit-full-screen .sidebar-overlay,
:-moz-full-screen .sidebar-overlay,
:-ms-fullscreen .sidebar-overlay {
	display: none !important;
}

/* Ensure game content is properly sized in fullscreen */
:fullscreen .game-container,
:-webkit-full-screen .game-container,
:-moz-full-screen .game-container,
:-ms-fullscreen .game-container {
	height: calc(100vh - var(--header-height));
	display: flex;
	flex-direction: column;
}

:fullscreen .game-board-container,
:-webkit-full-screen .game-board-container,
:-moz-full-screen .game-board-container,
:-ms-fullscreen .game-board-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}