/* =========================================  1. BASE & BACKGROUND  ========================================= */
* { box-sizing: border-box; }


body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Dark modern space background */
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.scene {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('galaxy.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    /* Scale the background so we have "room" to move it */
    transform: scale(1.1); 
    transition: transform 0.3s ease-out;         /* Smooths out the movement */
    overflow: hidden; 

    image-rendering: optimizeQuality;       /* Best quality scaling */
    -webkit-image-rendering: optimizeQuality; /* Safari support */

    /* 3. Hint to the browser to keep the GPU ready */
    will-change: transform;
}

#starfield {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Keep canvas behind everything */
    background: transparent; /* Ensure we can see through the canvas */
}



/* =========================================  2. THE SPACESHIP  ========================================= */
.spaceship {
    position: absolute;
    top: 72%;
    left: 68%;
    transform: translate(-50%, -50%) translateY(0);
    width: 350px;           /* Adjust this to fit your image */
    z-index: 100;

    filter: drop-shadow(0 0 20px rgb(0, 0, 0));    /* Cyan glow matching the RGB stars */
    animation: ship-engine 0s infinite alternate, ship-float 3.7s ease-in-out infinite;    /* Engine vibration and floating animation */
}

@keyframes ship-engine {
    from { transform: translate(-50%, -50%) translateY(0) rotate(0.1deg); }
    to { transform: translate(-49.5%, -50%) translateY(0) rotate(-0.1deg); }
}

@keyframes ship-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(99px); }
    50% { transform: translate(-50%, -50%) translateY(-95px); }
}



/* =========================================  4. GLASS PANEL UI DASHBOARD  ========================================= */

.glass-panel {
    position: absolute;
    bottom: var(--panel-bottom);
    left: var(--panel-left);
    width: var(--panel-width);
    z-index: 1000; /* Keeps it on top of everything */

    /* THE FIX IS HERE: Change height to auto, and add min-height */
    height: auto; 
    min-height: var(--panel-height);
    overflow: hidden;
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d; /* Helps with 3D rendering clarity */

    /* Auto-scale width on very small mobile screens */
    max-width: 90vw;

    /* Shape and Layout */
    border-radius: var(--panel-roundness);
    padding: 50px;
    box-sizing: border-box; /* Keeps padding inside the width/height */
    padding-top: 25px;
    
    /* THE GLASS EFFECT */
    background: var(--panel-bg-color);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur)); /* For Safari compatibility */
    border: 1px solid rgba(41, 0, 243, 0.642);
    box-shadow: 0 15px 35px rgb(43, 0, 255);

    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Vertical position: center, flex-start, or flex-end */
    align-items: var(--panel-align); /* Horizontal position */
    color: var(--panel-text-color);
}

.panel-title {
    margin-top: 1px;
    color: var(--panel-text-color);
    text-shadow: 0 0 0px var(--panel-text-color);
    font-size: var(--panel-title-size);
    margin-bottom: var(--panel-text-spacing);
    text-transform: uppercase;
    letter-spacing: 2.8px;
    border-bottom: 3px solid rgba(255, 255, 255, 0.232);
    width: 100%;
}

.panel-text {
    font-size: var(--panel-text-size);
    margin: 7px;
    font-family: 'Courier New', Courier, monospace; /* Gives it a "tech" feel */
    opacity: 1;
    animation: text-flicker 1s infinite;
}

@keyframes text-flicker {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}


/* =========================================  7. BACKGROUND TEXT CONTROLS  ========================================= */

:root {
    /* Background Text Controls */
    --text-top: 4%;
    --text-size: clamp(2rem, 4vw, 15rem);   /* Auto-scales based on screen size */
    --text-weight: 770;
    --text-spacing: 0.05em;
    --text-color:#b8c6ffc6;
    --text-glow: #00134d;
    --text-opacity: 1;
    --glow-strength: 20px;

    /* CONTROLS for the Glass Panel */
    --panel-width: 420px;
    --panel-height: 320px;
    --panel-bottom: 45px;
    --panel-left: 45px;
    --panel-roundness: 99px;
    --panel-bg-color: rgba(135, 166, 210, 0.188); 
    --panel-blur:4px;

    /* Dashboard Text Controls */
    --panel-title-size: 1.5rem;
    --panel-text-size: 1rem;
    --panel-text-color: #ffffff;
    --panel-text-spacing: 18px; /* Space between lines */
    --panel-align: flex-start; /* Use 'center' or 'flex-end' to move text */

    /* BUTTON CONTROLS */
    --btn-bg-color: rgb(0, 98, 255); 
    --btn-text-color: #ffffff;
    --btn-width: 40%;       /* Can be px or % */
    --btn-height: 45px;
    --btn-roundness: 50px;    /* 0px for sharp corners, higher for rounder */
    --btn-font-size: 1.3rem;
    --btn-margin-top: 30px;  /* Space between text and button */

    /* Inside Login Button */
    --login-width: 500px;
    --login-height: 400px;
    --login-roundness: 40px;
    --login-transparency: 0;
    --login-blur: 0px;

    /* === LOGIN OPTIONS CONTROLS === */
    --option-roundness: 30px;
    --option-height: 60px;
    --option-font-size: 1.1rem;
    --option-gap: 30px;
    --option-width: 100%; /* % makes it dynamic with panel size */

    /* === DONATE MODAL CONTROLS === */
    --donate-width: 720px;
    --donate-height: 430px;
    --donate-roundness: 45px;
    --donate-transparency: 0;
    --donate-blur: 40px;

    /* ======== Click Here ========= */
    --donate-btn-width: 30%;
    --donate-btn-height: 45px;
    --donate-btn-roundness: 30px;
    --donate-btn-transparency: 1;
    --donate-btn-color: 0, 72, 255;
    --donate-btn-font-size: 0.99rem;
    --donate-btn-margin-top: 60px;
}


