/* --- CSS Variables & Global Setup --- */
:root {
    /* Color Palette based on #CBC3E3 (Lilac) */
    --lilac-main: #CBC3E3; 
    --lilac-light: #EBE4F2; /* Lighter version for backgrounds */
    --lilac-dark: #9C8BA8;  /* Darker version for text/borders */
    --lilac-accent: #B2A4BF; /* Mid-tone for accents */
    --cream: #FFFBF5;       /* Cream for inner content boxes */
    --white: #FFFFFF;
    
    /* Shadows and Glows */
    --glow-soft: 0 0 15px rgba(203, 195, 227, 0.6);
    --glow-strong: 0 0 20px rgba(156, 139, 168, 0.8);
    --text-shadow-glow: 2px 2px 4px rgba(156, 139, 168, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.8);
    
    /* Borders and Decorations */
    --border-radius-main: 15px;
    --border-radius-inner: 8px;
    --ornate-border-style: 3px double var(--lilac-accent);
}

/* Global Resets */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Complex Background Pattern using gradients to simulate bows/roses */
    background-color: var(--lilac-light);
    background-image: 
        radial-gradient(circle at 50% 50%, var(--white) 10%, transparent 10%), /* Dots */
        radial-gradient(circle at 0% 0%, var(--lilac-main) 5%, transparent 5%),  /* Corner dots */
        repeating-linear-gradient(45deg, rgba(203, 195, 227, 0.2) 0px, rgba(203, 195, 227, 0.2) 2px, transparent 2px, transparent 10px); /* Stripes */
    background-size: 30px 30px, 60px 60px, 100% 100%;
    background-position: 0 0, 30px 30px, 0 0;
    font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', cursive, sans-serif; /* Cute font stack */
    color: var(--lilac-dark);
    display: flex;
    justify-content: center;
    padding: 20px;
    min-height: 100vh;
}

/* Helper Classes for Effects */
.box-glow { box-shadow: var(--glow-strong), inset 0 0 20px rgba(255,255,255,0.5); }
.box-glow-soft { box-shadow: var(--glow-soft); }
.text-glow { text-shadow: var(--text-shadow-glow); }

/* Custom Scrollbar for webkit browsers */
.scrollbar-custom::-webkit-scrollbar { width: 8px; }
.scrollbar-custom::-webkit-scrollbar-track { background: var(--lilac-light); border-radius: 4px; }
.scrollbar-custom::-webkit-scrollbar-thumb { background: var(--lilac-accent); border-radius: 4px; border: 2px solid var(--lilac-light); }


/* --- Main Container --- */
.neocities-container {
    background-color: var(--cream);
    width: 100%;
    max-width: 980px; /* Standard neoclassical width */
    border-radius: var(--border-radius-main);
    border: 4px solid var(--lilac-main);
    outline: 3px dashed var(--lilac-accent); /* Double border effect */
    outline-offset: -10px;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
}

/* --- Header Section --- */
.main-header {
    position: relative;
    background-color: var(--lilac-light);
    padding: 15px;
    border-bottom: var(--ornate-border-style);
}

.header-art-container {
    position: relative;
    border-radius: var(--border-radius-inner);
    overflow: hidden;
    box-shadow: inset 0 0 15px var(--lilac-accent);
}

.header-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.9; /* Blend with background slightly */
}

.site-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
    color: var(--white);
    font-weight: bold;
    /* Simulating the ribbon behind text using pseudo-element */
    z-index: 2;
}
.site-title::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; height: 60%;
    background: var(--lilac-main);
    z-index: -1;
    border-radius: 30px;
    box-shadow: var(--glow-strong);
    opacity: 0.7;
}


