@font-face {
	font-family: "Agave";
	src: url("../agave.ttf") format("truetype");
}

:root {
	--border-color: #4c4f69;
	--shadow-color: #4c4f69;
	--bg-accent: #eff1f5;
	--bg-secondary: #dce0e8;
	--text-color: #000;
	--text-muted: #6c6f85;
	--btn-play: #40a02b;
	--btn-close: #d20f39;
	--btn-random: #7287fd;
}

[data-theme="dark"] {
	--border-color: #eee;
	--shadow-color: #eee;
	--bg-accent: #16213e;
	--bg-secondary: #0f3460;
	--text-color: #eee;
	--text-muted: #a0a0b0;
	--btn-play: #2d5a27;
	--btn-close: #8b1538;
	--btn-random: #4a5fa8;
}

[data-theme="sepia"] {
	--border-color: #5c4a32;
	--shadow-color: #5c4a32;
	--bg-accent: #f0d9b5;
	--bg-secondary: #e6d2a0;
	--text-color: #5c4a32;
	--text-muted: #7a6548;
	--btn-play: #6b8c3a;
	--btn-close: #a32a4a;
	--btn-random: #8a7a5a;
}

[data-theme="monochrome"] {
	--border-color: #000;
	--shadow-color: #000;
	--bg-accent: #f0f0f0;
	--bg-secondary: #e0e0e0;
	--text-color: #000;
	--text-muted: #555;
	--btn-play: #333;
	--btn-close: #666;
	--btn-random: #999;
}

[data-theme="monochrome"] .btn-play,
[data-theme="monochrome"] .btn-close,
[data-theme="monochrome"] .btn-random {
	color: #fff;
}

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

body {
	font-family: "Agave", monospace;
	color: var(--text-color);
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.navbar {
	margin-bottom: 1.5rem;
	background-color: var(--bg-accent);
	animation: fadeInUp 0.5s ease-out;
}

.sidebar {
	width: 100%;
	padding: 0.5rem;
	background-color: var(--bg-accent);
	animation: slideIn 0.4s ease-out;
}

.item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	animation: fadeInUp 0.4s ease-out backwards;
}

.item:nth-child(1) {
	animation-delay: 0.05s;
}
.item:nth-child(2) {
	animation-delay: 0.1s;
}
.item:nth-child(3) {
	animation-delay: 0.15s;
}
.item:nth-child(4) {
	animation-delay: 0.2s;
}
.item:nth-child(5) {
	animation-delay: 0.25s;
}
.item:nth-child(6) {
	animation-delay: 0.3s;
}
.item:nth-child(7) {
	animation-delay: 0.35s;
}
.item:nth-child(8) {
	animation-delay: 0.4s;
}

.navbar .container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

@media (min-width: 640px) {
	.navbar .container {
		flex-direction: row;
		justify-content: space-between;
	}
}

.logo {
	font-size: 1.5rem;
	font-weight: bold;
	transition: transform 0.2s ease;
}

.logo:hover {
	transform: rotate(-2deg) scale(1.05);
}

.search-wrapper {
	width: 100%;
	position: relative;
}

.search-input {
	width: 100%;
	padding: 0.75rem;
	border-radius: 0;
	background-color: var(--bg-secondary);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.search-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(114, 135, 253, 0.5);
	transform: scale(1.01);
}

.search-wrapper svg {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1.25rem;
}

.nav-buttons {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.theme-select {
	padding: 0.5rem 1rem;
	font-family: "Agave", monospace;
	font-size: 0.875rem;
	border: 2px solid var(--border-color);
	box-shadow: 4px 4px 0 var(--shadow-color);
	background-color: var(--bg-accent);
	cursor: pointer;
}

.btn {
	padding: 0.75rem 1.5rem;
	font-weight: bold;
	cursor: pointer;
	border: 2px solid var(--border-color);
	box-shadow: 4px 4px 0 var(--shadow-color);
	font-family: "Agave", monospace;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--shadow-color);
}

.btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--shadow-color);
}

.btn-play {
	background-color: var(--btn-play);
}

.btn-close {
	background-color: var(--btn-close);
}

.btn-random {
	background-color: var(--btn-random);
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.btn-random:hover {
	box-shadow: 6px 6px 0 var(--shadow-color);
	transform: translate(-2px, -2px);
}

.btn-random:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--shadow-color);
}

.main-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
}

@media (min-width: 768px) {
	.main-content {
		flex-direction: row;
	}
}

.sidebar {
	width: 100%;
	padding: 0.5rem;
	background-color: var(--bg-accent);
}

@media (min-width: 768px) {
	.sidebar {
		max-width: 12rem;
	}
}

.sidebar h2 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.sidebar h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

#filters-container {
	font-size: 1.25rem;
}

#filters-container div {
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: transform 0.15s ease;
}

#filters-container div:hover {
	transform: translateX(4px);
}

#filters-container input[type="checkbox"] {
	margin-bottom: 0;
	margin-right: 0.5rem;
	width: auto;
}

.games-grid {
	width: 100%;
	max-width: 56rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.games-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.games-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.item-image {
	background-color: var(--bg-secondary);
	display: flex;
	justify-content: center;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid var(--border-color);
	box-shadow: 4px 4px 0 var(--shadow-color);
	aspect-ratio: 1;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.item-image:hover {
	box-shadow: 6px 6px 0 var(--shadow-color);
	transform: translate(-2px, -2px);
}

.item-image:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--shadow-color);
}

.item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.item-status {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0.5rem;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	color: var(--bg-accent);
	font-weight: bold;
	background-color: var(--text-color);
}

.item-image:hover .item-status {
	transform: translateY(0);
}

.item h3 {
	font-size: 1.25rem;
}

.item small {
	color: var(--text-muted);
	text-transform: uppercase;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.modal-content {
	padding: 2rem;
	max-width: 42rem;
	width: 100%;
	margin: 1rem;
	text-align: center;
	border: 2px solid var(--border-color);
	box-shadow: 8px 8px 0 var(--shadow-color);
	background-color: var(--bg-accent);
	animation: fadeInUp 0.3s ease-out;
}

.item.hidden {
	display: none;
}

.modal.hidden {
	display: none;
}

.modal-content h2 {
	font-size: 1.875rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

.game-area {
	background-color: var(--bg-secondary);
	height: 30rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	border: 2px solid var(--border-color);
}

.game-area canvas {
	max-width: 100%;
	max-height: 100%;
}

.loading-text {
	color: var(--text-muted);
}

#gameDescription {
	margin-bottom: 1rem;
}

.modal-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
}