/* --- THE BASICS --- */


:root {
    /* This is the default color if nothing is saved yet */
    --accent: #f5cbc0; 
}


body {
    font-family: serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: radial-gradient(circle, #4c47a3, #3a328a, #2c1e5c);
    color: #feebde;
    overflow-x: hidden;
    display: flex; /* Helps align sidebar and main content */
}







/* --- SIDEBAR PANEL --- */



.side-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    background: rgba(20, 15, 45, 0.95);
    border-right: 1px solid #4c47a3;
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    z-index: 1000;
    box-sizing: border-box;
}







/* --- MAIN CONTENT --- */



.main-content {
    margin-left: 260px !important;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* forces h1 h2 and postboxes to stay centered */
    width: calc(100% - 260px); 
    box-sizing: border-box; 
}

/* --- HEADERS --- */

/* Container to keep the star anchored to the text */
.title-container {
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

h1 {
    text-align: center;
    font-size: 75px;
    font-weight: bold;
    background: linear-gradient(to bottom, #feebde, #fddecf, #f5cbc0, #e7b2b9, #c3a2ba, #9c98c2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 0.85;
    margin-bottom: -10px;
    position: relative;
    animation: divineGlow 4s ease-in-out infinite alternate;

    width: fit-content;
    margin: 0 auto;
    position: relative;
    animation: divineGlow 4s ease-in-out infinite alternate;
}

    @keyframes divineGlow {
    from {
        filter: drop-shadow(0 0 5px rgba(245, 203, 192, 0.4));
    }
    to {
        filter: drop-shadow(0 0 15px rgba(245, 203, 192, 0.8)) 
                drop-shadow(0 0 25px rgba(76, 71, 163, 0.4));
    }
}

h1::before {
    content: "✦";
    position: absolute;
    left: -55px; 
    top: 50%;
    transform: translateY(-60%); 

    
    
    /* Bigger and Sharper */
    
    font-size: 60px; 
    color: var(--accent);
    text-shadow: 0 0 5px var(--accent);
}


    
    /* Tight shadow = less blur */
    
    text-shadow: 0 0 5px rgba(245, 203, 192, 0.9); 
    
    animation: starFade 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes starFade {
    0%, 100% { 
        opacity: 0.3; 
        /* Removed scale to keep it perfectly crisp */
        transform: translateY(-50%); 
    }
    50% { 
        opacity: 1; 
        transform: translateY(-50%);
    }
}


h2 {
    text-align: center;
    font-weight: normal;
    color: #9c98c2;
    margin-top: 10px;
    letter-spacing: 2px;
}

h1, h2 {
    width: fit-content;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}







/* --- DIRECTORY LINKS --- */



.panel-label {
    font-size: 10px;
    color: #9c98c2;
    letter-spacing: 4px;
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(76, 71, 163, 0.3);
    padding-bottom: 5px;
}

.dir-link {
    display: block;
    padding: 10px 12px;
    color: #feebde;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 2px;
    transition: 0.3s;
    border-radius: 4px;
}

.dir-link:hover, .dir-link.active {
    background: rgba(76, 71, 163, 0.4);
    color: #f5cbc0;
}







/* --- MINI FORGE --- */



.mini-forge {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.mini-forge input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #4c47a3;
    color: #feebde;
    padding: 8px;
    font-size: 11px;
    border-radius: 3px;
}

.mini-birth-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);     
    padding: 8px;
    cursor: pointer;
    font-size: 10px;
    letter-spacing: 2px;
    transition: 0.3s;
}

.mini-birth-btn:hover {
    background: #f5cbc0;
    color: #2c1e5c;
}







/* --- STAR REGISTRY --- */



.side-registry {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}




/* Custom Scrollbar for Registry */

.side-registry::-webkit-scrollbar { width: 3px; }
.side-registry::-webkit-scrollbar-thumb { background: #4c47a3; }







/* --- ACCOUNT HUB --- */



.profile-hub {
    margin-top: auto; /* Pushes to bottom */
    position: relative;
    padding-top: 20px;
}

.profile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: 0.2s;
}

.profile-trigger:hover { background: rgba(255, 255, 255, 0.08); }

.avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f5cbc0, #4c47a3);
    flex-shrink: 0;
}

