* {
	scrollbar-width: thin;
	scrollbar-color: #11ff00 #000000; 
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-thumb {
	background: #11ff00;
	border: 100px none #ffffff;
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
	background: #00ff33;
}

::-webkit-scrollbar-thumb:active {
	background: #000000;
}

::-webkit-scrollbar-track {
	background: #000000;
	border: 100px none #ffffff;
	border-radius: 8px;
}

::-webkit-scrollbar-track:hover {
	background: #000000;
}

::-webkit-scrollbar-track:active {
	background: #000000;
}

::-webkit-scrollbar-corner {
	background: transparent;
}
/* Estilos base */
body {
	margin: 0;
	padding: 0;
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
	color: #ffffff;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	overflow: hidden;
	height: 100vh;
	position: relative;
}

/* Fundo animado dos menus */
.menu-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="grad1" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%234CAF50;stop-opacity:0.1" /><stop offset="100%" style="stop-color:%234CAF50;stop-opacity:0" /></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23grad1)"><animateTransform attributeName="transform" type="translate" values="0,0;800,600;0,0" dur="20s" repeatCount="indefinite"/></circle><circle cx="800" cy="300" r="150" fill="url(%23grad1)"><animateTransform attributeName="transform" type="translate" values="0,0;-600,400;0,0" dur="25s" repeatCount="indefinite"/></circle><circle cx="500" cy="700" r="120" fill="url(%23grad1)"><animateTransform attributeName="transform" type="translate" values="0,0;300,-500;0,0" dur="30s" repeatCount="indefinite"/></circle></svg>') center/cover;
	z-index: -1;
	opacity: 0.3;
}

/* Container do jogo */
.game-container {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Canvas do jogo */
#gh-game-canvas {
	border: 3px solid #4CAF50;
	border-radius: 10px;
	background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
	transition: all 0.3s ease;
	position: relative;
}

/* Área de mídia acima da pista */
#gh-media-area {
	position: absolute;
	top: -120px;
	left: 0;
	width: 100%;
	height: 100px;
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid #4CAF50;
	border-radius: 10px 10px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 10;
}

#gh-media-content {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.media-placeholder {
	color: #4CAF50;
	font-size: 14px;
	text-align: center;
	opacity: 0.7;
}

/* HUD reposicionado - canto inferior esquerdo */
#gh-hud-container {
	position: fixed;
	bottom: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.9);
	padding: 15px 20px;
	border-radius: 15px;
	border: 2px solid #4CAF50;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	z-index: 100;
	backdrop-filter: blur(10px);
	box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
	min-width: 200px;
}

.hud-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}

.hud-item:last-child {
	margin-bottom: 0;
}

.hud-label {
	color: #4CAF50;
}

.hud-value {
	color: #ffffff;
	font-weight: bold;
}

.multiplier-display {
	color: #FFD700;
	font-size: 18px;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* Indicador de desempenho - canto inferior direito */
#gh-performance-indicator {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 4px solid #00ff00;
	background: rgba(0, 255, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 14px;
	z-index: 100;
	transition: all 0.3s ease;
	box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

.performance-excellent {
	border-color: #00ff00;
	background: rgba(0, 255, 0, 0.2);
	color: #00ff00;
	box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

.performance-good {
	border-color: #ffff00;
	background: rgba(255, 255, 0, 0.2);
	color: #ffff00;
	box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
}

.performance-poor {
	border-color: #ff0000;
	background: rgba(255, 0, 0, 0.2);
	color: #ff0000;
	box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

/* Barra de progresso da música - lado direito */
#gh-progress-bar {
	position: fixed;
	right: 120px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 400px;
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid #4CAF50;
	border-radius: 10px;
	z-index: 100;
	overflow: hidden;
}

#gh-progress-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(to top, #4CAF50, #66BB6A);
	transition: height 0.1s ease;
	border-radius: 0 0 8px 8px;
}

.progress-label {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	color: #4CAF50;
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
}

/* Buracos de acerto estilo Guitar Hero */
.hit-hole {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 4px solid #ffffff;
	background: rgba(0, 0, 0, 0.8);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3);
	z-index: 3;
}

.hit-hole-1 {
	border-color: #ff4444;
}

.hit-hole-2 {
	border-color: #44ff44;
}

.hit-hole-3 {
	border-color: #4444ff;
}

.hit-hole-4 {
	border-color: #ffff44;
}

.hit-hole-5 {
	border-color: #ff44ff;
}

.hit-hole.hit {
	box-shadow: 0 0 20px 5px rgba(0, 255, 0, 0.8), inset 0 0 10px 2px rgba(0, 255, 0, 0.5);
	background: rgba(0, 255, 0, 0.3);
}

.hit-hole.miss {
	box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.8), inset 0 0 10px 2px rgba(255, 0, 0, 0.5);
	background: rgba(255, 0, 0, 0.3);
}

