@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond&display=swap');

body {
	margin: 0;
	padding: 0;
	font-family: 'EB Garamond', cursive;
	color: #ff4c4c;
	text-align: center;
	text-shadow: 2px 2px 5px #000;
	overflow-x: hidden;
	position: relative;
}


.bg-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://imgs.search.brave.com/m8nmJ8X5_QyftjddbHgtxjXAlzIGhMQXYb6f6fYVd8U/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly9jZG4u/bW9zLmNtcy5mdXR1/cmVjZG4ubmV0L05W/V2szd2Y3VUphUUZ1/M1RtemQ3bTYuanBn') no-repeat center center;
	background-size: cover;
	filter: blur(5px);
	z-index: -1;
	
}


.overlay {
	position: relative;
	margin-top: 50px;   
	margin-left: 50px;  
	margin-right: 50px;  
	padding: 40px 20px;
	background: #2c2c2c; 
	min-height: calc(100vh - 50px);
	overflow-y: auto;
	
}


header {
	font-family: 'Cinzel', serif;
	font-size: 2.5em;
	color: #ff4c4c;
	text-shadow: 2px 2px 5px #000;
	margin-bottom: 20px;
}


.navbar {
	background: #400000;
	color: white;
	padding: 15px 20px;
	display: flex;
	gap: 20px;
	font-weight: bold;
	border: 2px solid #ff4c4c;
	border-radius: 12px;
}

.navbar a {
	color: #ff4c4c;
	text-decoration: none;
}

nav button:hover {
	text-decoration: underline;
}


section {
	padding: 20px 0;
}


#skongTracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, auto)); 
  gap: 20px;
  justify-content: start; 
  max-width: 1950px;
}


.track {
	background: #400000; 
	padding: 15px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: grab;
	border: 2px solid #ff4c4c;
	height: 150px;
	
	
	
}

.track:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0,0,0,0.7);
}

.track span {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 5px;
	color: #ff4c4c;
	font-family: 'Cinzel', serif;
}

.track p {
	color: #fff;
	font-size: 0.9em;
	margin-bottom: 10px;
}


.track .buttons {
	display: flex;
	justify-content: space-between;
}

.track button {
	flex: 1;
	margin: 0 5px;
	padding: 8px;
	background: #ff4c4c;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-family: 'EB Garamond', cursive;
	transition: 0.2s;
}

.track button:hover {
	background: #fff;
	color: #b50000;
}

#nowPlayingText {
	text-align: center;
	color: #ff4c4c;
	font-size: xx-large;
	text-shadow: 2px 2px 5px #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}
.music-icon {
    display: inline-block;
    animation: bounce 1s infinite ease-in-out;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

#guess-container {
	max-width: 600px;
	margin: 20px auto;
	background: rgba(0, 0, 0, 0.6);
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	border: 2px solid #ff4c4c;
	text-align: center;
}


#audio-container {
	margin-bottom: 20px;
}

#audioPlayer {
	width: 100%;
	outline: none;
	border-radius: 10px;
	border: 2px solid #ff4c4c;
	background: #400000;
}


#choices {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 20px;
	
}


#choices button {
	font-family: 'EB Garamond', cursive;
	background: #400000;
	font-weight: bold;
	color: white;
	color: #ff4c4c;
	padding: 15px;
	border-radius: 12px;
	border: 2px solid #ff4c4c;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	cursor: pointer;
	font-size: 16px;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

#choices button:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 14px rgba(255,76,76,0.5);
	background: #5a0000;
}


#result {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #ffdfdf;
	text-shadow: 0 0 10px #ff4c4c;
}


#nextBtn {
	background: #400000;
	color: white;
	padding: 12px 20px;
	border-radius: 12px;
	border: 2px solid #ff4c4c;
	color: #ff4c4c;
	font-weight: bold;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	cursor: pointer;
	font-size: 16px;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
	font-family: 'EB Garamond', cursive;
}

#nextBtn:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 14px rgba(255,76,76,0.5);
	background: #5a0000;
}
#searchInput {
	padding: 10px; 
	width: 80%; 
	max-width: 400px; 
	border-radius: 12px; 
	border: 2px solid #ff4c4c; 
	background: #400000; 
	color: white; 
	outline: none
}
body.dark-theme {
    background: #0a0a0a; 
    color: #c0c0ff;     
}

body.dark-theme .overlay {
    background: rgba(0, 0, 20, 0.85);
	
}

