/* Fonts & Variables */
:root {
	--gold: #dfc06f;
	--border-gold: #cfae53;
	--text-light: #f8fafc;
	--text-muted: rgba(255, 255, 255, 0.6);
	--glow-green: #4ade80;
}

/* Magic Particles Canvas */
#magic-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* UI Corner Ornaments */
.ui-corners img {
	position: fixed;
	z-index: 3;
	pointer-events: none;
	width: auto;
	height: 18vh;
	max-height: 200px;
	min-height: 100px;
	opacity: 0.85;
	filter: drop-shadow(0 0 15px rgba(223, 192, 111, 0.25));
	transition: all 0.5s ease;
}

#corner-top-left {
	top: 0;
	left: 0;
}

#corner-top-right {
	top: 0;
	right: 0;
}

#corner-bottom-left {
	bottom: 0;
	left: 0;
}

#corner-bottom-right {
	bottom: 0;
	right: 0;
}

/* Base HTML background */
html {
	background-color: #05070a;
}

/* Youtube Player hidden offscreen */
#player {
	position: absolute;
	left: -9999px;
	top: -9999px;
	z-index: -9999;
}

/* General Layout */
body, html {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	color: var(--text-light);
	background-color: transparent; /* Transparent to let Backstretch background show */
}

/* Video Background */
video {
	position: fixed; 
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto;
	z-index: -2;
	object-fit: cover;
}

/* Overlay darkener and vignetting */
#overlay {
	position: fixed;
	left: 0px; 
	top: 0px;
	width: 100%; 
	height: 100%;
	z-index: 1;
	background-repeat: repeat;
	pointer-events: none;
	background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
}

/* Top Header (Server Title) */
#header-container {
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 10;
	pointer-events: none;
}

/* Watermark (Top Right Corner - Hogwarts Legacy Style) */
#hexworld-watermark {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	font-family: 'Cinzel Decorative', serif;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 6px;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	/* Gold Metallic Gradient */
	background: linear-gradient(to bottom, #ffe8b5 0%, #d4af37 40%, #b8860b 75%, #ffd700 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Glow & Shadow */
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(223, 192, 111, 0.45));
	pointer-events: none;
}

#title {
	font-family: 'Cinzel', serif;
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 5px;
	text-transform: uppercase;
	margin: 0;
	color: var(--gold);
	text-shadow: 0 0 15px rgba(223, 192, 111, 0.4), 0 4px 10px rgba(0,0,0,0.9);
}

#title img {
	max-width: 250px;
	height: auto;
	margin-top: 5px;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
}

/* Hogwarts Legacy Style Progress Container (Bottom-Center) */
#loading-container {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5%;
	width: 80%;
	max-width: 1000px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 16px;
	pointer-events: none;
	background: rgba(8, 12, 20, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(223, 192, 111, 0.25);
	border-radius: 4px;
	padding: 20px 30px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(223, 192, 111, 0.03);
}

/* Elegant Thin Double-bordered Progress Bar */
.progress-wrapper {
	position: relative;
	width: 100%;
	height: 6px;
	padding: 1px;
}

/* Decorative circles at ends of progress bar */
.progress-wrapper::before, .progress-wrapper::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	border: 1px solid var(--border-gold);
	background: #05070a;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	box-shadow: 0 0 6px rgba(207, 174, 83, 0.6);
}

.progress-wrapper::before {
	left: -12px;
}

.progress-wrapper::after {
	right: -12px;
}

#loading {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(223, 192, 111, 0.3);
	border-radius: 3px;
	box-sizing: border-box;
	position: relative;
	overflow: visible;
}

#loading-progress {
	height: 100%;
	width: 0%;
	background: linear-gradient(to right, #b8860b 0%, #dfc06f 50%, #ffd700 100%);
	border-radius: 2px;
	position: relative;
	transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	box-shadow: 0 0 8px rgba(223, 192, 111, 0.5);
}

/* Glowing green dot at progress front */
.progress-glow-dot {
	position: absolute;
	right: -4px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: var(--glow-green);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--glow-green), 0 0 20px var(--glow-green), 0 0 30px #22c55e;
	z-index: 10;
}

/* Flex Row under Progress Bar */
.loading-details-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* Status Text below Bar */
.status-text-wrapper {
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 6px;
	flex: 1;
	padding-right: 30px;
}

#status {
	font-family: 'Cinzel', serif;
	font-size: 19px;
	font-weight: 700;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

#downloading-file {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--text-muted);
	text-shadow: 0 1px 3px rgba(0,0,0,0.9);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#messages {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 3px rgba(0,0,0,0.9);
	min-height: 18px;
	letter-spacing: 0.5px;
	border-left: 2px solid var(--gold);
	padding-left: 10px;
	margin-top: 4px;
}

/* Center Logo Placement */
#center-logo-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

#center-logo {
	width: 130px;
	height: auto;
	filter: drop-shadow(0 0 18px rgba(223, 192, 111, 0.5));
	transition: all 0.4s ease;
	opacity: 0.9;
}

#center-logo:hover {
	transform: scale(1.08);
	opacity: 1;
	filter: drop-shadow(0 0 28px rgba(223, 192, 111, 0.8));
}

/* Magic Glassmorphic Panels (Left & Right Sidebars) */
.magic-panel {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 290px;
	padding: 22px 20px;
	background: rgba(8, 12, 20, 0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(223, 192, 111, 0.3);
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65), 
	            inset 0 0 20px rgba(223, 192, 111, 0.05);
	z-index: 10;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.magic-panel:hover {
	border-color: rgba(223, 192, 111, 0.6);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.75), 
	            0 0 15px rgba(223, 192, 111, 0.15),
	            inset 0 0 25px rgba(223, 192, 111, 0.08);
}

