/* Light Mode (Default) */
:root {
	--background-color: #faf8ef;
	--text-color: #776e65;
	--grid-background: #bbada0;
	--tile-background: #cdc1b4;
	--tile-2: #eee4da;
	--tile-4: #ede0c8;
	--tile-8: #f2b179;
	--tile-16: #f59563;
	--tile-32: #f67c5f;
	--tile-64: #f65e3b;
	--tile-128: #edcf72;
	--tile-256: #edcc61;
	--tile-512: #edc850;
	--tile-1024: #edc53f;
	--tile-2048: #edc22e;
	--button-background: #8f7a66;
	--button-hover-background: #9c8a77;
	--modal-background: white;
	--footer-border: #bbada0;
	--tile-number-color: #776e65;
}

/* Dark Mode - Warmer and More Colorful */
[data-theme="dark"] {
	--background-color: #1e1e1e;
	--text-color: #f0e6d2;
	--grid-background: #2a2a2a;
	--tile-background: #3a3a3a;
	--tile-2: #ffcc99;
	--tile-4: #ff9966;
	--tile-8: #ff704d;
	--tile-16: #ff5733;
	--tile-32: #ff4500;
	--tile-64: #ff3300;
	--tile-128: #ffcc00;
	--tile-256: #ffbf00;
	--tile-512: #ffaa00;
	--tile-1024: #ff9500;
	--tile-2048: #ff8000;
	--button-background: #ff704d;
	--button-hover-background: #ff5733;
	--modal-background: #2a2a2a;
	--footer-border: #3a3a3a;
	--tile-number-color: #1e1e1e;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

body {
	display: flex;
	justify-content: center;
	height: 100vh;
	background-color: var(--background-color);
	color: var(--text-color);
	overflow: hidden;
}

.container {
	text-align: center;
	width: 100%;
	max-width: 500px;
	padding: 20px;
	margin: 0 auto;
}

h1 {
	font-size: 3rem;
	color: var(--text-color);
	margin-bottom: 20px;
}

.header {
	width: 100%;
	margin-bottom: 20px;
}

.top-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.bottom-row {
	display: flex;
	justify-content: space-between;
}

.score-container {
	font-size: 1.5rem;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 5px;
}

#restart-btn,
#guide-btn,
#dark-mode-btn,
#modal-restart-btn,
#confirm-yes,
#confirm-no {
	padding: 10px 20px;
	font-size: 1rem;
	background-color: var(--button-background);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin: 5px;
}

#restart-btn:hover,
#guide-btn:hover,
#dark-mode-btn:hover,
#modal-restart-btn:hover,
#confirm-yes:hover,
#confirm-no:hover {
	background-color: var(--button-hover-background);
}

.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 10px;
	background-color: var(--grid-background);
	padding: 10px;
	border-radius: 10px;
	width: 100%;
	aspect-ratio: 1;
	touch-action: none;
	margin: 0 auto;
}

.grid div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-weight: bold;
	color: var(--tile-number-color);
	background-color: var(--tile-background);
	border-radius: 5px;
}

.grid div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.funny-sentence {
	margin-top: 20px;
	font-size: 1.2rem;
	color: var(--text-color);
	font-style: italic;
}

/* Footer Styles */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 10px;
	background-color: var(--background-color);
	border-top: 1px solid var(--footer-border);
	font-size: 0.9rem;
	color: var(--text-color);
}

footer a {
	color: var(--button-background);
	text-decoration: none;
	margin: 0 5px;
}

footer a:hover {
	text-decoration: underline;
}

footer i {
	margin-right: 5px;
}

footer p {
	margin: 5px 0;
	/* Add some spacing between lines */
}

/* Modal Styles */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 1000;
	/* Ensure the modal is on top */
}

.modal-content,
.guide-modal-content {
	background-color: var(--modal-background);
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	max-width: 90%;
	max-height: 80vh;
	/* Limit the height of the modal */
	overflow-y: auto;
	/* Enable vertical scrolling */
	color: var(--text-color);
	position: relative;
}

.guide-modal-content {
	max-height: 80vh;
	/* Limit the height of the guide modal */
	overflow-y: auto;
	/* Enable vertical scrolling */
	touch-action: pan-y;
	/* Allow vertical scrolling only */
}

.guide-section {
	margin-bottom: 20px;
}

.guide-section h3 {
	margin-bottom: 10px;
	color: var(--text-color);
}

.guide-section p {
	margin-bottom: 10px;
	font-size: 1rem;
	color: var(--text-color);
}

.image-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.guide-image {
	width: 50px;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.guide-icon {
	font-size: 2rem;
	color: var(--text-color);
}

.merge-arrow {
	font-size: 1.5rem;
	color: var(--text-color);
	margin: 0 10px;
}

/* Close Button */
#close-guide-btn {
	padding: 10px 20px;
	font-size: 1rem;
	background-color: var(--button-background);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 20px;
}

#close-guide-btn:hover {
	background-color: var(--button-hover-background);
}

/* Score Images Styles */
#score,
#highest-score {
	display: flex;
	align-items: center;
	gap: 5px;
}

#score img,
#highest-score img {
	width: 30px;
	height: auto;
	cursor: pointer;
}

/* Style for the score breakdown modal */
#score-breakdown-modal .modal-content,
#highest-score-breakdown-modal .modal-content {
	background-color: var(--modal-background);
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	max-width: 90%;
	color: var(--text-color);
}

#score-breakdown-content,
#highest-score-breakdown-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	justify-content: center;
	margin: 20px 0;
}

#score-breakdown-content img,
#highest-score-breakdown-content img {
	width: 256px;
	height: 256px;
	margin-bottom: 10px;
}

#score-breakdown-value,
#highest-score-breakdown-value {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 10px;
}

#close-score-breakdown-btn,
#close-highest-score-breakdown-btn {
	padding: 10px 20px;
	font-size: 1rem;
	background-color: var(--button-background);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

#close-score-breakdown-btn:hover,
#close-highest-score-breakdown-btn:hover {
	background-color: var(--button-hover-background);
}

/* Responsive Design */
@media (max-width: 600px) {
	body {
		margin-top: 10%;
	}

	h1 {
		font-size: 2rem;
	}

	.score-container {
		font-size: 1.2rem;
	}

	.grid div {
		font-size: 1.5rem;
	}

	#restart-btn,
	#guide-btn,
	#dark-mode-btn,
	#modal-restart-btn,
	#confirm-yes,
	#confirm-no {
		font-size: 0.9rem;
		padding: 8px 16px;
	}

	.container {
		padding: 10px;
	}

	.grid {
		max-width: 90vw;
	}

	.funny-sentence {
		font-size: 1rem;
	}

	.header {
		width: 90vw;
		margin: 0 auto 20px;
	}

	/* Adjust score images for smaller screens */
	#score img,
	#highest-score img {
		width: 30px;
	}
}