/* ===== SUBWAY HOPPER - GAME STYLES ===== */

:root {
	--pixel-font: "VT323", monospace;
	/* Tinggi header stack: running-text 30px + top-status-bar 36px + main-header 54px = 120px */
	--header-h: 120px;
	/* Tinggi area kontrol bawah */
	--ctrl-h: 110px;
}

body {
	overflow: hidden;
}

/* ===== GAME WRAPPER ===== */
/* Area canvas game: dari bawah header sampai di atas area kontrol */
#game-wrapper {
	position: fixed;
	top: var(--header-h);
	left: 0;
	width: 100vw;
	height: calc(100vh - var(--header-h) - var(--ctrl-h));
	z-index: 1;
}

#game-container {
	position: absolute;
	inset: 0;
	z-index: 1;
}

#ui-layer {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
}

#ui-layer button {
	pointer-events: auto;
}

/* ===== START / GAME OVER SCREEN ===== */
.center-screen {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background: rgba(255, 255, 255, 0.85);
	padding: 2rem 3.5rem;
	border-radius: 1rem;
	backdrop-filter: blur(6px);
	border: 4px solid rgba(255, 200, 100, 0.9);
	box-shadow: 0 10px 0 rgba(200, 150, 0, 0.25);
	font-family: var(--pixel-font);
	/* Pastikan tidak meluber keluar layar pada hp */
	max-width: 90vw;
	width: max-content;
}

.title {
	font-family: var(--pixel-font);
	font-size: clamp(3rem, 10vw, 6rem);
	color: #ff6b00;
	text-shadow: 4px 4px #ffcc00;
	margin-bottom: 0.4rem;
	line-height: 1;
}

.subtitle {
	font-family: var(--pixel-font);
	font-size: clamp(1.4rem, 5vw, 2.5rem);
	color: #444;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

/* Tombol di dalam dialog start/game over */
.center-screen button,
#ui-layer button {
	background: #ff9a00 !important;
	color: #fff !important;
	border: none !important;
	padding: 0.75rem 2rem !important;
	font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
	font-family: var(--pixel-font) !important;
	cursor: pointer !important;
	transition: transform 0.08s, box-shadow 0.08s !important;
	box-shadow: 0 6px 0 #c05000 !important;
	border-radius: 6px !important;
	letter-spacing: normal !important;
	font-weight: normal !important;
	opacity: 1 !important;
}

.center-screen button:hover,
#ui-layer button:hover {
	background: #ffb300 !important;
	box-shadow: 0 6px 0 #c06000 !important;
}

.center-screen button:active,
#ui-layer button:active {
	transform: translateY(5px) !important;
	box-shadow: 0 1px 0 #c05000 !important;
}

/* ===== HINT KEYBOARD (kanan atas, kecil & non-blocking) ===== */
#instructions {
	position: absolute;
	top: 10px;
	right: 12px;
	background: rgba(255, 255, 255, 0.75);
	padding: 0.45rem 0.75rem;
	border-radius: 8px;
	color: #333;
	font-family: var(--pixel-font);
	font-size: 1.1rem;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.15);
	line-height: 1.4;
	white-space: nowrap;
}

.key {
	display: inline-block;
	border: 1.5px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	padding: 0 5px;
	margin: 0 2px;
	font-weight: bold;
	background: rgba(255, 255, 255, 0.7);
	font-family: var(--pixel-font);
}

/* ===== SKOR ===== */
#score-display {
	position: absolute;
	top: 10px;
	left: 12px;
	font-family: var(--pixel-font);
	font-size: clamp(1.6rem, 5vw, 2.8rem);
	color: #333;
	text-shadow: 1px 1px #fff;
}

/* ===== HIDDEN ===== */
.hidden {
	display: none !important;
}

/* ===== TOMBOL KONTROL BAWAH ===== */
#game-controls {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: var(--ctrl-h);
	z-index: 50;
	/* Backdrop terang transparan */
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(4px);
	border-top: 2px solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

#controls-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

/* Tombol kontrol dasar */
.ctrl-btn {
	/* Reset override dari style.css */
	all: unset !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 72px !important;
	height: 72px !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, 0.9) !important;
	border: 3px solid rgba(0, 0, 0, 0.2) !important;
	color: #333 !important;
	font-size: 2rem !important;
	cursor: pointer !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	touch-action: manipulation !important;

	/* Transisi tekan */
	transition: background 0.08s, transform 0.08s, border-color 0.08s !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 6px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Tombol lompat sedikit lebih besar dan warna beda */
.ctrl-btn-jump {
	width: 84px !important;
	height: 84px !important;
	border-radius: 50% !important;
	background: rgba(255, 160, 0, 0.85) !important;
	border: 3px solid rgba(230, 100, 0, 0.9) !important;
	color: #fff !important;
	font-size: 2.2rem !important;
	box-shadow: 0 4px 18px rgba(255, 140, 0, 0.4), 0 6px 0 rgba(180, 90, 0, 0.5) !important;
}

/* Efek hover (desktop) */
.ctrl-btn:hover {
	background: rgba(240, 240, 240, 1) !important;
	border-color: rgba(0, 0, 0, 0.4) !important;
}

.ctrl-btn-jump:hover {
	background: rgba(255, 180, 0, 0.95) !important;
	border-color: rgba(200, 80, 0, 0.95) !important;
}

/* Efek tekan (active) */
.ctrl-btn:active,
.ctrl-btn.pressed {
	transform: translateY(4px) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 2px 0 rgba(0, 0, 0, 0.15) !important;
	background: rgba(220, 220, 220, 1) !important;
}

.ctrl-btn-jump:active,
.ctrl-btn-jump.pressed {
	transform: translateY(4px) !important;
	box-shadow: 0 2px 10px rgba(255, 140, 0, 0.4), 0 2px 0 rgba(180, 90, 0, 0.5) !important;
	background: rgba(255, 140, 0, 0.9) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
	:root {
		--header-h: 110px;
		--ctrl-h: 96px;
	}

	.ctrl-btn {
		width: 62px !important;
		height: 62px !important;
		font-size: 1.7rem !important;
		border-radius: 12px !important;
	}

	.ctrl-btn-jump {
		width: 72px !important;
		height: 72px !important;
		font-size: 1.9rem !important;
	}

	#controls-inner {
		gap: 14px;
	}

	.center-screen {
		padding: 1.25rem 1.75rem;
	}
}

@media (min-width: 1024px) {
	/* Desktop: tombol kontrol tetap tampil tapi agak lebih besar */
	.ctrl-btn {
		width: 80px !important;
		height: 80px !important;
		font-size: 2.2rem !important;
	}

	.ctrl-btn-jump {
		width: 96px !important;
		height: 96px !important;
		font-size: 2.5rem !important;
	}

	:root {
		--ctrl-h: 124px;
	}
}