#yes-button {
    background-color: #28a745; /* Green */
}

#no-button {
    background-color: #dc3545; /* Red */
}

#maybe-button {
    background-color: #6f42c1; /* Purple */
    position: absolute;
    display: none;
    z-index: 10;
    animation: fade-in 0.5s;
    font-size: 1.5em;
    padding: 15px 30px;
}

#idk-button {
    background-color: #007bff; /* Blue */
    position: absolute;
    display: none;
    z-index: 10;
    animation: fade-in 0.5s;
    font-size: 1.5em;
    padding: 15px 30px;
}

#green-button {
    background-color: #008000; /* Darker Green for the special button */
    position: absolute;
    display: none;
    z-index: 10;
    font-size: 1.5em;
    padding: 15px 30px;
    will-change: transform; /* Optimize for animation */
}

#uhh-button { 
    background-color: #808080; /* Gray */
    position: absolute;
    display: none;
    z-index: 10;
    animation: fade-in 0.5s;
    font-size: 1.5em;
    padding: 15px 30px;
}

#reverse-button { 
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #ffc107; /* Yellow */
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 102;
}

#dark-mode-toggle { 
    position: absolute;
    top: 20px;
    left: 150px; /* Position next to reverse button */
    padding: 10px 20px;
    font-size: 1em;
    background-color: #4CAF50; /* Green color for toggle */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 102;
}

#play-again-button {
    display: none;
    margin-top: 30px;
    background-color: #007bff; /* Blue */
    font-size: 1.5em;
    padding: 15px 30px;
}

#give-up-button { 
    display: none; /* Initially hidden */
    margin-top: 10px; /* Below Play Again button */
    padding: 10px 20px; /* Smaller padding */
    font-size: 1.2em; /* Smaller font size */
    background-color: #800000; /* Dark red/maroon color for resignation */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
}

#endings-menu-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 102;
}

#guide-button { /* NEW */
    position: fixed;
    top: 60px; /* Below endings button */
    right: 20px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #17a2b8; /* Info blue */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 102;
}