@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Orbitron:wght@700;900&display=swap');

:root {
	color-scheme: dark;
	--c-bg: #0a0e1a;
	--c-accent: #00ffc8;
	--c-accent2: #ff3e7a;
	--c-platform: #00ffc8;
	--c-player: #ff3e7a;
	--c-text: #e0e8ff;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--c-bg);
	font-family: 'Chakra Petch', sans-serif;
	touch-action: none;
}

.game {
	position: relative;
	width: 100%;
	height: 100dvh;
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;
	background: linear-gradient(180deg, #0a0e1a 0%, #101833 40%, #1a1040 70%, #0a0e1a 100%);
}

#gameCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.game__ui {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	pointer-events: none;
}

.game__score {
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: 2rem;
	color: var(--c-accent);
	text-shadow: 0 0 20px rgba(0, 255, 200, 0.5);
}

.game__height {
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--c-text);
	opacity: 0.7;
}

.game__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 50;
	background: rgba(10, 14, 26, 0.92);
	backdrop-filter: blur(10px);
	transition: opacity 0.4s, visibility 0.4s;
}

.game__overlay--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.game__title {
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: clamp(3rem, 12vw, 5rem);
	line-height: 1;
	text-align: center;
	color: var(--c-accent);
	text-shadow: 0 0 40px rgba(0, 255, 200, 0.4), 0 0 80px rgba(0, 255, 200, 0.15);
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

.game__subtitle {
	color: var(--c-text);
	font-size: 1.1rem;
	opacity: 0.6;
	margin-bottom: 48px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.game__btn {
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.15em;
	padding: 16px 48px;
	border: 2px solid var(--c-accent);
	background: transparent;
	color: var(--c-accent);
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	overflow: hidden;
}

.game__btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	opacity: 0;
	transition: opacity 0.2s;
}

.game__btn:hover::before,
.game__btn:active::before {
	opacity: 0.15;
}

.game__over-title {
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 8vw, 3.5rem);
	color: var(--c-accent2);
	text-shadow: 0 0 40px rgba(255, 62, 122, 0.4);
	margin-bottom: 16px;
}

.game__final-score {
	font-family: 'Orbitron', sans-serif;
	font-weight: 900;
	font-size: 3rem;
	color: var(--c-accent);
	text-shadow: 0 0 30px rgba(0, 255, 200, 0.4);
	margin-bottom: 8px;
}

.game__best {
	color: var(--c-text);
	opacity: 0.5;
	font-size: 1rem;
	margin-bottom: 40px;
}

.game__controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	z-index: 20;
	padding: 20px;
	pointer-events: none;
}

.game__control {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.4);
	pointer-events: all;
	transition: all 0.1s;
}

.game__control:active {
	background: rgba(0, 255, 200, 0.15);
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.game__control svg {
	width: 36px;
	height: 36px;
}

@media (min-width: 600px) {
	.game__controls {
		display: none;
	}
}