/* Global responsive styles and mobile optimizations */
html,
body,
#root {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* Prevent horizontal scrolling */
	box-sizing: border-box;
	font-size: 16px; /* Base font size for better mobile readability */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h1,
p {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Mobile-first responsive typography */
h1 {
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	line-height: 1.2;
}

h2 {
	font-size: clamp(1.25rem, 3.5vw, 2rem);
	line-height: 1.3;
}

h3 {
	font-size: clamp(1.1rem, 3vw, 1.5rem);
	line-height: 1.4;
}

p,
span,
div {
	font-size: clamp(0.9rem, 2.5vw, 1rem);
	line-height: 1.5;
}

/* Touch-friendly button styles */
button {
	min-height: 44px;
	min-width: 44px;
	padding: 0.75rem 1rem;
	font-size: clamp(0.9rem, 2.5vw, 1rem);
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	touch-action: manipulation;
}

button:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

button:active {
	transform: translateY(0);
}

/* Touch-friendly input styles */
input,
select,
textarea {
	min-height: 44px;
	padding: 0.75rem;
	font-size: clamp(0.9rem, 2.5vw, 1rem);
	border: 1px solid #ddd;
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
}

/* Responsive table wrapper */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.table-responsive table {
	min-width: 600px;
	width: 100%;
	border-collapse: collapse;
}

/* Mobile navigation improvements */
.mobile-nav {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	padding: 0.5rem;
}

.mobile-nav button {
	white-space: nowrap;
	margin-right: 0.5rem;
	flex-shrink: 0;
}

/* Responsive grid utilities */
.responsive-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.responsive-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}

@media (min-width: 768px) {
	.responsive-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

/* Responsive flex utilities */
.responsive-flex {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 768px) {
	.responsive-flex {
		flex-direction: row;
		align-items: center;
	}
}

/* Mobile-specific utilities */
@media (max-width: 767px) {
	.mobile-hidden {
		display: none !important;
	}

	.mobile-full-width {
		width: 100% !important;
	}

	.mobile-stack {
		flex-direction: column !important;
	}

	.mobile-center {
		text-align: center !important;
	}

	.mobile-padding {
		padding: 1rem !important;
	}

	.mobile-margin {
		margin: 0.5rem !important;
	}
}

/* Landscape mobile optimizations */
@media (max-height: 500px) and (orientation: landscape) {
	.landscape-compact {
		padding: 0.5rem !important;
	}

	.landscape-compact h1,
	.landscape-compact h2,
	.landscape-compact h3 {
		margin: 0.25rem 0 !important;
	}
}

/* Prevent zoom on input focus (iOS) */
@media screen and (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* Custom game content responsive styles */
@media (max-width: 768px) {
	.game-content {
		flex-direction: column !important;
	}

	.game-content > div {
		width: 100% !important;
	}
}

/* Mobile-first stacked layout for small screens */
@media (max-width: 768px) {
	.game-content {
		flex-direction: column !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.game-content > div {
		width: 100% !important;
	}

	/* Hide header bar in landscape for more space */
	@media (orientation: landscape) {
		body > div:first-child > div:first-child {
			display: none !important;
		}
	}
}

.stay-logged-in-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	gap: 0.5rem;
}

.stay-logged-in-checkbox {
	width: 16px;
	height: 16px;
	accent-color: #007bff;
	cursor: pointer;
}