/* --- CSS Lace Divider (Simulated with Gradients) --- */
.lace-divider {
    height: 25px;
    width: 100%;
    background-color: var(--lilac-main);
    /* Complex gradient to simulate scalloped lace edge */
    background-image: 
        radial-gradient(circle at 10px 0, transparent 8px, var(--cream) 8px, var(--cream) 10px, transparent 10px),
        radial-gradient(circle at 10px 25px, transparent 8px, var(--cream) 8px, var(--cream) 10px, transparent 10px);
    background-size: 20px 25px;
    background-repeat: repeat-x;
    position: relative;
    z-index: 10;
}
.top-lace { margin-top: -12px; }
.bottom-lace { margin-bottom: -12px; position: absolute; bottom: 20px; left: 0; }


/* --- Navigation --- */
.main-nav {
    background-color: var(--cream);
    padding: 20px 40px;
    margin: 10px 25px;
    border-radius: 30px;
    border: 2px solid var(--lilac-accent);
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--lilac-dark);
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nav-item:hover {
    transform: translateY(-5px);
    color: var(--lilac-main);
}

/* Placeholder icons - replace background-image with actual icons */
.nav-icon {
    /* Set the size of your icons */
    width: 60px; 
    height: 60px;
    
    /* These lines remove the circle styling */
    background-color: transparent; 
    border: none;
    border-radius: 0;
    box-shadow: none;
    
    /* Layout spacing */
    margin-bottom: 5px;

    /* This ensures your image fits perfectly inside the space without cutting off */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    
    /* Optional: Adds a transition so it moves smoothly if you hover */
    transition: transform 0.3s ease;
}
.nav-text {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* --- Main Content Layout (Grid) --- */
.content-area {
    display: grid;
    /* 3 columns, middle is slightly wider */
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 25px;
    padding: 30px 40px 50px 40px;
    align-items: start;
}


/* --- Common Ornate Styles --- */
.ornate-border {
    border: 3px dotted var(--lilac-main);
    padding: 15px;
    background: var(--cream);
    border-radius: var(--border-radius-inner);
    position: relative;
}
/* Adds corner decorations using pseudo-elements */
.ornate-border::before, .ornate-border::after {
    content: '✻'; /* Floral character */
    position: absolute;
    color: var(--lilac-main);
    font-size: 1.5em;
}
.ornate-border::before { top: -10px; left: -10px; }
.ornate-border::after { bottom: -10px; right: -10px; }


/* --- Left Column: Portrait --- */
.ornate-frame-wrapper {
    text-align: center;
}

.ornate-frame-inner {
    padding: 10px;
    background: var(--lilac-light);
    border: 4px solid var(--lilac-main);
    border-radius: 10px;
    /* Layered box shadows for depth */
    box-shadow: 
        0 0 0 5px var(--cream),
        0 0 0 8px var(--lilac-accent),
        var(--glow-soft);
}

.profile-img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    border: 2px solid var(--cream);
    display: block;
}

.ribbon-label {
    margin-top: 20px;
    background: var(--lilac-main);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    box-shadow: var(--glow-soft);
}
/* CSS folded ribbon ends */
.ribbon-label::before, .ribbon-label::after {
    content: '';
    position: absolute;
    top: 10px;
    z-index: -1;
    border-style: solid;
    border-width: 15px 20px 15px 20px;
}
.ribbon-label::before {
    left: -15px;
    border-color: var(--lilac-dark) var(--lilac-main) var(--lilac-dark) transparent;
}
.ribbon-label::after {
    right: -15px;
    border-color: var(--lilac-dark) transparent var(--lilac-dark) var(--lilac-main);
}


/* --- Middle Column: Content --- */
.welcome-box {
    margin-bottom: 25px;
    text-align: center;
}

.ribbon-header {
    background: var(--lilac-main);
    color: var(--white);
    display: inline-block;
    padding: 5px 30px;
    border-radius: 15px;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    position: relative;
    top: -25px; /* Pull it up over the border */
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}

.welcome-text {
    max-height: 200px;
    overflow-y: auto;
    text-align: left;
    padding: 0 10px;
    font-size: 0.95em;
    line-height: 1.6;
}
.welcome-text p { margin-bottom: 10px; }

.chibi-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}


