/* ================================
   Global Page Styling
   ================================ */

/* Base layout and background theme */
body { 
    margin: 0;                     /* Remove default browser margin */
    overflow: hidden;             /* Prevent scrollbars */
    background: radial-gradient(circle at center, 
        #1e1b4b 0%, 
        #0f172a 50%, 
        #020617 100%);             /* Space-like gradient background */
    font-family: 'Inter', sans-serif; /* Default font */
}

/* Ensure Three.js canvas fills screen properly */
canvas { 
    display: block; 
}

/* Disable pointer events so clicks pass through UI layer */
#ui-layer { 
    pointer-events: none; 
}

/* Re-enable pointer events for interactive UI elements */
.interactive { 
    pointer-events: auto; 
}

@keyframes gold-blink {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.08); /* very subtle brightening */
    }
    100% {
        filter: brightness(1);
    }
}

.header-logo {
  width: 180px;
  max-width: 80vw;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
  margin-bottom: 15px;
}


.header-one {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* slightly bigger */
    letter-spacing: 0.12em;
    color: #FFED99; /* soft light gold */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* soft shadow */
}

.header-two {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 2.2rem; /* slightly bigger */
    letter-spacing: 0.12em;
    color: #FFED99; /* soft light gold */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* soft shadow */
}

#name-list {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    border: 2px solid #FFD700;
    cursor: pointer;

    /* Transparent background */
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFD700; /* fallback for browsers that don't support gradient in select */

    /* Remove native styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Shadow / glow */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);

    /* Gradient text trick for Chrome/Edge/Safari */
    background: linear-gradient(45deg, #FFD700, #FFF176, #FFC700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 2px #FFF176,
        0 0 4px #FFD700,
        1px 1px 3px rgba(0,0,0,0.3);

    animation: gold-blink 4s infinite alternate;
}

/* Options inside dropdown */
#name-list option {
    background-color: rgba(0, 0, 0, 0.7); /* dark but slightly transparent */
    color: #FFD700; /* gold text */
    font-weight: 700;
}


.slot-box {
    width: 600px;
    height: 200px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,241,118,0.1), rgba(255,199,0,0.2));
    box-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,241,118,0.3), 0 0 60px rgba(255,199,0,0.2);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    border: 6px solid; /* thickness of the border */
    border-image: linear-gradient(45deg, #FFD700, #FFF176, #FFC700) 1;
}


/* Canvas text */
#slotCanvas {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #FFD700;
    text-align: center;
    text-shadow:
        0 0 3px #FFF176,
        0 0 6px #FFD700,
        1px 1px 4px rgba(0,0,0,0.3);
}


/* Button shimmer */
#draw-btn {
    background: linear-gradient(45deg, #FFD700, #FFF176, #FFC700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 3px #FFF176,
        0 0 6px #FFD700,
        1px 1px 4px rgba(0,0,0,0.3);
    animation: gold-blink 4s infinite alternate;
}








/* ================================
   Glassmorphism Effect
   ================================ */

/* Frosted glass panel styling */
.glass {
    background: rgba(30, 27, 75, 0.6);      /* Semi-transparent background */
    backdrop-filter: blur(12px);           /* Blur behind the element */
    border: 1px solid rgba(139, 92, 246, 0.3); /* Soft glowing border */
}


/* ================================
   Settings Panel Animation
   ================================ */

/* Hidden state (off screen) */
.settings-panel {
    transform: translateX(110%); 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth slide animation */
}

/* Visible state */
.settings-panel.open { 
    transform: translateX(0); 
}


/* ================================
   Scanline Overlay Effect
   ================================ */

/* Retro CRT-style scanlines overlay */
.scanlines {
    position: fixed;
    inset: 0;                              /* Full screen coverage */
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 51%,
        transparent 51%
    );                                     /* Horizontal line pattern */
    background-size: 100% 4px;             /* Line spacing */
    pointer-events: none;                  /* Ignore mouse input */
    z-index: 5;                            /* Sit above content */
}


/* ================================
   Result Pop Animation
   ================================ */

/* Pop-in animation for winner display */
@keyframes success-pop {
    0% { 
        transform: scale(0.5); 
        opacity: 0; 
        filter: brightness(2); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
        filter: brightness(1); 
    }
}

/* Apply pop animation */
.animate-pop { 
    animation: success-pop 0.4s 
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}


/* ================================
   Ambient Background Glow
   ================================ */

/* Large glowing aura behind scene */
.bg-glow {
    position: fixed;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, 
        rgba(99, 102, 241, 0.1) 0%, 
        transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);      /* Center glow */
    z-index: -1;                           /* Sit behind everything */
    pointer-events: none;                 /* No mouse interaction */
}