:root {
	--primary-color: #ff6b6b;
	--secondary-color: #4ecdc4;
	--text-color: #ffffff;
	--pixel-font: "VT323", monospace;
}

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

body {
	overflow: hidden;
	background-color: #222;
	font-family: var(--pixel-font);
}

#game-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

#ui-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	/* Let clicks pass through except on buttons */
}

/* Enable pointer events on interactive elements */
button {
	pointer-events: auto;
}

.center-screen {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background: rgba(0, 0, 0, 0.4);
	padding: 2rem 4rem;
	border-radius: 1rem;
	backdrop-filter: blur(4px);
	border: 4px solid #fff;
	box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2);
}

.title {
	font-size: 6rem;
	color: #ffd700;
	text-shadow: 4px 4px #ff6b6b;
	margin-bottom: 0.5rem;
	line-height: 1;
}

.subtitle {
	font-size: 2.5rem;
	color: #fff;
	margin-bottom: 2rem;
	text-transform: uppercase;
}

button {
	background: #fff;
	color: #222;
	border: none;
	padding: 1rem 2rem;
	font-size: 2.5rem;
	font-family: var(--pixel-font);
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.1s;
	box-shadow: 0 6px 0 #999;
}

button:active {
	transform: translateY(6px);
	box-shadow: 0 0 0 #999;
}

button:hover {
	background: #f0f0f0;
}

#instructions {
	position: absolute;
	top: 60px;
	right: 20px;
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.05));
	padding: 1rem;
	border-radius: 10px;
	color: #fff;
	font-size: 1.5rem;
	text-align: right;
	backdrop-filter: blur(4px);
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.key {
	display: inline-block;
	border: 2px solid #fff;
	border-radius: 4px;
	padding: 0 6px;
	margin: 0 2px;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.3);
}

#score-display {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 3rem;
	color: #fff;
	text-shadow: 2px 2px #000;
}

#coin-display {
	position: absolute;
	top: 60px;
	left: 20px;
	font-size: 2.2rem;
	color: #ffd700;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	gap: 4px;
	transition: transform 0.15s;
}

#coin-display.coin-pop {
	transform: scale(1.3);
}

#coins-collected {
	font-size: 2rem;
	color: #ffd700;
	margin-top: 0.2rem;
	margin-bottom: 0.3rem;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}

/* --- POWER-UP HUD --- */
#powerup-display {
	position: absolute;
	top: 95px;
	left: 20px;
	display: flex;
	gap: 8px;
	align-items: center;
}

.pu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 1.4rem;
	animation: puPulse 0.8s ease-in-out infinite alternate;
	text-shadow: 0 0 6px currentColor;
}

.pu-shield {
	background: rgba(79, 195, 247, 0.25);
	border: 2px solid rgba(79, 195, 247, 0.6);
	color: #4fc3f7;
}

.pu-magnet {
	background: rgba(255, 64, 129, 0.25);
	border: 2px solid rgba(255, 64, 129, 0.6);
	color: #ff4081;
}

.pu-x2 {
	background: rgba(118, 255, 3, 0.25);
	border: 2px solid rgba(118, 255, 3, 0.6);
	color: #76ff03;
	font-weight: bold;
	font-size: 1.2rem;
}

@keyframes puPulse {
	from { transform: scale(1); opacity: 0.8; }
	to   { transform: scale(1.15); opacity: 1; }
}

/* --- COMBO DISPLAY --- */
#combo-display {
	position: absolute;
	top: 140px;
	left: 20px;
	font-size: 2rem;
	color: #ffd700;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.4);
	font-weight: bold;
	transition: transform 0.2s;
}

#combo-display.combo-pop {
	transform: scale(1.3);
}

/* --- SHARE BUTTON --- */
#share-btn {
	background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(79, 195, 247, 0.1));
	color: #4fc3f7;
	font-size: 1.8rem;
	box-shadow: 0 4px 0 rgba(79, 195, 247, 0.15);
	border: 2px solid rgba(79, 195, 247, 0.4);
	border-radius: 8px;
	padding: 0.5rem 1.5rem;
}

#share-btn:hover {
	background: linear-gradient(135deg, rgba(79, 195, 247, 0.35), rgba(79, 195, 247, 0.2));
}

#share-btn:active {
	box-shadow: 0 0 0 rgba(79, 195, 247, 0.15);
}