/* --- Right Column: Social Buttons --- */
.social-links-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ribbon-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background: var(--lilac-light);
    color: var(--lilac-dark);
    padding: 10px 15px;
    border-radius: 25px;
    border: 2px solid var(--lilac-accent);
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
    /* Creating the "stitched" ribbon look */
    box-shadow: 
        inset 0 0 0 2px var(--cream),
        0 4px 6px rgba(156, 139, 168, 0.2);
}

/* Add decorative hearts to buttons using pseudo-elements */
.ribbon-btn::before, .ribbon-btn::after {
    content: '🦋';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lilac-accent);
    font-size: 0.8em;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.ribbon-btn::before { left: 10px; }
.ribbon-btn::after { right: 10px; }

.ribbon-btn:hover {
    background: var(--lilac-main);
    color: var(--white);
    border-color: var(--lilac-main);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(156, 139, 168, 0.4);
}
.ribbon-btn:hover::before, .ribbon-btn:hover::after {
    color: var(--white);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .content-area {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
    .nav-list {
        justify-content: center;
        gap: 15px;
    }
    .site-title {
        font-size: 2.5em;
    }
}
/* --- Individual Navigation Icons --- */

/* Home Icon */
.icon-home {
    background-image: url('https://64.media.tumblr.com/7761041c986ce01efdcb5d67da326f39/87533ce142ff5f4c-e6/s1280x1920/e2305f49d8e7b366eada7caa04b1e2d1d152ecfc.pnj');
}

/* Info Icon */
.icon-info {
    background-image: url('https://64.media.tumblr.com/ce62c2bbe29e08810c70a3b6933c2bd3/04c79f47798fe7b7-d9/s500x750/9914928ceb4780e5c4d12b5ddd20084d524cca2c.gif');
}

/* Lore Icon */
.icon-lore {
    background-image: url('https://64.media.tumblr.com/377ea68fdc2b7f746f266f31267b6acc/7f94a7c20531e584-42/s400x600/0ee3f6eec0f6f6b8948488d4b3c96eb51274b33e.pnj');
}

/* Gallery Icon */
.icon-gallery {
    background-image: url('https://64.media.tumblr.com/39c6944ac125dd710b1464074d2be1d3/17f45d55b17cd38b-7f/s1280x1920/88bf07427ccb87d3ec1dc8124d3a69ee52211cca.pnj');
}

/* Diary Icon */
.icon-diary {
    background-image: url('https://64.media.tumblr.com/89383bc9b862205c3ee768f9bf9ec83b/17f45d55b17cd38b-3f/s500x750/0d73350889c5456679b63889859b2620b18061f4.pnj');
}

/* Credits Icon */
.icon-credits {
    background-image: url('https://64.media.tumblr.com/d7de03b3562ef182cea8f48fe43d4043/ce814cd7e8d737f2-8f/s250x400/6a5eaf098c2e4fefd64df2b37246cc7a600aa5dd.pnj');
}

/* Contact Icon */
.icon-contact {
    background-image: url('https://64.media.tumblr.com/674dd442a80ed5f0fdd404624b7d209e/a8986a89172997ea-c8/s1280x1920/35a1e5bfec8ace36a621ce251a083f01e5e5642c.pnj');
}
/* --- Music Player Styling --- */
.music-player {
    margin-top: 20px;
    padding: 15px;
    background: var(--cream);
    text-align: center;
    border-radius: 20px;
    border: 2px dashed var(--lilac-main) !important; /* Overriding the default ornate-border for a lighter look */
}

.player-title {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--lilac-dark);
    margin-bottom: 10px;
    font-weight: bold;
}

.custom-audio {
    width: 100%;
    height: 35px;
    filter: sepia(20%) hue-rotate(240deg) saturate(150%); /* This tints the default player to a lilac/purple hue */
    border-radius: 50px;
}

.song-info {
    margin-top: 10px;
    font-size: 0.85em;
    color: var(--lilac-accent);
    font-style: italic;
}

/* Optional: Animation to make it "pulse" slightly */
.music-player:hover {
    box-shadow: 0 0 20px rgba(203, 195, 227, 0.8);
    transform: scale(1.02);
    transition: all 0.3s ease;
}