.bg-text {
    position: absolute;
    top: var(--text-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    
    /* Responsive Constraints */
    width: 90%; 
    text-align: left;
    font-size: 3.6rem;
    font-family: 'Courier New', Courier, monospace;

    /* Ensure it doesn't wrap awkwardly on small screens */
    white-space: nowrap;

    font-weight: var(--text-weight);
    letter-spacing: var(--text-spacing);
    color: var(--text-color);
    opacity: var(--text-opacity);
    text-transform: uppercase;
    
    /* Glowing Effects */
    text-shadow: 0 0 10px var(--text-glow), 0 0 var(--glow-strength) var(--text-glow);
    user-select: none;
    pointer-events: none;
}

@media (max-width: 768px) {
    .bg-text {
        white-space: normal;    /* Allows wrapping on small screens */
        font-size: 1.8rem;
        letter-spacing: 2px;
        text-align: center;     /* Looks cleaner when wrapped */
        width: 90%;             /* Prevents edge overflow */
        word-break: break-word; /* Breaks long words if needed */
    }
}

/* This only triggers on screens smaller than 768px (Tablets/Phones) */
@media (max-width: 768px) {
    .bg-text {
        font-size: 1.8rem; /* Smaller size for mobile */
        letter-spacing: 2px; /* Tighter spacing for narrow screens */
    }
}

.glass-button {
    /* Size and Shape */
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--btn-width);
    height: var(--btn-height);
    margin: var(--btn-margin-top) auto 0 auto; /* Centers the button horizontally */

    /* Colors and Text */
    background: var(--btn-bg-color);
    color: var(--btn-text-color);
    font-size: var(--btn-font-size);
    font-weight: 550;
    letter-spacing: 1.6px;
    border-radius: var(--btn-roundness);
    
    /* Modern Glass Style */
    border: 3px solid rgba(88, 88, 88, 0.3);
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth "springy" feel */
    backdrop-filter: blur(10px);
}

/* Hover Effect - The Glow */
.glass-button:hover {
    background: rgba(0, 30, 255, 0.653);
    box-shadow: 0 0 20px rgba(0, 38, 255, 0.444);
    transform: translateY(-2.5px); /* Slight lift effect */
    border-color: rgba(255, 255, 255, 0.666);
}

/* Active Effect - When Clicked */
.glass-button:active {
    transform: scale(0.92) translateY(1px); 
    box-shadow: inset 0 0 15px rgba(114, 114, 114, 0.5); /* Adds an inner shadow for depth */
    background: rgba(0, 136, 255, 0.8);
}


/* --- THE INVISIBLE WRAPPER (Prevents Overlap Errors) --- */
.top-right-nav {
    position: fixed;
    top: 30px;    
    right: 10px;  
    z-index: 1000;
    
    display: flex;
    align-items: center;
    gap: 0px; /* This is the exact spacing between DONATE and LOGIN. Change this to move them closer/further apart */
}