.hidden {
	display: none !important;
}

/* --- MOBILE CONTROLS --- */
#mobile-controls {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 16px;
	align-items: center;
	pointer-events: auto;
	z-index: 20;
}

.mobile-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: 2rem;
	font-family: var(--pixel-font);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: background 0.15s, transform 0.1s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.mobile-btn:active {
	background: rgba(255, 255, 255, 0.45);
	transform: translateY(2px) scale(0.95);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.mobile-jump-btn {
	width: 76px;
	height: 76px;
	font-size: 2.4rem;
	background: rgba(78, 205, 196, 0.3);
	border-color: rgba(78, 205, 196, 0.6);
}

.mobile-jump-btn:active {
	background: rgba(78, 205, 196, 0.55);
}

/* --- USERNAME MODAL --- */
#username-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(6px);
}

#username-modal .modal-box {
	background: rgba(20, 20, 40, 0.85);
	border: 4px solid rgba(255, 215, 0, 0.6);
	border-radius: 1rem;
	padding: 2.5rem 3rem;
	text-align: center;
	box-shadow: 0 0 40px rgba(255, 215, 0, 0.15), 0 12px 0 rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px);
	max-width: 420px;
	width: 90%;
	animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

#username-modal .modal-title {
	font-size: 3.5rem;
	color: #ffd700;
	text-shadow: 3px 3px #ff6b6b;
	margin-bottom: 0.5rem;
	line-height: 1.1;
}

#username-modal .modal-subtitle {
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1.8rem;
}

#username-input {
	width: 100%;
	padding: 0.8rem 1rem;
	font-size: 2rem;
	font-family: var(--pixel-font);
	background: rgba(255, 255, 255, 0.1);
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	color: #fff;
	text-align: center;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	margin-bottom: 1.5rem;
	letter-spacing: 2px;
}

#username-input::placeholder {
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: 1px;
}

#username-input:focus {
	border-color: #ffd700;
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.25);
}

.modal-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#set-name-btn {
	background: linear-gradient(135deg, #ffd700, #ffaa00);
	color: #1a1a2e;
	font-weight: bold;
	box-shadow: 0 6px 0 #b8860b;
	border-radius: 8px;
}

#set-name-btn:active {
	box-shadow: 0 0 0 #b8860b;
}

#play-anon-btn {
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.8rem;
	box-shadow: 0 4px 0 rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.2);
}

#play-anon-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

#play-anon-btn:active {
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

.modal-error {
	color: #ff6b6b;
	font-size: 1.4rem;
	min-height: 1.6rem;
	margin-bottom: 0.5rem;
}

/* --- USERNAME BADGE --- */
#username-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-radius: 20px;
	padding: 0.3rem 1rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

#username-badge .badge-icon {
	font-size: 1rem;
}

/* --- LEADERBOARD PANEL --- */
#leaderboard-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}

#leaderboard-panel {
	background: rgba(20, 20, 40, 0.92);
	border: 4px solid rgba(255, 215, 0, 0.5);
	border-radius: 1rem;
	padding: 2rem 2.5rem;
	max-width: 440px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 0 50px rgba(255, 215, 0, 0.1);
}

#leaderboard-panel h2 {
	font-size: 3rem;
	color: #ffd700;
	text-shadow: 3px 3px #ff6b6b;
	text-align: center;
	margin-bottom: 1.2rem;
}

#leaderboard-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

#leaderboard-list li {
	display: flex;
	align-items: center;
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 1.6rem;
	color: rgba(255, 255, 255, 0.85);
	gap: 10px;
}

#leaderboard-list li:last-child {
	border-bottom: none;
}

.lb-rank {
	width: 2.5rem;
	text-align: center;
	font-weight: bold;
	flex-shrink: 0;
}

.lb-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lb-score {
	font-weight: bold;
	color: #ffd700;
	flex-shrink: 0;
}

/* Top 3 rank highlights */
#leaderboard-list li:nth-child(1) .lb-rank { color: #ffd700; font-size: 1.8rem; }
#leaderboard-list li:nth-child(2) .lb-rank { color: #c0c0c0; font-size: 1.7rem; }
#leaderboard-list li:nth-child(3) .lb-rank { color: #cd7f32; font-size: 1.7rem; }

