/* --- 1. Global Styles & Variables --- */
:root {
    --sky-blue: #a7d1e3;
    --cloud-white: #f0f8ff;
    --dark-text: #333a45;
    --stone-grey: #e8e8e8;
    --accent-green: #5a8a6f;
    --font-headings: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --border-radius-base: 8px;
    --spacing-unit: 20px;
}

body {
    font-family: var(--font-body);
    background-color: #e4f0f6; /* Fallback color */
    background-image: url('/images/backgrounds/your_tile.png');
    background-repeat: repeat;
    background-position: center top;
    background-attachment: fixed;
    color: var(--dark-text);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--accent-green);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--dark-text);
}

/* --- 2. Site Layout --- */
.site-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/backgrounds/layout_frame.png');
    background-size: 1200px 1300px;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none;
}

.main-body-container {
    position: relative; /* The new anchor for the nav */
    max-width: 1200px; /* Or your layout width */
    margin: 80px auto; /* Centers the whole block and pushes the footer down */
    flex-grow: 1; /* Makes sure it takes up space */
}

.site-content-wrapper {
    position: relative;
    z-index: 20;
    top: 209px; /* Adjust this to match your layout's top margin */
    /* 1. Move the box's left edge to the exact center of the screen */
    left: 50%; 
    /* 2. Then, shift it left by half of its own width to perfectly center it */
    transform: translateX(-50%);
    /* 3. Now, add a margin to shift it relative to the new center point */
    /* Adjust this pixel value to move it right from the center */
    margin-left: 95px; 
    width: 728px; /* The exact width of your content area */
}

.sidebar-nav {
    position: absolute;
    z-index: 30;
    top: 0; /* Align to the top of the main-body-container */
    left: 0; /* Align to the left */
    width: 300px;  /* Adjust to the width of your nav area */
    height: 100%; /* Make it as tall as the main container */
    background: none;
    border: none;
    box-shadow: none;
    pointer-events: none; /* Make the container unclickable */
}

.main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative; /* This is the anchor for all the list items */
    height: 100%;
}

.main-nav li {
    position: absolute; /* This allows us to position each link with top/left */
    list-style-type: none;
}

.main-nav li a {
    display: block;
    width: 100%;
    height: 100%;
    /* This makes the text invisible but keeps the link functional */
    text-indent: -9999px; 
    pointer-events: auto; /* Make the links clickable */
}

/* Add this new rule. You will add more like it for the other buttons. */

