/* Home Page Styles */
.home-hero {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px 0 30px 0;
	margin-bottom: 20px;
}

.home-hero .title {
	color: white;
	margin: 10px 0 5px 0;
	letter-spacing: -2px;
	font-size: 2.5rem;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.home-hero .tagline {
	color: rgba(255,255,255,0.9);
	font-size: 1rem;
	margin-bottom: 20px;
}

@media (min-width: 601px) {
	.home-hero .title {
		font-size: 3.5rem;
		letter-spacing: -3px;
	}
	.home-hero .tagline {
		font-size: 1.3rem;
	}
}

.name-input-container {
	display: flex;
	justify-content: center;
}

.name-input-container .input-field {
	width: 100%;
	max-width: 500px;
	margin-top: 0;
	margin-bottom: 0;
}

.name-input {
	background: white !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 16px 30px !important;
	font-size: 1.1rem !important;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 2px 4px rgba(0,0,0,0.05) !important;
	height: auto !important;
	margin-bottom: 0 !important;
	box-sizing: border-box !important;
	font-weight: 500;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	color: #424242 !important;
}

.name-input:focus {
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4), inset 0 2px 4px rgba(0,0,0,0.05) !important;
	border: none !important;
	outline: none;
}

.name-input::placeholder {
	color: #9e9e9e;
	font-weight: 400;
}

.name-input-container label {
	display: none;
}

.genre-section {
	padding: 10px 0 30px 0;
}

.genre-heading {
	margin-bottom: 20px;
	color: #424242;
	font-weight: 300;
	font-size: 1.5rem;
}

.genre-grid {
	margin-bottom: 10px;
}

.genre-card {
	height: 100px;
	min-height: 100px;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-size: cover;
	background-position: center;
	background-color: #9c27b0;
	margin-bottom: 12px;
	display: block;
}

@media (min-width: 601px) {
	.genre-card {
		height: 140px;
		min-height: 140px;
	}
	.genre-heading {
		font-size: 2rem;
		margin-bottom: 30px;
	}
}

.genre-card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 12px 20px rgba(0,0,0,0.2);
}

.genre-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.genre-card:hover .genre-overlay {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
}

.genre-name {
	color: white;
	margin: 0;
	font-weight: 500;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	font-size: 1.2rem;
}

@media (min-width: 601px) {
	.genre-name {
		font-size: 1.5rem;
		margin: 0 0 8px 0;
	}
}

