:root {
	--bg: #0b0c10;
	--card: #111218;
	--muted: #b3b7c0;
	--text: #e8ecf1;
	--border-color: rgba(255, 255, 255, 0.08);
	--ring: rgba(124, 92, 255, 0.45);

	--color-1: #7c5cff; /* Brand 1 (Purple) */
	--color-2: #00d4ff; /* Brand 2 (Cyan) */
	--color-3: #ff6b6b; /* Bright Red/Pink */
	--color-4: #30e694; /* Bright Green */
}

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

body {
	color: var(--text);
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
		Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: radial-gradient(
			900px 520px at 70% -10%,
			rgba(124, 92, 255, 0.12),
			transparent 60%
		),
		var(--bg);
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 20px;
}

.game-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.game-board {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: min(90vw, 450px);
	height: min(90vw, 450px);
	background: var(--card);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
	border: 1px solid var(--border-color);
}

.game-pad {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.1s ease;
	opacity: 0.6;
}

.game-pad:not(.player-turn) {
	cursor: not-allowed;
}

#pad-1 {
	background-color: var(--color-1);
}
#pad-2 {
	background-color: var(--color-2);
}
#pad-3 {
	background-color: var(--color-3);
}
#pad-4 {
	background-color: var(--color-4);
}

.game-pad.active {
	opacity: 1;
	filter: brightness(1.5);
	transform: scale(1.02);
}
#pad-1.active {
	box-shadow: 0 0 25px var(--color-1);
}
#pad-2.active {
	box-shadow: 0 0 25px var(--color-2);
}
#pad-3.active {
	box-shadow: 0 0 25px var(--color-3);
}
#pad-4.active {
	box-shadow: 0 0 25px var(--color-4);
}

.controls {
	width: min(90vw, 450px);
	padding: 24px;
	background: var(--card);
	border-radius: 16px;
	border: 1px solid var(--border-color);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
	text-align: center;
}

.title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--text);
}

.status {
	font-size: 1rem;
	color: var(--muted);
	height: 1.5em;
	margin-top: 8px;
	transition: color 0.2s ease;
}
.status.error {
	color: var(--color-3);
}

.count-display {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--brand-2);
	margin: 10px 0 20px 0;
	font-family: "Courier New", Courier, monospace;
}

.btn {
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	background: var(--color-1);
	color: #fff;
	border: 1px solid var(--color-1);
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}
.btn:hover {
	box-shadow: 0 0 0 6px var(--ring);
}
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.btn.btn-secondary {
	background: transparent;
	color: var(--color-1);
	border: 1px solid var(--color-1);
}
.btn.btn-secondary:hover {
	background: rgba(124, 92, 255, 0.1);
	box-shadow: 0 0 0 6px var(--ring);
}

.strict-toggle-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}
.toggle-label {
	color: var(--muted);
	font-size: 0.9rem;
	cursor: pointer;
}
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 28px;
}
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #333;
	border-radius: 28px;
	transition: 0.4s;
}
.slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	transition: 0.4s;
}
input:checked + .slider {
	background-color: var(--color-1);
}
input:checked + .slider:before {
	transform: translateX(22px);
}