.user-name { display: block; font-size: 11px; color: #feebde; font-weight: bold; }
.view-acc { font-size: 9px; color: #9c98c2; }




/* ACCOUNT DROPDOWN MENU */

.account-dropdown {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100%;
    background: #1a1238;
    border: 1px solid #4c47a3;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
}

.hidden { display: none; }

.acc-option {
    background: none;
    border: none;
    color: #9c98c2;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    font-size: 11px;
    transition: 0.2s;
}

.acc-option:hover {
    background: rgba(76, 71, 163, 0.3);
    color: #feebde;
}







/* --- POST BOX & FEED --- */




.post-box {
    background: rgba(44, 30, 92, 0.4);
    border: 1px solid #4c47a3;
    padding: 15px;
    margin: 20px auto 0 auto;
    border-radius: 4px;
    max-width: 400px; 
    box-sizing: border-box;
    display: flex;          /* Added to help align children */
    flex-direction: column;
    align-items: center;
}



/* Base style for all inputs in the box */

.post-box input, .post-box textarea {
    background: transparent;
    border: 1px solid rgba(156, 152, 194, 0.3);
    color: white;
    box-sizing: border-box;
}



/* "Who are you?" small box */

.post-box input#username {
    width: 100%;               
    height: 35px;             
    font-size: 12px;
    padding: 5px 10px;
    margin-bottom: 15px;     
    border-bottom: 1px solid #f5cbc0;
    text-align: center;
}

.post-box textarea {
    width: 100%;   
    display: block;
    text-align: right;
    font-size: 10px;
    color: #9c98c2;
    margin-top: -5px;     
    margin-bottom: 10px;  
}       
    
.post-box button {
    width: 100%;
    background: var(--accent); 
    color: #2c1e5c;
    border: none;
    padding: 10px;
    cursor: pointer;
    letter-spacing: 3px;
    font-weight: bold;
}

.char-counter {
    display: block;
    text-align: right;
    font-size: 10px;
    color: #9c98c2;
    letter-spacing: 1px;
    margin-top: -5px;     
    margin-bottom: 10px;  
    opacity: 0.7;
}







/* --- SPARKLES --- */




.sparkle-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -1;
}

.sparkle {
    position: absolute;
    top: -50px;
    font-size: 24px;
    color: #feebde;
    opacity: 0;
    animation: fall linear infinite;
}

@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

.sparkle:nth-child(1) { left: 15%; animation-duration: 8s; }
.sparkle:nth-child(2) { left: 40%; animation-duration: 12s; animation-delay: 2s; }
.sparkle:nth-child(3) { left: 70%; animation-duration: 7s; animation-delay: 5s; }
.sparkle:nth-child(4) { left: 90%; animation-duration: 10s; animation-delay: 3s; }



/* Registry Tiles Styling */

.tile {
    background: rgba(44, 30, 92, 0.4);
    border: 1px solid #4c47a3;
    padding: 10px;
    text-align: center;
    color: #feebde;
    border-radius: 4px;
}







/* --- SIDE PANEL ANIMATION --- */




/* transition for the slide effect */
.side-panel {
    transition: transform 0.4s ease;
}

.main-content {
    transition: margin-left 0.4s ease, width 0.4s ease;
}



/* The 'tucked' state */

body.sidebar-tucked .side-panel {
    transform: translateX(-260px); /* Slides it out of view */
}

body.sidebar-tucked .main-content {
    margin-left: 0 !important;
    width: 100%;
}



/* Toggle Button Styling */

.sidebar-toggle {
    display: block; 
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 2000;
    background: rgba(20, 15, 45, 0.8);
    color: #f5cbc0;
    border: 1px solid #4c47a3;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 10px;
    letter-spacing: 2px;
}

body.sidebar-tucked .sidebar-toggle {
    display: block;
}

.side-panel {
    transition: transform 0.4s ease;
}

body.sidebar-tucked .side-panel {
    transform: translateX(-260px);
}



/* expand main content when sidebar is tucked */

body.sidebar-tucked .main-content {
    margin-left: 0 !important;
    width: 100%;






    
/* MODAL STYLES */

    

    
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 5, 20, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.modal-card {
    background: #1a1238;
    border: 1px solid #4c47a3;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.forge-group {
    margin-bottom: 20px;
}

.forge-group label {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #9c98c2;
    margin-bottom: 8px;
}

.forge-group input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid #4c47a3;
    color: white;
    padding: 10px;
    box-sizing: border-box;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-buttons button {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid #4c47a3;
    color: white;
    cursor: pointer;
}

.modal-buttons .save-btn {
    border-color: #f5cbc0;
    color: #f5cbc0;
}


/* This hides the Sidebar, the Content, and Toggle Button until login */
body:not(.logged-in) .side-panel,
body:not(.logged-in) .main-content,
body:not(.logged-in) .sidebar-toggle {
    display: none !important;
}