.genre-overlay i {
	color: white;
	font-size: 32px;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (min-width: 601px) {
	.genre-overlay i {
		font-size: 40px;
	}
}

.genre-card:hover .genre-overlay i {
	opacity: 1;
	transform: scale(1);
}

/* Genre Background Gradients */
.genre-card[data-genre-id="2"] { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%); } /* Blues */
.genre-card[data-genre-id="11"] { background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 50%, #8e24aa 100%); } /* Jazz */
.genre-card[data-genre-id="21"] { background: linear-gradient(135deg, #b71c1c 0%, #c62828 50%, #e53935 100%); } /* Rock */
.genre-card[data-genre-id="20"] { background: linear-gradient(135deg, #212121 0%, #424242 50%, #616161 100%); } /* Alternative */
.genre-card[data-genre-id="6"] { background: linear-gradient(135deg, #bf360c 0%, #d84315 50%, #ff5722 100%); } /* Country */
.genre-card[data-genre-id="7"] { background: linear-gradient(135deg, #01579b 0%, #0277bd 50%, #00acc1 100%); } /* Electronic */
.genre-card[data-genre-id="14"] { background: linear-gradient(135deg, #c2185b 0%, #d81b60 50%, #f06292 100%); } /* Pop */
.genre-card[data-genre-id="15"] { background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 50%, #ab47bc 100%); } /* Soul */
.genre-card[data-genre-id="18"] { background: linear-gradient(135deg, #f57f17 0%, #f9a825 50%, #fbc02d 100%); } /* Hip Hop */
.genre-card[data-genre-id="16"] { background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%); } /* Soundtrack */
.genre-card[data-genre-id="4"] { background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 50%, #ffa726 100%); } /* Kid Bop */
.genre-card[data-genre-id="27"] { background: linear-gradient(135deg, #e91e63 0%, #ec407a 50%, #f48fb1 100%); } /* J-Pop */
.genre-card[data-genre-id="29"] { background: linear-gradient(135deg, #d32f2f 0%, #e53935 50%, #ef5350 100%); } /* Anime */
.genre-card[data-genre-id="19"] { background: linear-gradient(135deg, #00695c 0%, #00897b 50%, #26a69a 100%); } /* World */
.genre-card[data-genre-id="17"] { background: linear-gradient(135deg, #ad1457 0%, #c2185b 50%, #e91e63 100%); } /* Dance */
.genre-card[data-genre-id="10"] { background: linear-gradient(135deg, #4e342e 0%, #5d4037 50%, #6d4c41 100%); } /* Singer/Songwriter */
.genre-card[data-genre-id="5"] { background: linear-gradient(135deg, #311b92 0%, #4527a0 50%, #512da8 100%); } /* Classical */
.genre-card[data-genre-id="51"] { background: linear-gradient(135deg, #00bcd4 0%, #26c6da 50%, #4dd0e1 100%); } /* K-Pop */

/* Toast Notifications */
#toast-container {
	top: 20px !important;
	right: auto !important;
	left: 50% !important;
	transform: translateX(-50%);
	min-width: 300px;
	max-width: 90%;
}

.toast {
	border-radius: 50px !important;
	padding: 15px 30px !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
	box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
	animation: slideDown 0.3s ease-out !important;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.toast.red {
	background: linear-gradient(135deg, #ff5252 0%, #f48fb1 100%) !important;
}

.toast.green {
	background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%) !important;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Scoreboard Page Styles */
.scoreboard-page {
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.game-over-banner {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px 20px;
	margin-bottom: 0;
}

.game-over-content {
	text-align: center;
	color: white;
}

.game-over-title {
	margin: 0 0 20px 0;
	font-size: 2rem;
	font-weight: 300;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.final-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
}

.score-label {
	font-size: 1rem;
	opacity: 0.9;
	margin-bottom: 10px;
}

.score-value {
	font-size: 4rem;
	font-weight: bold;
	text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
	line-height: 1;
	margin-bottom: 10px;
}

.score-genre {
	font-size: 1.2rem;
	opacity: 0.95;
}

.game-over-actions {
	margin-top: 20px;
}

.game-over-actions .btn-flat {
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(10px);
	border-radius: 25px;
	padding: 0 25px;
}

.game-over-actions .btn-flat:hover {
	background: rgba(255,255,255,0.3);
}

.scoreboard-header {
	background: white;
	padding: 20px 0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.scoreboard-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #424242;
	font-weight: 400;
}

.scoreboard-title i {
	color: #ffd700;
	font-size: 2rem;
}

.timeframe-badge {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.9rem;
	font-weight: 500;
}

.tabs-container {
	background: white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	margin-bottom: 0;
	padding: 30px 0;
}

.tabs-wrapper {
	display: flex;
	justify-content: center;
	max-width: 500px;
	margin: 0 auto;
}

.tabs {
	background: #f5f5f5;
	border-radius: 50px;
	padding: 6px;
	height: auto;
	overflow: visible;
	display: flex;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.tabs .tab {
	line-height: normal;
	flex: 1;
}

.tabs .tab a {
	color: #757575;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 0.5px;
	padding: 14px 40px;
	height: auto;
	line-height: normal;
	border-radius: 50px;
	transition: all 0.3s ease;
	display: block;
	text-align: center;
}

.tabs .tab a:hover {
	color: #667eea;
	background: rgba(102, 126, 234, 0.1);
}

.tabs .tab a.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-weight: 600;
	box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.tabs .indicator {
	display: none;
}

.scoreboard-content {
	padding: 30px 15px;
}

.scores {
	display: none;
}

.scores.active {
	display: block;
}

/* Scoreboard Genre Cards */
.scoreboard-genre-card {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	margin-bottom: 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scoreboard-genre-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.scoreboard-genre-header {
	padding: 15px 20px;
	color: white;
	text-align: center;
}

.scoreboard-genre-header h5 {
	margin: 0;
	font-weight: 500;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.scoreboard-table-wrapper {
	background: white;
	padding: 0;
}

.score-list {
	padding: 0;
	margin: 0;
}

.score-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #e0e0e0;
	transition: background 0.2s ease;
}

.score-item:hover {
	background: rgba(102, 126, 234, 0.05);
}

.score-item:last-child {
	border-bottom: none;
}

.score-rank {
	flex: 0 0 30px;
	color: #757575;
	font-size: 0.9rem;
}

.score-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
}

.score-points {
	flex: 0 0 50px;
	text-align: center;
	color: #667eea;
	font-size: 1rem;
}

.score-date {
	flex: 0 0 80px;
	text-align: right;
	font-size: 0.85rem;
	color: #9e9e9e;
}

.highlight-row {
	background-color: #fff9c4 !important;
	font-weight: bold;
}

@media (max-width: 600px) {
	.score-item {
		gap: 8px;
		padding: 10px 12px;
	}
	
	.score-rank {
		flex: 0 0 25px;
		font-size: 0.85rem;
	}
	
	.score-name {
		font-size: 0.9rem;
	}
	
	.score-points {
		flex: 0 0 45px;
		font-size: 0.95rem;
	}
	
	.score-date {
		flex: 0 0 70px;
		font-size: 0.8rem;
	}
}

/* Genre-specific backgrounds for scoreboard */
.scoreboard-genre-card[data-genre="Blues"] .scoreboard-genre-header { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); }
.scoreboard-genre-card[data-genre="Jazz"] .scoreboard-genre-header { background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%); }
.scoreboard-genre-card[data-genre="Rock"] .scoreboard-genre-header { background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%); }
.scoreboard-genre-card[data-genre="Alternative"] .scoreboard-genre-header { background: linear-gradient(135deg, #212121 0%, #424242 100%); }
.scoreboard-genre-card[data-genre="Country"] .scoreboard-genre-header { background: linear-gradient(135deg, #bf360c 0%, #d84315 100%); }
.scoreboard-genre-card[data-genre="Electronic"] .scoreboard-genre-header { background: linear-gradient(135deg, #01579b 0%, #0277bd 100%); }
.scoreboard-genre-card[data-genre="Pop"] .scoreboard-genre-header { background: linear-gradient(135deg, #c2185b 0%, #d81b60 100%); }
.scoreboard-genre-card[data-genre="Soul"] .scoreboard-genre-header { background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%); }
.scoreboard-genre-card[data-genre="Hip Hop/Rap"] .scoreboard-genre-header { background: linear-gradient(135deg, #f57f17 0%, #f9a825 100%); }
.scoreboard-genre-card[data-genre="Soundtrack"] .scoreboard-genre-header { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); }
.scoreboard-genre-card[data-genre="Kid Bop"] .scoreboard-genre-header { background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%); }
.scoreboard-genre-card[data-genre="J-Pop"] .scoreboard-genre-header { background: linear-gradient(135deg, #e91e63 0%, #ec407a 100%); }
.scoreboard-genre-card[data-genre="Anime"] .scoreboard-genre-header { background: linear-gradient(135deg, #d32f2f 0%, #e53935 100%); }
.scoreboard-genre-card[data-genre="World"] .scoreboard-genre-header { background: linear-gradient(135deg, #00695c 0%, #00897b 100%); }
.scoreboard-genre-card[data-genre="Dance"] .scoreboard-genre-header { background: linear-gradient(135deg, #ad1457 0%, #c2185b 100%); }
.scoreboard-genre-card[data-genre="Singer/Songwriter"] .scoreboard-genre-header { background: linear-gradient(135deg, #4e342e 0%, #5d4037 100%); }
.scoreboard-genre-card[data-genre="Classical"] .scoreboard-genre-header { background: linear-gradient(135deg, #311b92 0%, #4527a0 100%); }
.scoreboard-genre-card[data-genre="K-Pop"] .scoreboard-genre-header { background: linear-gradient(135deg, #00bcd4 0%, #26c6da 100%); }

/* Play Page Styles */
#content {
	margin-top: 0 !important;
	min-height: 100vh;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	padding: 20px 0;
}

.loading-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
}

.loading-text {
	margin-top: 30px;
	font-size: 1.2rem;
	color: #666;
}

.mobile-prompt {
	text-align: center;
	padding: 60px 20px;
}

.mobile-prompt i.material-icons {
	font-size: 80px;
	color: #9c27b0;
	margin-bottom: 20px;
}

.mobile-prompt h5 {
	margin: 20px 0;
	color: #333;
}

.mobile-prompt p {
	color: #666;
	margin-bottom: 30px;
}

.game-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 15px;
	border-radius: 12px;
	margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.game-stats {
	display: flex;
	justify-content: space-around;
	gap: 10px;
}

.stat-card {
	background: rgba(255,255,255,0.2);
	border-radius: 8px;
	padding: 12px 15px;
	flex: 1;
	text-align: center;
	backdrop-filter: blur(10px);
	min-width: 0;
}

.score-card {
	background: rgba(255,255,255,0.3);
}

.stat-label {
	display: block;
	color: rgba(255,255,255,0.9);
	font-size: 0.8rem;
	margin-bottom: 5px;
	white-space: nowrap;
}

.stat-value {
	display: block;
	color: white;
	font-size: 1.8rem;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

@media (max-width: 600px) {
	.game-header {
		padding: 12px;
	}
	
	.game-stats {
		gap: 8px;
	}
	
	.stat-card {
		padding: 10px 8px;
	}
	
	.stat-label {
		font-size: 0.7rem;
	}
	
	.stat-value {
		font-size: 1.5rem;
	}
}

.timer-card {
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.timer-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timer-circle {
	width: 50px;
	height: 50px;
	transform: rotate(-90deg);
}

.timer-circle-bg {
	fill: none;
	stroke: rgba(255, 255, 255, 0.2);
	stroke-width: 8;
}

.timer-circle-progress {
	fill: none;
	stroke: white;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 283;
	stroke-dashoffset: 283;
	transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.timer-circle-progress.warning {
	stroke: #ffeb3b;
}

.timer-circle-progress.danger {
	stroke: #ff5252;
}

.timer-value-inside {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 2px 4px rgba(0,0,0,0.4);
	pointer-events: none;
	transition: color 0.3s ease;
}

.timer-value-inside.warning {
	color: #ffeb3b;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.timer-value-inside.danger {
	color: #ff5252;
	animation: pulse-color 0.5s infinite;
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

@keyframes pulse-color {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

@media (max-width: 600px) {
	.timer-circle {
		width: 40px;
		height: 40px;
	}
	
	.timer-value-inside {
		font-size: 1.2rem;
	}
}

.songs-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 15px;
}

.song-card {
	background: white;
	border-radius: 12px;
	margin-bottom: 12px;
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	cursor: pointer;
}

.song-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
	background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

.song-card:active {
	transform: translateY(-2px);
}

.song-image {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.song-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.song-info {
	flex: 1;
	min-width: 0;
}

.song-name {
	font-size: 1.1rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.song-artist {
	font-size: 0.9rem;
	color: #666;
	display: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Game Styles */
li.song:hover {
	cursor:pointer;
}
.collection .collection-item.avatar {
	min-height:100%;
}
.song {
	height:60px;
}
#counter {
	font-size:24px;
	font-weight:bold;
}
.nearzero {
	color: red;
}
#round {
	font-size:48px;
}
#score {
	font-size:48px;
}