/* --- MONOCHROMATIC THEME SETTINGS --- */
:root {
    --theme-hue: 0; 
    
    /* PURE BLACK & WHITE PALETTE */
    --dark: #000000;       /* Pure Black for borders/text */
    --mid: #666666;        /* Dark Gray for stitches */
    --light: #cccccc;      /* Light Gray */
    --very-light: #ffffff; /* Pure White inside boxes */
    --white: #ffffff;
    
    --gap-size: 12px;
}

@font-face {
    font-family: 'Cavalhatriz';
    src:
         url('https://sparklez.neocities.org/Cavalhatriz.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* --- BACKGROUND PATTERN --- */
/* --- BACKGROUND PATTERN --- */
body {
    /* Changed base to BLACK so the GIF becomes dark & moody */
    background-color: #000000; 
    background-image: url('https://i2.glitter-graphics.org/pub/711/711492quxsntt3op.gif');
    background-repeat: repeat;
    background-blend-mode: luminosity; 
    
    font-family: 'Courier New', monospace; 
    color: var(--dark);
    margin: 40px 20px;
    display: flex;
    justify-content: center;
}

/* --- THE BIG CONTAINER --- */
.main-window {
    background-color: var(--white);
    width: 100%;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden; 

    /* THE TWO-TONE BORDER TRICK */
    border-style: solid;
    border-width: 4px;
    /* Top & Left = White (Pop against black body) */
    /* Bottom & Right = Black (Pop against white shadow) */
    border-color: #ffffff #000000 #000000 #ffffff;

    /* THE WHITE CORNER SHADOW */
    /* This creates the solid white block behind the black borders */
    box-shadow: 15px 15px 0px #ffffff; 
}

/* --- THE TOP BAR --- */
.window-topbar {
    background-color: var(--dark);
    color: var(--white);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    letter-spacing: 1px;
}

.window-content {
    padding: 20px;
    background-color: var(--very-light);
}

/* --- THE GRID --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-size);
    align-items: stretch;
}

/* --- THE STITCHED BOXES --- */
.box {
    background-color: var(--white);
    border: 3px solid var(--dark);
    border-radius: 15px;
    padding: 20px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* The "Stitching" Effect */
.box::before {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 2px dashed var(--mid);
    border-radius: 8px;
    pointer-events: none; /* Stops the stitches from blocking clicks */
}

/* --- HEADER STYLING --- */
.header-box {
    height: 200px; /* Made it taller so it acts like a real banner! */
    padding: 10px; /* Reduced the padding so the image fills most of the box */
}

.header-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    /* 50% keeps it centered left-to-right. 
       15% moves the focus slightly down from the top edge. */
    object-position: 50% 36.5%; 
    
    border-radius: 8px; 
    filter: grayscale(100%); 
    transform: scaleX(-1);
}

.header-text {
    position: absolute;
    bottom: 20px;
    right: 25px;
    
        font-family: 'Cavalhatriz', sans-serif;
    
    /* Text styling */
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--white);
    
    /* The cute dark label background */
    background-color: var(--dark);
    border: 2px dashed var(--mid);
    padding: 5px 15px;
    border-radius: 10px;
    
    z-index: 2; /* Keeps the text safely above the image and the box stitching */
}

/* Darker boxes for contrast (like marquees in the reference) */
.dark-box {
    background-color: var(--mid);
    color: var(--white);
}
.dark-box::before { border-color: var(--white); }

/* --- CUTE PILL HEADERS --- */
.pill-label {
    background-color: var(--white);
    border: 3px solid var(--dark);
    border-radius: 50px;
    padding: 5px 20px;
    font-weight: bold;
    margin-bottom: 10px;
    z-index: 1; /* Keeps it above the stitching */
}

/* --- LAYOUT SIZES --- */
.full-width { grid-column: 1 / 4; }

.nested-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap-size);
    height: 100%;
}

/* Force the 3 boxes to be equal height inside the column */
.nested-column .box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* specific heights */
.footer-box { height: 200px; }

/* Marquee formatting */
.box.full-width.dark-box {
    height: 50px;
    padding: 5px;
    background: #000000;
}
.box.full-width.dark-box.thin-marquee {
    height: 35px;
}

/* --- SCROLLABLE AREAS --- */
.inner-scroll {
    overflow-y: auto;
    max-height: 140px; /* Limits the height so the text scrolls */
    width: 100%;
}

/* --- HIDE ALL SCROLLBARS GLOBALLY --- */
/* For WebKit browsers (Chrome, Safari, new Edge) */
::-webkit-scrollbar {
    display: none;
}