body.dark-theme .track {
    background: #111111;
    border-color: #4444ff;
}
body.dark-theme .navbar {
	background: #111111;
	color: #c0c0ff;
	padding: 15px 20px;
	display: flex;
	gap: 20px;
	font-weight: bold;
	border: 2px solid #4444ff;
	border-radius: 12px;
}
body.dark-theme .navbar a {
	color: #c0c0ff;
}
body.dark-theme #choices button,
body.dark-theme #nextBtn,
body.dark-theme #searchInput {
    background: #111111;
    border: 2px solid #4444ff;
    color: #c0c0ff;
}

body.dark-theme #choices button:hover,
body.dark-theme #nextBtn:hover,
body.dark-theme #searchInput:focus {
    box-shadow: 0 0 10px #4444ff;
    background: #222244;
}
body.dark-theme #guess-container {
	border: 2px solid #4444ff;
}
body.dark-theme #audioPlayer {
	border: 2px solid #4444ff;
	background: #111111;
}
body.dark-theme header {
	font-family: 'Cinzel', serif;
	font-size: 2.5em;
	color: #c0c0ff;
	text-shadow: 2px 2px 5px #000;
	margin-bottom: 20px;
}

body.dark-theme #nowPlayingText {
	text-align: center;
	color: #c0c0ff;
	font-size: xx-large;
	text-shadow: 2px 2px 5px #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-theme #searchInput {
	border: 2px solid #4444ff;
	background:#111111; 
	color: #c0c0ff;
}
body.dark-theme .track button {
	color: #c0c0ff;
	background:#4444ff;

}
body.dark-theme .track span {
	color: #c0c0ff;
}

.track .star {
    color: #ffd54f;
    font-size: 18px;
    transition: transform 0.12s ease;
}
.track .fav-btn:hover .star {
    transform: scale(1.15);
}


.leader-row:hover {
    background: rgba(255,76,76,0.04);
}


#topList {
    background: rgba(0,0,0,0.4);
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #ff4c4c;
}

@media (max-width: 480px) {
    .leader-row { flex-direction: column; align-items: flex-start; gap:10px; }
    .leader-row > div:last-child { width:100%; display:flex; justify-content:space-between; align-items:center; }
}
body.dark-theme #topList {
    background: #111111;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #4444ff;
}
.seek-btn {
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	padding: 0;
	margin: 0;
	line-height: 1;
	outline: none;
	appearance:none;
	-webkit-appearance:none;
	
	
}

.seek-btn:focus {
	outline: none;
}


.track.active-track {
	height: 210px;
}
#playbtn {
	padding:6px 10px; 
	border:none;
	border-radius:5px;	
	color: #ff4c4c;
	background:#400000;;
}
body.dark-theme #playbtn {
	padding:6px 10px; 
	border:none;
	border-radius:5px;	
	color: #c0c0ff;
	background:#4444ff;
}
#countbdg {
	min-width:36px; 
	text-align:center; 
	padding:6px; 
	border-radius:8px; 
	background:rgba(255,76,76,0.12);
}
body.dark-theme #countbdg {
	background:rgba(68, 68, 255, 0.12);
}
#row {
	display:flex; 
	align-items:center; 
	justify-content:space-between; 
	padding:10px; 
	border-bottom:1px solid rgba(255,76,76,0.08);
}
body.dark-theme #row {
	border-bottom:1px solid rgba(68, 68, 255, 0.12);
}
#rank {
	width:30px; 
	text-align:right; 
	color:#ffdfdf
}
body.dark-theme #row {
	color :#e0e0ff
}
body.dark-theme .leader-row:hover {
    background: rgba(192, 192, 255, 0.04);
}

#top-fav-btn {
	color: #ffd54f;
    font-size: 18px;
    transition: transform 0.12s ease;
	background:transparent; 
	border:none; 
	cursor:pointer;
}
#score {
	font-size: 20px; 
	font-weight: bold; 
	margin-bottom: 15px; 
	color: #ffdfdf; 
	text-shadow: 0 0 10px #ff4c4c;
}
#themeBtn {
	display:none; 
	margin-bottom:15px; 
	padding:10px 20px; 
	border-radius:12px; 
	border:2px solid #4444ff; 
	background:#111; 
	color:#c0c0ff; 
	cursor:pointer;
}
#searchContainer {
	margin-bottom: 20px; 
	text-align: center;
}
#timer,
#silkSanity {
	font-size: 2rem; 
	font-weight: bold; 
	margin-top: 20px;
}

#topSection {
	max-width:900px; 
	margin: 
	30px auto;
}
.track-info {
	display:flex; 
	justify-content:space-between; 
	align-items:center;
}