.podium-block {
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end; /* Ensures score stays at the bottom */
	position: relative;
}
/* quizvault Specific styling for the native date input to blend with the dark theme */
input[type="date"] {
	/* Ensures text is white */
	color: #f3f4f6;
}

/* quizvault Attempt to style the calendar icon (Browser consistency varies wildly here) */
input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1); /* Invert color for dark theme visibility */
	cursor: pointer;
	padding-right: 8px;
}

/* Ensuring the body takes up the minimum full height and centers the content */
.profile-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	padding: 2rem 1rem;
	
}


/* 1. Responsive Wrapper for all content (Max width applied and centered here) */
.profile {
	margin-left: auto; /* Centers the div horizontally */
	margin-right: auto;
	
	/* Set a fluid default width and apply max-width */
	@apply w-full md:max-w-9xl; 
	
	background-color: transparent; 
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* 2. Custom styles for accordion content transition (Mobile only) */
.accordion-content {
	/* Initial state: height 0, hidden */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

.accordion-content.is-open {
	/* Set a sufficiently large max-height when open (mobile state) */
	max-height: 500px; 
}

.backdrop-overlay {
	/* This mimics the original backdrop-blur-[6px] */
	backdrop-filter: blur(6px);
}


/* 3. Desktop Override: Force all accordion content open on md and up */
@media (min-width: 768px) { /* md breakpoint */
	.accordion-content {
		max-height: 1000px !important; /* Sufficiently large height to always show content */
		transition: none !important; /* Disable transition on desktop for instant load */
		border-top: none !important; /* Remove top border since content is always visible */
		padding-top: 0; /* Remove top padding */
	}
	.accordion-item {
		 margin-bottom: 0 !important; /* Remove bottom margin for cleaner grid look */
	}
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.modal-content {
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
    border: none;
    position: relative;
}

/* Transparent Fixed Header */
#iframe-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 0 20px;
    background: transparent; /* Fully transparent */
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10001; /* Above iframe */
    pointer-events: none; /* Allows clicking iframe behind transparent areas */
}

#iframe-header > div, 
#iframe-header > button {
    pointer-events: auto; /* Re-enable clicks for actual UI elements */
}

/* Brand Section */
.brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    padding: 6px 14px 6px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Close Button Styling */
.modal-close-btn {
    background: #ef4444 !important; /* Distinct Red */
    border: none;
    color: #ffffff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    transition: transform 0.2s, background 0.2s;
}

.modal-close-btn:hover {
    background: #dc2626 !important;
    transform: scale(1.1);
}

/* Mobile: Center Close Button at top */
@media (max-width: 768px) {
    #iframe-header {
        justify-content: center; /* Center items */
    }
    
    .brand-container {
        display: none; /* Hide logo on mobile to focus on close button */
    }
    
    .modal-close-btn {
        margin-top: 10px;
        width: 44px;
        height: 44px;
    }
}

@keyframes crown-pop {
	0% { transform: scale(0.5); opacity: 0; }
	70% { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes shine {
	0% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); }
	50% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
	100% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); }
}

@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

.animate-pop { animation: crown-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-shine { animation: shine 2s ease-in-out infinite; }

.crown-container {
	perspective: 1000px;
}