/* =======================================
  1. GLOBAL & CORE CHECKLIST STYLES
  ======================================= */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* 🖼️ BACKGROUND IMAGE STYLES - RESTORED */
    background-image: url('https://static.wikia.nocookie.net/hollowknight/images/f/f2/Screenshot_HK_Grubs_01.png');
    background-color: #333; /* Fallback color */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    color: #eee;
    margin: 20px;
}
h1, h2, h3 {
    color: #ddd;
    border-bottom: 2px solid #555;
    padding-bottom: 5px;
}

/* Checklist Container Styles - RESTORED */
#checklist-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #777;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.85);
}

/* Grub Area Styles - RESTORED */
.grub-area {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7); 
}

/* List and List Item Styles - RESTORED */
ul {
    list-style-type: none;
    padding: 0;
}
li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}
input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.grub-item-text {
    flex-grow: 1;
}
.checked-item .grub-item-text {
    text-decoration: line-through;
    color: #888;
}
.reward-list {
    list-style-type: disc;
    margin-left: 20px;
}

/* FIX: Container to clear the float */
#top-controls {
    overflow: auto; /* Clears the float created by the logout button */
    margin-bottom: 20px;
}

/* =======================================
  2. AUTHENTICATION & NEW ELEMENT STYLES
  ======================================= */
#auth-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #777;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.85);
    text-align: center;
}
#auth-container label {
    display: block;
    width: 90%; 
    margin: 0 auto; 
    text-align: left; 
}
#auth-container input {
    width: 90%;
    display: block; 
    margin: 8px auto; 
    padding: 10px;
    border: 1px solid #555;
    background-color: #333;
    color: #eee;
    border-radius: 4px;
}
/* Generic Auth Button Style (for Login/Signup) - Modified with :not() for guest button */
#auth-container button:not(#guest-button) {
    width: 95%;
    padding: 10px;
    margin-top: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#auth-container button:not(#guest-button):hover {
    background-color: #4cae4c;
}

#auth-container button:disabled {
    cursor: not-allowed;
    background-color: #6c757d; /* Grayed-out color */
    opacity: 0.7;
}
/* 🔑 NEW: Style for the guest button */
#guest-button {
    /* Apply standard auth button styling */
    width: 95%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    /* Specific look for guest button */
    margin-top: 15px; 
    background-color: #555; 
}
#guest-button:hover {
    background-color: #333;
}

#logout-button {
    float: right;
    padding: 8px 15px;
    margin-bottom: 20px;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 🔑 NEW: Guest Status Label Style */
#guest-status {
    color: #f0ad4e; /* Yellowish/Orange color */
    font-style: italic;
    display: inline-block; 
    padding: 8px 15px;
}

/* 💡 ANIMATION STYLES (FROM FIX) */
#message-area {
    color: yellow;
    margin-bottom: 15px;
    /* The display: none is removed from the inline style of the HTML 
       and now the JS will handle the initial visibility, 
       but we define the default state here.
    */
    min-height: 20px; 
}

/* NEW: Keyframes for the pulsing animation (Kept) */
@keyframes pulse-fade {
    0% { opacity: 0.1; }
    50% { opacity: 1.0; }
    100% { opacity: 0.1; }
}

/* NEW: Class to apply the animation when connecting (Kept) */
.connecting-pulse {
    animation: pulse-fade 2s infinite ease-in-out;
}