#leaderboard-list li:nth-child(1) {
	background: rgba(255, 215, 0, 0.08);
	border-radius: 8px;
}

.lb-empty {
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
	font-size: 1.5rem;
	padding: 2rem 0;
}

.lb-loading {
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.5rem;
	padding: 2rem 0;
}

#close-lb-btn {
	display: block;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.8rem;
	box-shadow: 0 4px 0 rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	padding: 0.6rem 2rem;
}

#close-lb-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

#close-lb-btn:active {
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

/* --- LEADERBOARD / PERSONAL BEST BUTTONS --- */
.screen-btn-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 0.8rem;
}

.orynth-badge {
	display: inline-block;
	margin-top: 1rem;
	pointer-events: auto;
	transition: opacity 0.2s, transform 0.2s;
}

.orynth-badge:hover {
	opacity: 0.85;
	transform: scale(1.03);
}

#leaderboard-btn,
#leaderboard-btn-go {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 170, 0, 0.1));
	color: #ffd700;
	font-size: 1.8rem;
	box-shadow: 0 4px 0 rgba(255, 215, 0, 0.15);
	border: 2px solid rgba(255, 215, 0, 0.4);
	border-radius: 8px;
	padding: 0.5rem 1.5rem;
}

#leaderboard-btn:hover,
#leaderboard-btn-go:hover {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 170, 0, 0.2));
}

#leaderboard-btn:active,
#leaderboard-btn-go:active {
	box-shadow: 0 0 0 rgba(255, 215, 0, 0.15);
}

/* Personal best on game over */
#personal-best {
	font-size: 1.8rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 0.3rem;
}

#personal-best span {
	color: #ffd700;
}

/* --- NEAR MISS FLASH --- */
#near-miss-flash {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5rem;
	color: #76ff03;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.6), 0 0 15px rgba(118, 255, 3, 0.5);
	pointer-events: none;
	animation: flashPop 0.8s ease-out forwards;
	z-index: 15;
}

@keyframes flashPop {
	0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
	20% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
	100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}

/* --- MILESTONE BANNER --- */
#milestone-banner {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5rem;
	color: #ffd700;
	text-shadow: 4px 4px #ff6b6b, 0 0 30px rgba(255, 215, 0, 0.5);
	pointer-events: none;
	animation: milestonePop 2s ease-out forwards;
	z-index: 15;
}

@keyframes milestonePop {
	0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
	15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
	30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(-50%, -70%) scale(0.8); opacity: 0; }
}


@keyframes warningPulse {
	from { opacity: 0.7; transform: translateX(-50%) scale(1); }
	to { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* --- MUTE BUTTON --- */
#mute-btn {
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(4px);
	border: 2px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
	transition: background 0.2s;
	pointer-events: auto;
	z-index: 15;
}

#mute-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

#mute-btn:active {
	transform: scale(0.92);
	box-shadow: none;
}

/* --- ACHIEVEMENT TOAST --- */
#achievement-toast {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	border: 2px solid rgba(255, 215, 0, 0.5);
	border-radius: 12px;
	padding: 0.8rem 1.5rem;
	color: #ffd700;
	font-size: 1.4rem;
	text-align: center;
	pointer-events: none;
	animation: toastSlide 0.4s ease-out;
	z-index: 20;
	white-space: nowrap;
}

#achievement-toast small {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.1rem;
}

@keyframes toastSlide {
	from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
	to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* --- STREAK DISPLAY --- */
#streak-display {
	font-size: 1.8rem;
	color: #ff6b6b;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
	margin-bottom: 0.5rem;
	animation: warningPulse 1s ease-in-out infinite alternate;
}

/* --- COIN BANK --- */
#coin-bank-display {
	font-size: 1.6rem;
	color: #ffd700;
	margin-bottom: 0.8rem;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}

/* --- LEADERBOARD TABS --- */
#lb-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 1rem;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgba(255, 215, 0, 0.3);
}

.lb-tab {
	flex: 1;
	padding: 0.5rem 0.8rem;
	font-size: 1.4rem;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	pointer-events: auto;
}

.lb-tab:hover {
	background: rgba(255, 215, 0, 0.1);
}

.lb-tab:active {
	transform: none;
	box-shadow: none;
}

.lb-tab-active {
	background: rgba(255, 215, 0, 0.2) !important;
	color: #ffd700 !important;
}

