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

body { margin: 0; overflow: hidden; background-color: #000000; font-family: 'Times New Roman', serif; }
#canvas-container { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }
        
/* UI Overlay - Minimalist */
#ui-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none;
    display: flex; flex-direction: column; 
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;
    /* Remove transition here as we don't hide the whole layer anymore */
}
        
/* When hidden class is applied to specific elements */
.ui-hidden {
    opacity: 0;
    pointer-events: none !important;
}

/* Loading */
#loader {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s ease-out;
}
.loader-text {
    color: #d4af37; font-size: 14px; letter-spacing: 4px; margin-top: 20px;
    text-transform: uppercase; font-weight: 100;
}
.spinner {
    width: 40px; height: 40px; border: 1px solid rgba(212, 175, 55, 0.2); 
    border-top: 1px solid #d4af37; border-radius: 50%; 
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Typography - Centerpiece */
h1 { 
    color: #fceea7; font-size: 56px; margin: 0; font-weight: 400; 
    letter-spacing: 6px; 
    text-shadow: 0 0 50px rgba(252, 238, 167, 0.6); 
    background: linear-gradient(to bottom, #fff, #eebb66);
    background-clip: text;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-family: 'Cinzel', 'Times New Roman', serif;
    opacity: 0.9;
    transition: opacity 0.5s ease; /* Ensure smooth transitions if needed */
}

/* Upload Button - Restored & Elegant */
.upload-wrapper {
    display: none !important;
    margin-top: 20px;
    pointer-events: none;
    text-align: center;
    transition: opacity 0.5s ease; /* Add transition for smooth hiding */
}
.upload-btn {
    background: rgba(20, 20, 20, 0.6); 
    border: 1px solid rgba(212, 175, 55, 0.4); 
    color: #d4af37; 
    padding: 10px 25px; 
    cursor: pointer; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    font-size: 10px;
    transition: all 0.4s;
    display: inline-block;
    backdrop-filter: blur(5px);
}
.upload-btn:hover { 
    background: #d4af37; 
    color: #000; 
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}
.hint-text {
    display: none !important;
    color: rgba(212, 175, 55, 0.5);
    font-size: 9px;
    margin-top: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#file-input { display: none; }

/* Webcam feedback */
#webcam-wrapper {
    position: fixed; top: 20px; right: 20px;
    width: 240px; height: 180px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 8px;
    overflow: hidden; 
    opacity: 1; 
    pointer-events: none;
    z-index: 50;
    background-color: #000;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    display: none;
}
        
#webcam {
    /* display: block !important; */
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
        
#webcam-preview {
    display: none;
}