/* --- 1. GLOBAL & HOME (Your Holy Grail Code) --- */
body, html { margin: 0; padding: 0; overflow: hidden; background: #b65d73; font-family: 'Courier Prime', monospace; }

#home-canvas { position: relative; width: 100vw; height: 100vh; background: url('hbg-d9.jpeg') center/cover; }

.main-logo-script { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); font-family: 'Libre Bodoni', serif; font-style: italic; font-size: 160px; color: #edc84e; z-index: 1; white-space: nowrap; }

.pill-nav { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 500; }
.pill { background: #f0a3b2; border: 1.5px solid #3b1e1e; padding: 10px 20px; border-radius: 25px; font-weight: bold; cursor: pointer; }
.pill.active { background: #9be6f5; }

.yellow-label { font-family: 'Comic Neue', cursive; color: #edc84e; font-size: 18px; margin: 0 0 8px 0; text-align: center; width: 100%; }

.sticker { position: absolute; z-index: 100; cursor: pointer; }

/* --- 2. STICKER POSITIONS (Your Holy Grail Measurements) --- */
.music-sticker { bottom: 20px; left: 50%; transform: translateX(-50%); }
.music-card { background: #fff; padding: 12px; border: 1px solid #3b1e1e; width: 180px; position: relative; }
.album-wrap { width: 100%; height: 160px; overflow: hidden; margin-bottom: 8px; background: #eee; }
.album-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-info { font-family: 'Courier Prime', monospace; font-size: 12px; color: #333; }
.music-controls { margin-top: 5px; font-size: 10px; color: #888; text-transform: uppercase; }

.about-note { top: 60px; right: 40px; }
.paper-container { position: relative; width: 380px; }
.paper-container img { width: 100%; }
.paper-text { position: absolute; top: 28px; left: 25px; width: 230px; font-size: 12px; line-height: 1.6; color: #444; }

.tv-box { bottom: 40px; left: 40px; }
.tv-container { position: relative; width: 300px; }
.tv-frame { width: 100%; position: relative; z-index: 120; pointer-events: none; }
.tv-screen { position: absolute; top: 12px; left: 16px; width: 270px; height: 180px; z-index: 110; object-fit: cover; }

.phone-group { top: 80px; left: 40px; }
.phone-img { width: 180px; }
.status-box { position: absolute; top: 60px; left: 25px; width: 110px; font-size: 9px; font-weight: bold; }
.leaf-overlay { position: absolute; bottom: -15px; left: 130px; width: 90px; z-index: 110; }

.book-box { top: 108px; left: 62%; transform: translateX(-50%); }
.book-box img { width: 170px; }
.obsession-box { bottom: 40px; right: 40px; }
.news-img { width: 300px; }
.cookie-overlay { position: absolute; top: -200px; right: -20px; width: 110px; z-index: 130; }
/* --- THE LISTS PAGE RESTORATION --- */

body.lists-page {
    background: url('listbg.jpeg') no-repeat center center fixed !important;
    background-size: cover !important;
    overflow: visible !important; 
    display: block !important;
    position: relative; /* Allows icons to pin to the background */
    min-height: 100vh;
}

/* 1. Make the icons small AND able to be scattered */
.lists-page .sticker, 
.lists-page div[class*="icon"] { 
    position: absolute !important; /* This is the magic line that lets them move */
    width: 80px !important;
    text-align: center;
}

.lists-page img {
    width: 60px !important; /* Shrinks the actual image */
    height: auto !important;
}

/* 2. Style the text so it's readable */
.lists-page p, 
.lists-page span {
    color: white !important;
    font-family: 'Comic Neue', cursive;
    font-size: 12px;
    text-shadow: 1px 1px 2px black;
    margin: 5px 0 0 0;
    display: block;
}
/* --- THE ADVICE PAGE RESTORATION --- */
body.advice-page {
    background: url('askmaya.jpeg') repeat !important;
    background-size: 300px !important;
    overflow: visible !important;
}
}

/* --- THE ADVICE PAGE RESTORATION --- */
body.advice-page {
    background: url('askmaya.jpeg') repeat !important;
    background-size: 300px !important;
    overflow: visible !important;
}
/* --- RESTORING THE HOVER LIGHT-UP EFFECT --- */

/* This makes the icons grow and 'light up' when you touch them */
.lists-page .sticker:hover img, 
.lists-page img:hover {
    transform: scale(1.2) !important; /* Makes it 20% bigger */
    filter: brightness(1.2) !important; /* Makes it look 'lit up' */
    transition: 0.2s ease-in-out; /* Makes the grow look smooth */
    cursor: pointer;
    z-index: 999; /* Brings the hovered icon to the front */
}

/* This makes the text under the icon turn yellow when hovering */
.lists-page .sticker:hover p {
    color: #edc84e !important; /* Your gold color from the homepage */
    transition: 0.2s;
}
/* --- ADVICE PAGE BOARD FIX --- */

/* 1. Push the whole board area down so it's not under the nav */
body.advice-page main, 
body.advice-page #advice-container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding-top: 140px !important; /* This is the 'push' it needs */
    min-height: 100vh;
}

/* 2. Fix the Corkboard Frame size */
.cork-board, .cork-container {
    position: relative;
    max-width: 900px; /* Adjust this if you want it wider or thinner */
    margin: 0 auto;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.4); /* Makes it look heavy */
}

/* 3. Make sure the board image doesn't 'explode' */
.cork-board img, .cork-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. Fix the Top Text (Ask me for advice...) */
.advice-page h1, .advice-page p.top-text {
    font-family: 'Comic Neue', cursive;
    text-align: center;
    color: #333;
    background: rgba(255, 255, 255, 0.7); /* Adds a little bubble behind the text */
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 20px;
}
/* --- THE UNBREAKABLE ADVICE BOARD --- */

/* Force the page to show content and the floral background */
body.advice-page {
    background: url('askmaya.jpeg') repeat !important;
    background-size: 300px !important;
    overflow: visible !important; 
    display: block !important;
}

/* This is the box that holds the board and notes together */
.advice-container {
    position: relative !important;
    width: 800px !important;
    height: 600px !important;
    margin: 120px auto 0 auto !important; /* Pushes it down away from nav */
    display: block !important;
}

/* The board image itself */
.cork-img {
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1 !important;
}

/* The Post-its (Force them to the front) */
.post-it {
    position: absolute !important;
    width: 150px !important; /* Adjust if they are too big */
    z-index: 500 !important; /* Puts them on TOP of the board */
}

/* Exact Coordinates for your Post-its */
.white-note  { top: 50px;  left: 50px;  }
.pink-note   { top: 70px;  left: 280px; }
.green-note  { top: 200px; left: 120px; }
.yellow-note { top: 180px; left: 450px; }

/* The Advice Input Box at the bottom */
.advice-box {
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 600 !important;
    text-align: center;
    background: rgba(255,255,255,0.8);
    padding: 10px;
}