/* For Firefox and older browsers */
* {
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

/* --- GHOST MESSAGE INTERACTION --- */


/* --- GHOST TEXT SEQUENCER --- */
.ghost-text {
    position: absolute;
    width: 100%;        /* IMPORTANT: Lets text center itself relative to the box */
    text-align: center; /* Centers the text horizontally */
    color: #ffffff;  /* White is best for 'difference' mode */
    font-size: 1.2rem;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    font-style: italic;
    pointer-events: none; 
    z-index: 100000;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
    
    /* THE MAGIC BLEND MODE */
    mix-blend-mode: difference;
    
    /* THE SOFT HALO */
    /* Since 'difference' inverts colors, a white shadow might look dark on light backgrounds.
       It creates a very cool, eerie glowing effect. */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.5);
}

/* --- THE BUTTONS (Inside the box) --- */
.interaction-container {
    display: flex;
    flex-direction: column; 
    gap: 15px; 
    height: 100%;
    justify-content: center;
    align-items: center;
    animation: fade-in 0.5s ease-in;
    
    /* ADD THIS LINE to give them space to grow! */
    padding: 20px; 
    
    /* Ensures the padding doesn't mess up the centering */
    box-sizing: border-box; 
}

/* MATCHING THE WINDOW.HTML STYLE */
.choice-btn {
    background-color: #000000; 
    color: #ffffff;
    border: 2px solid #000000;
    border-radius: 25px; /* The pill shape! */
    padding: 10px 30px;
    width: 85%; /* Fits nicely inside the box */
    
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: lowercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover Effect: Swaps to white and tilts */
.choice-btn:hover {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(1.1) rotate(-3deg); /* Toga-style tilt to the left */
}

/* Make the second button ("No") tilt the OTHER way for chaos */
.choice-btn:last-child:hover {
     transform: scale(1.1) rotate(3deg); 
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- CUSTOM HEART LIST --- */
.todo-list {
    list-style: none; /* Removes the boring black dots */
    padding: 0;
    margin: 0;
    text-align: left; /* Left-aligns text */
    /* Adds a little breathing room on the left edge of the box */
    padding-left: 10px; 
}

.todo-list li {
    position: relative;
    /* INCREASED padding to make room for the bigger heart */
    padding-left: 35px; 
    margin-bottom: 12px; /* More space between items looks cleaner */
    line-height: 1.4;
    /* Ensures the text doesn't sit weirdly high next to the icon */
    display: flex;
    align-items: center;
}

/* The Heart Icon */
.todo-list li::before {
    content: '';
    position: absolute;
    left: 0;
    
    /* NEW BIGGER SIZE (Was 13px) */
    width: 22px;  
    height: 22px;
    
    /* VERTICAL CENTERING TRICK */
    /* This places the top of the heart at the 50% mark... */
    top: 50%;
    /* ...and this shifts it back up by half its own height to perfectly center it! */
    transform: translateY(-50%);
    
    background-image: url('https://pixelbank.neocities.org/decome/hearts/1006.gif');
    /* 'contain' makes sure the whole image fits inside the 22x22 box */
    background-size: contain; 
    background-position: center; /* Ensures it doesn't get cut off on the edge */
    background-repeat: no-repeat;
    
    image-rendering: pixelated; 
}

/* --- THE PHOTO BOX --- */
.photo-box {
    /* This forces the box to fill the entire grid cell height */
    height: 100%; 
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.photo-box img {
    /* This forces the image to fill the box height 
       exactly like the three boxes next to it */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center 30%; 
    border-radius: 8px;
    display: block;
}

/* FORCE STITCHES ON TOP */
/* This ensures the dashed line is always visible over the image padding */
.photo-box::before {
    z-index: 5; 
}

/* --- LUNA BOX LAYOUT --- */
.luna-box {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 20px;
    padding: 20px;
    text-align: center; /* Centers the text block next to the icon */
}

.luna-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
}

.luna-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keeps the icon looking sharp */
    image-rendering: pixelated; 
    filter: grayscale(1);
}

.luna-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.quote-label {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: block;
}

#daily-quote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.media-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1 part Heart, 2 parts Column */
    gap: var(--gap-size);
    background: none !important; /* Removes the border/background from the wrapper */
    border: none !important;
    padding: 0 !important;
}

/* --- MINIMALIST MUSIC PLAYER --- */
.music-player-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers everything vertically */
    gap: 15px;
    padding: 20px;
    height: 100%;
}

.music-display {
    background: transparent;
    padding: 10px 0;
    border-bottom: 1px dashed var(--mid);
    border-top: 1px dashed var(--mid); /* Double dash for a frame look */
}

#music-marquee {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--dark);
    font-size: 1rem;
    text-transform: lowercase;
}

.music-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.player-btn {
    background-color: var(--white);
    border: 2px solid var(--dark);
    border-radius: 15px;
    padding: 5px 15px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-transform: lowercase;
    transition: all 0.2s ease;
}

.player-btn:hover {
    background-color: var(--dark);
    color: var(--white);
    transform: translateY(-2px);
}