/* --- SHOP & BADGES OVERLAYS --- */
#shop-overlay,
#badges-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}

#shop-panel,
#badges-panel {
	background: rgba(20, 20, 40, 0.92);
	border: 4px solid rgba(255, 215, 0, 0.5);
	border-radius: 1rem;
	padding: 2rem 2.5rem;
	max-width: 440px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 0 50px rgba(255, 215, 0, 0.1);
}

#shop-panel h2,
#badges-panel h2 {
	font-size: 3rem;
	color: #ffd700;
	text-shadow: 3px 3px #ff6b6b;
	text-align: center;
	margin-bottom: 0.8rem;
}

#shop-coins {
	font-size: 2rem;
	color: #ffd700;
	text-align: center;
	margin-bottom: 1rem;
}

#skin-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 1.5rem;
}

.skin-item {
	text-align: center;
	padding: 0.8rem 0.4rem;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	pointer-events: auto;
}

.skin-item:hover {
	border-color: rgba(255, 215, 0, 0.5);
	background: rgba(255, 255, 255, 0.05);
}

.skin-color {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	margin: 0 auto 0.4rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.skin-name {
	font-size: 1.2rem;
	color: #fff;
	margin-bottom: 0.3rem;
}

.skin-action {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.6);
}

.skin-equipped {
	border-color: rgba(118, 255, 3, 0.6) !important;
	background: rgba(118, 255, 3, 0.08);
}

.skin-equipped .skin-action { color: #76ff03; }
.skin-locked { opacity: 0.5; }
.skin-buyable .skin-action { color: #ffd700; }

#close-shop-btn,
#close-badges-btn {
	display: block;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.8rem;
	box-shadow: 0 4px 0 rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	padding: 0.6rem 2rem;
}

#close-shop-btn:hover,
#close-badges-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

#close-shop-btn:active,
#close-badges-btn:active {
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

#badges-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 1.5rem;
}

.badge-item {
	text-align: center;
	padding: 0.8rem;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.1);
}

.badge-icon-lg { font-size: 2rem; margin-bottom: 0.3rem; }
.badge-name { font-size: 1.2rem; color: #fff; margin-bottom: 0.2rem; }
.badge-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.5); }
.badge-unlocked { border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.06); }
.badge-locked { opacity: 0.4; }

#shop-btn,
#badges-btn {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.8rem;
	box-shadow: 0 4px 0 rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	padding: 0.5rem 1.5rem;
}

#shop-btn:hover,
#badges-btn:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
	color: #fff;
}

#shop-btn:active,
#badges-btn:active {
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.08);
}

/* Hide keyboard instructions on touch/mobile devices */
@media (max-width: 768px), (pointer: coarse) {
	#instructions {
		display: none;
	}

	.title {
		font-size: 3.5rem;
	}

	.subtitle {
		font-size: 1.8rem;
	}

	.center-screen {
		padding: 1.5rem 2rem;
	}

	button {
		font-size: 2rem;
		padding: 0.8rem 1.5rem;
	}

	#username-modal .modal-box {
		padding: 1.5rem 1.5rem;
	}

	#username-modal .modal-title {
		font-size: 2.8rem;
	}

	#username-input {
		font-size: 1.6rem;
	}

	#leaderboard-panel {
		padding: 1.5rem 1.2rem;
	}

	#leaderboard-panel h2 {
		font-size: 2.4rem;
	}

	#leaderboard-list li {
		font-size: 1.4rem;
	}

	#username-badge {
		font-size: 1.2rem;
		top: 14px;
		right: 14px;
	}

	#mute-btn {
		bottom: 100px;
		width: 40px;
		height: 40px;
	}

	#milestone-banner { font-size: 3.5rem; }
	#near-miss-flash { font-size: 2rem; }
	#skin-grid { grid-template-columns: repeat(2, 1fr); }
	#badges-grid { grid-template-columns: 1fr; }
	#streak-display { font-size: 1.4rem; }
	#coin-bank-display { font-size: 1.3rem; }

	#shop-panel,
	#badges-panel {
		padding: 1.5rem 1.2rem;
	}

	#shop-panel h2,
	#badges-panel h2 {
		font-size: 2.4rem;
	}

	#achievement-toast {
		font-size: 1.2rem;
		top: 50px;
	}
}