.hit-hole.active {
	transform: scale(1.1);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

/* Menus */
.gh-menu {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.95);
	border: 2px solid #4CAF50;
	border-radius: 15px;
	padding: 30px;
	text-align: center;
	min-width: 400px;
	max-width: 90vw;
	max-height: 90vh;
	overflow-y: auto;
	backdrop-filter: blur(15px);
	box-shadow: 0 0 30px rgba(76, 175, 80, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1000;
}

.gh-menu.visible {
	opacity: 1;
	visibility: visible;
}

.gh-menu h2 {
	color: #4CAF50;
	margin-bottom: 30px;
	font-size: 2rem;
	text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* Botões */
.btn-gh-primary {
	background: linear-gradient(45deg, #4CAF50, #45a049);
	border: none;
	color: white;
	padding: 12px 30px;
	margin: 8px;
	border-radius: 25px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.btn-gh-primary:hover {
	background: linear-gradient(45deg, #45a049, #4CAF50);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.btn-gh-secondary {
	background: linear-gradient(45deg, #666, #777);
	border: none;
	color: white;
	padding: 10px 25px;
	margin: 5px;
	border-radius: 20px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.btn-gh-secondary:hover {
	background: linear-gradient(45deg, #777, #888);
	transform: translateY(-1px);
}

/* Formulários */
.gh-form-control {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #4CAF50;
	border-radius: 8px;
	color: white;
	padding: 10px;
	margin: 5px 0;
	transition: all 0.3s ease;
}

.gh-form-control:focus {
	background: rgba(255, 255, 255, 0.15);
	border-color: #66BB6A;
	box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
	outline: none;
}

.gh-form-label {
	color: #4CAF50;
	font-weight: bold;
	margin-bottom: 5px;
	display: block;
}

/* Configuração de teclas */
.key-config-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 20px 0;
}

.note-button {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 3px solid #fff;
	margin: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.note-button:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.note-button.selected {
	border-color: #FFD700;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.key-display {
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 5px 10px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: bold;
}

/* Sistema de estrelas */
.stars-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
}

.star {
	font-size: 2rem;
	color: #666;
	margin: 0 5px;
	transition: all 0.3s ease;
}

.star.filled {
	color: #FFD700;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.star.filling {
	animation: starFill 0.5s ease-in-out;
}

@keyframes starFill {
	0% {
transform: scale(1);
color: #666;
	}

	50% {
transform: scale(1.3);
color: #FFD700;
	}

	100% {
transform: scale(1);
color: #FFD700;
	}
}

/* Personalização */
.customization-tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	border-bottom: 2px solid #333;
}

.customization-tab {
	background: transparent;
	border: none;
	color: #888;
	padding: 10px 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	border-bottom: 3px solid transparent;
}

.customization-tab.active {
	color: #4CAF50;
	border-bottom-color: #4CAF50;
}

.customization-content {
	display: none;
	max-height: 400px;
	overflow-y: auto;
}

.customization-content.active {
	display: block;
}

.customization-section {
	margin-bottom: 25px;
	padding: 15px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	border: 1px solid rgba(76, 175, 80, 0.3);
}

.customization-section h5 {
	color: #4CAF50;
	margin-bottom: 15px;
	font-size: 1.1rem;
}

.color-picker-group {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.color-picker-group label {
	min-width: 150px;
	color: #ccc;
	margin-right: 10px;
}

.color-picker {
	width: 50px;
	height: 35px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.file-upload-group {
	margin-bottom: 15px;
}

.template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 15px;
	margin-bottom: 20px;
}

.template-card {
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
}

.template-card:hover {
	border-color: #4CAF50;
	background: rgba(76, 175, 80, 0.1);
}

.template-card.selected {
	border-color: #4CAF50;
	background: rgba(76, 175, 80, 0.2);
	box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.template-card h6 {
	color: #4CAF50;
	margin-bottom: 8px;
}

.css-editor {
	width: 100%;
	height: 200px;
	background: #1a1a1a;
	border: 1px solid #4CAF50;
	border-radius: 5px;
	color: #fff;
	padding: 10px;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	resize: vertical;
}

.preview-area {
	border: 2px dashed #666;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	color: #888;
	margin-top: 15px;
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Notas do jogo */
.gh-note-1 {
	background: linear-gradient(45deg, #ff4444, #cc3333);
}

.gh-note-2 {
	background: linear-gradient(45deg, #44ff44, #33cc33);
}

.gh-note-3 {
	background: linear-gradient(45deg, #4444ff, #3333cc);
}

.gh-note-4 {
	background: linear-gradient(45deg, #ffff44, #cccc33);
}

.gh-note-5 {
	background: linear-gradient(45deg, #ff44ff, #cc33cc);
}

/* Lista de músicas */
#gh-music-list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

#gh-music-list li {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #4CAF50;
	border-radius: 8px;
	padding: 15px;
	margin: 10px 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

#gh-music-list li:hover {
	background: rgba(76, 175, 80, 0.2);
	transform: translateX(5px);
}

/* Responsividade */
@media (max-width: 768px) {
	.gh-menu {
min-width: 300px;
padding: 20px;
	}

	.template-grid {
grid-template-columns: 1fr;
	}

	.key-config-container {
flex-direction: column;
	}

	#gh-hud-container {
bottom: 10px;
left: 10px;
font-size: 14px;
padding: 10px 15px;
	}

	#gh-performance-indicator {
bottom: 10px;
right: 10px;
width: 60px;
height: 60px;
	}

	#gh-progress-bar {
right: 80px;
height: 300px;
	}
}

/* Animações */
@keyframes pulse {
	0% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
	}

	70% {
box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
	}

	100% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
	}
}

.pulse {
	animation: pulse 2s infinite;
}

@keyframes noteHit {
	0% {
transform: scale(1);
	}

	50% {
transform: scale(1.2);
	}

	100% {
transform: scale(1);
	}
}

.note-hit-animation {
	animation: noteHit 0.2s ease-in-out;
}