#nav-home {
    top: 237px;      /* Adjust: distance from the top of the nav area */
    left: -132px;      /* Adjust: distance from the left of the nav area */
    width: 100px;    /* Adjust: width of the leaf button */
    height: 55px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-home:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-my-flock {
    top: 340px;      /* Adjust: distance from the top of the nav area */
    left: -170px;      /* Adjust: distance from the left of the nav area */
    width: 126px;    /* Adjust: width of the leaf button */
    height: 55px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-my-flock:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-nesting {
    top: 454px;      /* Adjust: distance from the top of the nav area */
    left: -177px;      /* Adjust: distance from the left of the nav area */
    width: 126px;    /* Adjust: width of the leaf button */
    height: 73px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-nesting:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-forage {
    top: 576px;      /* Adjust: distance from the top of the nav area */
    left: -183px;      /* Adjust: distance from the left of the nav area */
    width: 121px;    /* Adjust: width of the leaf button */
    height: 65px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-forage:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-inventory {
    top: 700px;      /* Adjust: distance from the top of the nav area */
    left: -178px;      /* Adjust: distance from the left of the nav area */
    width: 121px;    /* Adjust: width of the leaf button */
    height: 65px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-inventory:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-afterlife {
    top: 812px;      /* Adjust: distance from the top of the nav area */
    left: -171px;      /* Adjust: distance from the left of the nav area */
    width: 121px;    /* Adjust: width of the leaf button */
    height: 65px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-afterlife:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-logout {
    top: 1034px;      /* Adjust: distance from the top of the nav area */
    left: -97px;      /* Adjust: distance from the left of the nav area */
    width: 89px;    /* Adjust: width of the leaf button */
    height: 111px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-logout:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-news {
    top: 273px;      /* Adjust: distance from the top of the nav area */
    left: 15px;      /* Adjust: distance from the left of the nav area */
    width: 100px;    /* Adjust: width of the leaf button */
    height: 55px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-news:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-whos-online {
    top: 346px;      /* Adjust: distance from the top of the nav area */
    left: -20px;      /* Adjust: distance from the left of the nav area */
    width: 129px;    /* Adjust: width of the leaf button */
    height: 79px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-whos-online:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-games {
    top: 448px;      /* Adjust: distance from the top of the nav area */
    left: -39px;      /* Adjust: distance from the left of the nav area */
    width: 100px;    /* Adjust: width of the leaf button */
    height: 69px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-games:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-friends {
    top: 587px;      /* Adjust: distance from the top of the nav area */
    left: -39px;      /* Adjust: distance from the left of the nav area */
    width: 100px;    /* Adjust: width of the leaf button */
    height: 69px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-friends:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-messages {
    top: 712px;      /* Adjust: distance from the top of the nav area */
    left: -44px;      /* Adjust: distance from the left of the nav area */
    width: 116px;    /* Adjust: width of the leaf button */
    height: 60px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-messages:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-notifications {
    top: 791px;      /* Adjust: distance from the top of the nav area */
    left: -44px;      /* Adjust: distance from the left of the nav area */
    width: 133px;    /* Adjust: width of the leaf button */
    height: 63px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-notifications:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-my-profile {
    top: 898px;      /* Adjust: distance from the top of the nav area */
    left: -22px;      /* Adjust: distance from the left of the nav area */
    width: 133px;    /* Adjust: width of the leaf button */
    height: 60px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-my-profile:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-settings {
    top: 993px;      /* Adjust: distance from the top of the nav area */
    left: 9px;      /* Adjust: distance from the left of the nav area */
    width: 119px;    /* Adjust: width of the leaf button */
    height: 60px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-settings:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

#nav-post-news {
    top: 1144px;      /* Adjust: distance from the top of the nav area */
    left: 42px;      /* Adjust: distance from the left of the nav area */
    width: 50px;    /* Adjust: width of the leaf button */
    height: 50px;    /* Adjust: height of the leaf button */
}

/* Optional: Add a hover effect for feedback */
#nav-post-news:hover {
    /* Example: Add a subtle glow or scale effect on hover */
    transform: scale(1.05);
}

/* --- 3. Top User Info --- */

#top-user-info {
    position: absolute;
    z-index: 30;
    top: 175px;      /* Adjust this up/down */
    left: 50%;
    transform: translateX(-50%);
    margin-left: 225px; /* Adjust this left/right */
    
    /* NEW: Stack elements vertically and center the text */
    display: flex;
    flex-direction: column; 
    align-items: center;
    
    pointer-events: auto;
}

#site-clock-display {
    font-weight: bold;
    color: #555;
    margin-bottom: 1px; /* Adds space between the clock and the PFP */
}

.user-info-lower {
    display: flex;
    align-items: center;
    gap: 15px;
}

#top-user-info .player-pfp img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--accent-green);
}

#top-user-info .player-details h3 {
    margin: 0 0 5px 0;
    font-family: var(--font-headings);
}

#top-user-info .currency span {
    font-weight: bold;
    margin-right: 15px;
}


/* --- 4. Main Content Area --- */
.main-content {
    flex-grow: 1;
    background-color: white;
    padding: var(--spacing-unit);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: 888px; /* Adjust this value to fit your layout */
    overflow-y: auto;
}

.main-content h1, .main-content h2, .main-content h3 {
    font-family: var(--font-headings);
    margin-top: 0;
}

/* --- 5. Banner & Footer Area --- */
.banner-area {
    background-color: var(--dark-text);
    color: white;
    /* Reduced vertical padding to make it thinner */
    padding: 10px var(--spacing-unit); 
    text-align: center;
    margin-top: auto;
    border-top: 3px solid var(--accent-green);
    /* Reduced font size slightly */
    font-size: 0.8em;
}

/* --- 6. Public Page & Form Styles --- */
.public-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    background-color: white;
    border: 1px solid var(--stone-grey);
    border-radius: var(--border-radius-base);
    text-align: center;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--accent-green);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}
.btn:hover { background-color: var(--dark-text); }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid var(--stone-grey); border-radius: 4px; }
.message { padding: 10px; margin-bottom: 15px; border-radius: 5px; font-weight: bold; }
.message.success { background-color: #d4edda; color: #155724; }
.message.error { background-color: #f8d7da; color: #721c24; }
.message.info { background-color: #cce5ff; color: #004085; }

/* --- 7. Component Styles --- */

/* Game Cards */
.game-card.disabled {
    cursor: not-allowed;
}
.game-card.disabled img {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Paired Birds Container */
.paired-birds-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.top-notifications {
    display: flex;
    gap: 15px;
    margin-bottom: 5px; /* Space between icons and PFP */
}

.top-notifications a {
    position: relative; /* Anchor for the badge */
    display: block;
    font-size: 1.3em; /* Makes the icon emojis bigger */
    text-decoration: none;
}

.top-notifications .notification-badge {
    position: absolute; /* Positions the badge relative to the icon link */
    top: -5px;
    right: -8px;
    font-size: 0.6em; /* Make the badge text smaller */
    padding: 1px 5px;
    border: 1px solid white;
}