* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Roboto', sans-serif;
     background-color: #121212;
     color: #e0e0e0;
     line-height: 1.6;
}
/* Force dark mode - always applied */
 body {
     --text-color: white;
     --dropdown-background: #444;
}
/* Remove light mode support */
 .container {
     max-width: 80%;
     margin: 0 auto;
     padding: 20px;
     padding-bottom: 100px;
    /* Adjusted padding-bottom to make space for the footer */
}

header {
    background: #272727;
    color: #fff;
    padding: 15px 0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 80px; /* Fixed height */
}

#companyLogo {
    max-height: 50px; /* Adjust as needed */
    width: auto; /* maintain aspect ratio */
    margin-left: 20px;
}

 .header-left {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 10px;
     padding-left: 20px;
}
 .header-right {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 10px;
     padding-right: 20px;
}

/* Base styles for textarea, defaulting to dark mode appearance */
#feedback {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    background-color: #262626; /* Dark background */
    color: #e0e0e0; /* Light text */
    border-radius: 4px;
}

/* Adjustments for light mode */
body.light-mode #feedback {
    background-color: #fff; /* Light background */
    color: #333; /* Dark text */
    border: 1px solid #ccc; /* Lighter border */
}

/* Additional styles for planned features in light mode */
body.light-mode .planned-feature {
    background-color: #f4f4f4; /* Light background for the planned feature */
    color: #333; /* Ensures text inside the planned feature is dark for visibility */
}

body.light-mode .planned-feature h3 {
    color: #333; /* Dark text color for the title */
}

body.light-mode .planned-feature ul {
    background-color: #ffffff; /* Even lighter background for nested lists, if desired */
    color: #333; /* Dark text for better readability */
}

/* Ensure links within the planned-feature section are also visible */
body.light-mode .planned-feature a {
    color: #007bff; /* Example link color, adjust as needed */
}

.feedback-list {
    list-style-type: none;
    padding: 0;
}

.feedback-list li {
    background: #f2f2f2;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}

.space-above {
    margin-top: 20px;
}

.space-above2 {
    margin-top: 40px;
}

.space-below {
    margin-bottom: 20px; /* Adjust the value as needed */
}

header h1 {
    font-size: 26px; /* Adjust as needed */
    margin: 0; /* Removes default margin */
    padding: 0; /* Adjust as needed */
    line-height: 1; /* Adjust as needed */
    text-align: center;
    grid-column: 2; /* Place in the center column */
}

 footer {
     text-align: center;
     padding: 10px;
     background-color: #272727;
     color: #fff;
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
}
 #modeSwitch {
     position: relative;
     margin-left: 20px;
}
 h1 {
     font-size: 28px;
}
 h2 {
     font-size: 24px;
}
 ul {
     list-style-type: none;
     padding: 0;
}
 li {
     background: #424242;
     color: #e0e0e0;
     padding: 10px;
     margin-bottom: 10px;
     border-left: 5px solid #007bff;
     border-radius: 4px;
}
/* Light Mode Adjustments */
 .light-mode {
     background-color: #f0f0f0;
    /* Light background for the overall layout */
     color: #333;
    /* Dark text for better contrast */
}

body.light-mode .coffee-message {
    color: #ffffff; /* Sets the text color to white in light mode */
}