/* --- THE DONATE BUTTON --- */
.glass-donate-btn {
    /* 1. Reset Browser Defaults */
    appearance: none;
    -webkit-appearance: none;
    outline: none; 
    border: none;

    /* 2. Flexbox (Locks the word "DONATE" in the exact center) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 3. SIZE: Change padding to grow/shrink the button */
    padding: 10px 20px; 
    
    /* 4. COLOR & TRANSPARENCY (rgba) */
    /* Example: I added a very slight green tint for "Donate", but you can change it! */
    background: rgba(0, 128, 255, 0.822); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    
    /* 5. ROUNDNESS & BORDER */
    border: 1px solid rgba(0, 0, 0, 0); /* Matches the green tint */
    border-radius: 100px; /* Change to 50px for a pill shape, 0px for sharp corners */

    /* 6. TEXT STYLING */
    color: #ffffff;
    font-size: 14px; 
    font-family: inherit;
    font-weight: 530;
    letter-spacing: 2px;
    
    /* 7. ANIMATION */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Donate Button Hover Effects */
.glass-donate-btn:hover {
    background: rgba(51, 255, 0, 0.244); /* Slightly brighter green on hover */
    border-color: rgb(72, 255, 0);
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.glass-donate-btn:active {
    transform: translateY(0) scale(0.98); 
}


/* --- 1. THE BLURRED BACKGROUND OVERLAY --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3000; /* High number guarantees it covers everything, even the navbar */
    
    /* This creates the dark, blurred background effect */
    background: rgba(0, 0, 0, 0); 
    backdrop-filter: blur(55px);
    -webkit-backdrop-filter: blur(55px);
    
    /* Flexbox keeps the inner panel centered. Change 'center' to 'flex-start' to move panel up */
    display: flex;
    justify-content: center; 
    align-items: center;     
    
    /* Hidden by default, smooth fade-in */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* When Javascript adds 'active', the modal appears */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- 2. THE NEW GLASS PANEL (Customizable) --- */
.glass-modal {
    position: relative;
    width: 100%;
    max-width: 450px;  /* Make this bigger for a wider window */
    padding: 100px;
    background: rgba(57, 57, 57, 0.247); 
    border-radius: 45px; 
    border: 2.3px solid rgba(255, 255, 255, 0.403);
    box-shadow: 0 0px 50px rgba(0, 81, 255, 0.44);
    
    /* Pop-in animation */
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Makes the window "pop" forward when opened */
.modal-overlay.active .glass-modal {
    transform: scale(1);
}

/* --- 3. THE CLOSE BUTTON --- */
.glass-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.852);
    font-size: 35px;
    cursor: pointer;
    transition: color 0.3s ease;
    outline: none;
}

.glass-close-btn:hover {
    color: #ff0000; /* Turns solid white on hover */
}


/* --- THE LAYOUT WRAPPER --- */
.modal-button-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    gap: 75px; 
    padding-top: 0px; /* ERROR FIX: Keeps buttons away from the X */
}

/* --- THE DYNAMIC BUTTONS --- */
.modal-btn {
    appearance: none;
    outline: none;
    border: none;
    
    width: 300px;      /* ✅ Fixed px instead of 100% */
    min-width: 300px;  /* ✅ Prevents shrinking */
    padding: 20px; 
    
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 550;
    letter-spacing: 3px;
    
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-btn:hover {
    transform: scale(1.1);
    filter: brightness(2.3);
}

.modal-btn:active {
    transform: scale(0.97);
}

/* --- INDIVIDUAL STYLES (Position & Color) --- */
.btn-travel {
    background: rgba(0, 153, 255, 0.179); 
    border: 1px solid rgba(0, 76, 255, 0.897);
    color: #00d4ff; /* Bright Cyan */
}

.btn-destroy {
    background: rgba(255, 50, 50, 0.1); 
    border: 1px solid rgba(255, 50, 50, 0.4);
    color: #ff4d4d; /* High-Alert Red */
}

.btn-war {
    background: rgba(255, 165, 0, 0.1); 
    border: 1px solid rgba(255, 166, 0, 0.408);
    color: #ffaa00; /* Warning Orange */
}


.glass-login-modal {
    position: relative;
    width: var(--login-width);
    padding: 90px;
    height: auto;
    min-height: var(--login-height);

    background: rgba(57, 57, 57, var(--login-transparency));
    backdrop-filter: blur(var(--login-blur));
    -webkit-backdrop-filter: blur(var(--login-blur));
    border-radius: var(--login-roundness);
    border: 2.5px solid rgba(255, 255, 255, 0.403);
    box-shadow: 0 0px 50px rgba(0, 81, 255, 0.44);

    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.modal-overlay.active .glass-login-modal {
    transform: scale(1);
}

.glass-login-modal .panel-title {
    margin-top: -50px;
    padding-top: 0;
    white-space: nowrap;

}




/*--------------------------------------- Donate Button ----------------------------------*/
.glass-donate-modal {
    position: relative;
    width: var(--donate-width);
    height: auto;
    min-height: var(--donate-height);
    padding: 40px 40px 40px 40px;

    background: rgba(57, 57, 57, var(--donate-transparency));
    backdrop-filter: blur(var(--donate-blur));
    -webkit-backdrop-filter: blur(var(--donate-blur));
    border-radius: var(--donate-roundness);
    border: 2.3px solid rgba(255, 255, 255, 0.403);
    box-shadow: 0 0px 50px rgba(0, 68, 255, 0.44);

    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.modal-overlay.active .glass-donate-modal {
    transform: scale(1);
}


.donate-text {
    color: rgb(255, 255, 255);
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    text-align: left;
    margin-top: 10px;
}


.donate-click-btn {
    width: var(--donate-btn-width);
    height: var(--donate-btn-height);
    margin-top: var(--donate-btn-margin-top);

    background: rgba(var(--donate-btn-color), var(--donate-btn-transparency));
    border: 10px solid rgba(var(--donate-btn-color), 0.6);
    border-radius: var(--donate-btn-roundness);

    color: #ffffff;
    font-size: var(--donate-btn-font-size);
    letter-spacing: 2px;
    font-weight: 500;

    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.donate-click-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.donate-click-btn:active {
    transform: scale(0.93);
}

.modal-warning {
    color: #ffc800;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-align: left;
    margin-bottom: 20px;
    opacity: 0.85;
    align-self: flex-start;
    margin-top: -80px;
}