/* Basic Reset & Body Styling */
body {
    padding: 0;
    margin: 0;
    overflow: hidden; /* Prevent scrollbars */
    background: radial-gradient(circle, #050B2C 0%, #0D0015 100%); /* Dark blue/purple gradient */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    font-family: 'Open Sans', sans-serif; /* Default font */
}

/* Unity Container - Centers everything */
#unity-container {
    position: relative; /* Needed for absolute positioning of children */
    width: 1280px; /* Default width, adjust as needed */
    height: 720px; /* Default height, adjust as needed */
    /* Centering is handled by body flexbox */
}

/* Canvas Styling */
#unity-canvas {
    width: 100%;
    height: 100%;
    background: #0D0015; /* Fallback background for canvas area */
}

/* Loading Bar Overlay */
#unity-loading-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex; /* Use flexbox for centering content */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    background: radial-gradient(circle at top center, #050B2C 0%, #0D0015 75%);/* Match body background */
    z-index: 10; /* Ensure it's above the canvas */
}

/* Logo Container (for image and sparkles) */
.logo-container {
    position: relative; /* For positioning sparkles */
    margin-bottom: -28px; /* Space below logo */
    text-align: center; /* Center image if it's inline-block */
}

/* Logo Image Styling */
.logo-image {
    max-width: 480px; /* Adjust max width as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevents extra space below image */
    margin-left: auto;
    margin-right: auto;
}

/* Sparkle Styling (Example) */
.sparkle {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    /* Simple 4-point star shape using pseudo-elements */
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    animation: twinkle 1.5s infinite ease-in-out;
}

.sparkle1 { top: 10%; left: 16%; animation-delay: 0s; }
.sparkle2 { top: 50%; left: 12%; animation-delay: 0.5s; }
.sparkle3 { top: 25%; right: 10%; animation-delay: 1s; }

/* Twinkle Animation */
@keyframes twinkle {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(0.7); opacity: 0.4; }
}


/* Loading Text Styling ("LOADING...") */
#unity-loading-text {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 32px;
    color: #FF8976; /* Light grey/white */
    text-align: center;
    margin-bottom: 8px; /* Space below loading text */
    letter-spacing: 1px;
}

/* Progress Bar Styling */
#unity-progress-bar-empty {
    width: 480px; /* Width of the progress bar */
    height: 40px; /* Height of the progress bar */
    background-color: #29090D; /* Dark red/brown background */
    border-radius: 20px; /* Rounded corners */
    overflow: hidden; /* Clip the inner bar */
    box-shadow: 0px 0px 48px 16px rgba(255, 32, 32, 0.2);
	outline: 5px solid #761821;
	padding: 5px; /* Add padding to create the offset */
    box-sizing: border-box; /* Include padding within width/height */
    /* overflow: hidden is usually desired here to clip the inner bar */
    overflow: hidden;
}

#unity-progress-bar-full {
    width: 0%; /* Start at 0% */
    height: 100%;
    background: linear-gradient(to right, #ff8c42, #ff6347); /* Orange/Red gradient */
    border-radius: 15px; /* Match parent's rounding */
    transition: width 0.2s ease-out; /* Smooth transition for progress updates */
}

/* Footer Styling (Optional) */
#unity-footer {
    display: none; /* Hidden by default, shown by script if needed */
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 30px; /* Adjust as needed */
    /* Add styles for fullscreen button, title etc. if using Unity's default footer elements */
}

.dot-invisible {
   visibility: hidden; /* Keeps space but doesn't draw */
   /* or opacity: 0; but visibility is usually better for layout */
}

/* Mobile adjustments (Example) */
.unity-mobile #unity-container {
    width: 100%;
    height: 100%;
}
.unity-mobile #unity-text-logo { font-size: 36px; }
.unity-mobile #unity-loading-text { font-size: 16px; }
.unity-mobile #unity-progress-bar-empty { width: 80%; }