/* Easter Egg Pop-up */
#easter-egg-popup {
	left: -350px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 100;
	pointer-events: auto;
}

#easter-egg-popup.active {
	left: 5%;
	opacity: 1;
}

.spell-discovery-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #fff;
	line-height: 1.5;
	margin: 0 0 10px 0;
}

.developer-list {
	background: rgba(223, 192, 111, 0.08);
	border: 1px solid rgba(223, 192, 111, 0.2);
	border-radius: 4px;
	padding: 12px;
	margin-bottom: 14px;
	text-align: center;
}

.dev-title {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	color: var(--gold);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.dev-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.magic-btn {
	background: linear-gradient(135deg, #b8860b 0%, #dfc06f 100%);
	border: 1px solid #cfae53;
	border-radius: 3px;
	color: #080c14;
	font-family: 'Cinzel', serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 8px 16px;
	cursor: pointer;
	width: 100%;
	text-transform: uppercase;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.magic-btn:hover {
	filter: brightness(1.1);
	box-shadow: 0 4px 15px rgba(223, 192, 111, 0.3);
}

#music {
	right: 5%;
}

.panel-header {
	font-family: 'Cinzel', serif;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 2px;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(223, 192, 111, 0.25);
	padding-bottom: 12px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.icon-gold {
	color: var(--gold);
	filter: drop-shadow(0 0 5px rgba(223, 192, 111, 0.6));
}

.panel-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
	padding-bottom: 6px;
}

.info-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.info-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.info-value {
	font-family: 'Cinzel', serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--gold);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Music Player Layout */
.music-player-layout {
	display: flex;
	align-items: center;
	gap: 16px;
}

.music-disc-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.music-disc {
	font-size: 32px;
	color: var(--gold);
	filter: drop-shadow(0 0 6px rgba(223, 192, 111, 0.5));
	animation: spinDisc 8s linear infinite;
}

.music-details {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow: hidden;
	flex: 1;
}

.music-title-scroll {
	width: 100%;
	overflow: hidden;
}

#music-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.music-status {
	font-family: 'Montserrat', sans-serif;
	font-size: 10.5px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

@keyframes spinDisc {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Magic Circle (Center of the screen - Hogwarts Legacy Style) */
#magic-circle-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 580px;
	height: 580px;
	z-index: 3;
	pointer-events: none;
	animation: magicCirclePulse 6s ease-in-out infinite;
}

.magic-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Layer Animations */
.layer-outer {
	animation: rotateClockwise 80s linear infinite;
}

.layer-middle {
	animation: rotateCounter 50s linear infinite;
}

.layer-inner {
	animation: rotateClockwise 25s linear infinite;
}

/* Gold thin lines & shapes styling */
.ring, .shape, .ring-small, .ring-glow {
	fill: none;
	stroke: var(--gold);
	stroke-width: 1px;
	opacity: 0.45;
}

.ring-dashed {
	stroke-dasharray: 6, 6;
}

.ring-glow {
	stroke-width: 1.5px;
	opacity: 0.65;
	filter: drop-shadow(0 0 6px rgba(223, 192, 111, 0.7));
}

.magic-runes {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	fill: var(--gold);
	letter-spacing: 5px;
	opacity: 0.75;
	text-transform: uppercase;
	text-shadow: 0 0 6px rgba(223, 192, 111, 0.4);
}

.core-star {
	fill: var(--gold);
	stroke: var(--gold);
	stroke-width: 1px;
	opacity: 0.7;
	filter: drop-shadow(0 0 8px rgba(223, 192, 111, 0.8));
}

/* Central ambient magic glow */
.magic-core-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(223, 192, 111, 0.18) 0%, rgba(223, 192, 111, 0) 70%);
	pointer-events: none;
	filter: blur(10px);
	z-index: 2;
}

/* Animations */
@keyframes rotateClockwise {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes rotateCounter {
	from {
		transform: rotate(360deg);
	}
	to {
		transform: rotate(0deg);
	}
}

@keyframes magicCirclePulse {
	0%, 100% {
		opacity: 0.8;
		filter: drop-shadow(0 0 10px rgba(223, 192, 111, 0.15)) drop-shadow(0 0 20px rgba(223, 192, 111, 0.03));
	}
	50% {
		opacity: 0.98;
		filter: drop-shadow(0 0 20px rgba(223, 192, 111, 0.4)) drop-shadow(0 0 35px rgba(223, 192, 111, 0.12));
	}
}

/* Responsive adjustments */
@media (max-width: 1280px) {
	#magic-circle-container {
		width: 440px;
		height: 440px;
	}
	.magic-panel {
		width: 250px;
		padding: 16px 14px;
	}
	#music {
		right: 3%;
	}
}

@media (max-width: 990px) {
	#magic-circle-container {
		width: 350px;
		height: 350px;
		opacity: 0.3 !important; /* Dim the center circle to prioritize sidebars */
	}
	.magic-panel {
		width: 220px;
		padding: 12px 10px;
	}
	.info-label {
		font-size: 10px;
	}
	.info-value {
		font-size: 11.5px;
	}
}

@media (max-height: 700px) {
	#magic-circle-container {
		width: 350px;
		height: 350px;
	}
	.ui-corners img {
		height: 12vh;
		max-height: 120px;
	}
}