/* Light mode adjustments for containers like task lists, instructions, and collapsible blocks */
 .light-mode .task-list, .light-mode .task-instructions, .light-mode .collapsible, .light-mode ul {
     background-color: #ffffff;
    /* Light background */
     color: #000000;
    /* Black text for contrast */
     border: none;
    /* Remove borders if not needed */
     box-shadow: none;
    /* Remove box shadows */
     border-radius: 4px;
    /* Maintain rounded corners if desired */
}
/* Light mode adjustments for list items within task lists, instructions, and other lists */
 .light-mode .task-list li, .light-mode .task-instructions li, .light-mode ul li {
     background-color: #f4f4f4;
    /* Light background */
     color: #000000;
    /* Black text for readability */
     border-left: 5px solid #007bff;
    /* Keep the blue border for identification, or remove if not needed */
     margin-bottom: 10px;
    /* Space between items */
     padding: 10px;
    /* Padding inside items */
     border-radius: 4px;
    /* Rounded corners for items */
}
/* Retain the dark mode button styling in light mode */
 .light-mode button {
     background: #333;
    /* Dark background for buttons */
     color: #fff;
    /* Light text for buttons */
}
/* Input fields styling in light mode */
 .light-mode input[type="text"], .light-mode input[type="number"] {
     background: #fff;
    /* Light background for input fields */
     color: #333;
    /* Dark text for input fields */
     border: 1px solid #ccc;
    /* Subtle border for input fields */
}
 .custom-dropdown {
     padding: 8px 10px;
    /* Reduced padding */
     font-size: 14px;
    /* Adjust font size as needed */
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     outline: none;
}
/* Dark mode styles */
 .custom-dropdown {
     background-color: #262626;
    /* Dark background */
     color: #e0e0e0;
    /* Light text */
     border: 1px solid #444;
    /* Darker border */
}
/* Light mode styles */
 .light-mode .custom-dropdown {
     background-color: #fff;
    /* Light background */
     color: #333;
    /* Dark text */
     border: 1px solid #ccc;
    /* Lighter border */
}
 .custom-dropdown:focus {
     border-color: #007bff;
    /* Highlight color when focused */
}
 .custom-dropdown::-webkit-calendar-picker-indicator {
     color: rgba(0, 0, 0, 0);
     background: none;
     z-index: 1;
     cursor: pointer;
}
 .custom-dropdown::-ms-expand {
     display: none;
    /* Hide the default dropdown arrow in IE */
}
/* Timer color adjustment in light mode */
 .light-mode .timer {
     color: #000;
    /* Black color for timer text */
}
/* Remove any unwanted box shadows or borders that are not needed in light mode */
 .light-mode .container, .light-mode header, .light-mode footer, .light-mode button, .light-mode .header-buttons, .light-mode .buttons-container {
     box-shadow: none;
     border: none;
}
 .difficulty {
     margin-top: 5px;
     padding: 6px 4px;
    /* Reduced padding */
     font-size: 14px;
    /* Adjust font size as needed */
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     outline: none;
}
/* Dark mode styles */
 .difficulty {
     background-color: #262626;
    /* Dark background */
     color: #e0e0e0;
    /* Light text */
     border: 1px solid #444;
    /* Darker border */
}
/* Light mode styles */
 .light-mode .difficulty {
     background-color: #fff;
    /* Light background */
     color: #333;
    /* Dark text */
     border: 1px solid #ccc;
    /* Lighter border */
}
 .difficulty:focus {
     border-color: #007bff;
    /* Highlight color when focused */
}
 .difficulty::-webkit-calendar-picker-indicator {
     color: rgba(0, 0, 0, 0);
     background: none;
     z-index: 1;
     cursor: pointer;
}
 .difficulty::-ms-expand {
     display: none;
    /* Hide the default dropdown arrow in IE */
}
 .difficulty-select-container {
     text-align: center;
     margin: 20px 0;
}
 .difficulty-dropdown {
     padding: 8px 10px;
     font-size: 14px;
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     outline: none;
}
/* Light mode styles */
 body.light-mode .difficulty-dropdown {
     background-color: #fff;
    /* Light background */
     color: #333;
    /* Dark text */
     border: 1px solid #ccc;
    /* Lighter border */
}
/* Dark mode styles */
 body.dark-mode .difficulty-dropdown {
     background-color: #262626;
    /* Dark background */
     color: #e0e0e0;
    /* Light text */
     border: 1px solid #444;
    /* Darker border */
}
 .difficulty-dropdown:focus {
     border-color: #007bff;
}
 .difficulty-dropdown::-webkit-calendar-picker-indicator {
     color: rgba(0, 0, 0, 0);
     background: none;
     z-index: 1;
     cursor: pointer;
}
 .difficulty-dropdown::-ms-expand {
     display: none;
    /* Hide the default dropdown arrow in IE */
}
 button {
     display: inline-block;
     padding: 10px 20px;
     background: #333;
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s, box-shadow 0.3s;
}
 button:hover {
     background-color: #444;
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}
 ul#playerTasks li {
     margin-bottom: 15px;
}
/* Additional CSS for about.php */
 .section-spacing {
     margin: 40px 0;
    /* Adjust the space between sections */
}
 .section-spacing-large {
     margin: 80px 0;
    /* Larger space before contact section */
}
 .contact-section {
     padding-top: 20px;
    /* Optional padding for the contact section */
}
 .donate-container {
     text-align: center;
     padding: 20px;
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: #272727;
    /* Matches footer */
}
 #donateButton {
     padding: 10px 20px;
     background-color: #ffcc00;
    /* A warm, inviting color */
     color: #333;
     font-size: 16px;
     border: none;
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
     cursor: pointer;
     transition: background-color 0.3s, box-shadow 0.3s;
}
 #donateButton:hover {
     background-color: #e6b800;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
 #submitTaskButton {
     background-color: green;
     color: white;
     padding: 10px 20px;
     border: none;
     margin: 10px 0px;
     border-radius: 5px;
     cursor: pointer;
}
 #submitTaskButton:hover {
     background-color: darkgreen;
}
 .edit-btn, .remove-btn {
     border: none;
     padding: 5px 10px;
     cursor: pointer;
     border-radius: 4px;
     color: white;
     margin-left: 10px;
}
 .edit-btn {
     background-color: green;
}
 .edit-btn:hover {
     background-color: darkgreen;
}
 .remove-btn {
     background-color: red;
}
 .remove-btn:hover {
     background-color: darkred;
}
 .publish-btn {
     background-color: blue;
     border: none;
     padding: 5px 10px;
     cursor: pointer;
     border-radius: 4px;
     color: white;
     margin-left: 10px;
}
 .publish-btn:hover {
     background-color: darkblue;
}
 .header-buttons {
     display: flex;
     gap: 10px;
     margin-right: 20px;
}
 .buttons-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 20px 0;
}
 .task-list-modern {
}
 .task-list {
     width: 48%;
     float: left;
     background: #2c2c2c;
     padding: 10px 25px;
     margin: 5px 1%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     border-radius: 15px;
}
 .task-instructions {
     margin-top: 20px;
}
 #player1Instructions, #player2Instructions {
     margin-top: 30px;
    /* Adjust this value as needed */
}
 .task-hint {
     text-decoration: underline;
     cursor: help;
}
 .clear {
     clear: both;
}

.mobile-message-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #000;
    text-align: center;
    padding-top: 20%;
    box-sizing: border-box;
    z-index: 10000;
}

#spinForTask {
    background-color: green; /* Green background */
    color: white; /* White text */
}

#spinForTask:hover {
    background-color: darkgreen; /* Darker green on hover */
}

#resetTasks {
    background-color: orange; /* Orange background */
    color: white; /* White text */
}

#resetTasks:hover {
    background-color: darkorange; /* Darker orange on hover */
}

#beginButton {
    background-color: green;
    color: white;
}

#beginButton:hover {
    background-color: darkgreen;
}

.planned-feature {
    background-color: #202020; /* Slightly darker than #2c2c2c used for bullet points */
    margin-bottom: 0px; /* Adds space between each planned feature */
    padding: 10px; /* Adds space inside the planned feature box */
    border-radius: 4px; /* If you want rounded corners */
}

.planned-feature ul {
    background-color: #2c2c2c; /* Original color for bullet points */
    padding: 10px;
    border-radius: 4px;
}

.planned-feature h3 {
    color: #fff; /* Adjust text color as needed, maybe a lighter shade for better contrast */
    margin-bottom: 10px; /* Space between the title and the bullet points */
}

.collapsible {
     display: none;
     padding: 15px;
     border: 4px solid #333;
     margin: 10px 0;
}
 .collapsed {
     display: block;
}
 .player-name-input {
     margin: 10px 0;
}
 input[type="text"], input[type="number"] {
     padding: 10px;
     border: 1px solid #333;
     background: #262626;
     color: #e0e0e0;
     border-radius: 4px;
     width: 100%;
 }
input[type="password"] {
    padding: 10px;
    border: 1px solid #333;
    background: #262626;
    color: #e0e0e0;
    border-radius: 4px;
    width: 100%;
}
body.light-mode input[type="password"] {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}
 .name-form {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 20px 0;
}
 .name-form input[type="text"] {
     max-width: 300px;
     margin: 10px 0;
}
 .edit-tasks {
     text-align: right;
     margin-bottom: 20px;
}
 .timer-container {
     text-align: center;
     margin-top: 20px;
}
 .timer {
     font-size: 24px;
     font-weight: bold;
     color: #fff;
     margin-bottom: 10px;
}
/* Styles unique to changelog.css */
 .header-button {
     background: #333;
     color: #fff;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
     margin-left: 20px;
}
 .header-button:hover {
     background-color: #444;
}
 .header-placeholder {
     width: 150px;
    /* Adjust this width to match the button's width */
     height: auto;
     visibility: hidden;
}
/* Media Queries */
 @media (max-width: 768px) {
     .task-list {
         width: 100%;
         margin: 10px 0;
         float: none;
    }
}
/* User pill (logged-in username) */
.user-pill{display:inline-flex;align-items:center;gap:4px;margin-left:12px;padding:2px 8px;border-radius:14px;background:#2a2a2a;color:#b8e27a;font-weight:600;border:1px solid #3a3a3a;font-size:12px;line-height:16px;}
.user-pill .dot{display:inline-block;width:5px;height:5px;background:#71c562;border-radius:50%;}
.light-mode .user-pill{background:#eef6e9;border-color:#d7ead2;color:#2b5d26;}
.light-mode .user-pill .dot{background:#3aa23b;}

/* Environment info line */
.env-info{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 12px;}

/* OS select container for LAB mode */
.os-select-container{text-align:center;margin:20px 0;}
.os-select-container label{margin-right:10px;}

/* LAB start button styling - match main start button */
#labStartButton{
    background-color: green;
    color: white;
    display: block;
    margin: 10px auto 0;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#labStartButton:hover{
    background-color: darkgreen;
}
.env-chip{display:inline-flex;align-items:center;gap:10px;background:#2a2a2a;color:#e0e0e0;border:1px solid #3a3a3a;padding:10px 16px;border-radius:18px;font-size:14px;line-height:20px;}
.env-chip .label{opacity:.75;text-transform:uppercase;letter-spacing:.4px;font-size:12px;}
.env-chip .value{font-weight:600;color:#b8e27a;}
.env-chip .value.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.env-chip a.value{color:#87c1ff;text-decoration:none;}
.env-chip a:hover{text-decoration:underline;}
.light-mode .env-chip{background:#f4f7f4;border-color:#dfe7df;color:#222;}
.light-mode .env-chip .value{color:#2b5d26;}