body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    transition: background-color 0.5s ease; /* Smooth transition for background color */
}

.creepy-font {
    font-family: 'Creepster', cursive, 'Metal Mania', cursive, 'Nosifier', cursive, fantasy; /* Added creepy fonts */
}

h1 {
    color: #333;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.button-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

button {
    padding: 20px 40px;
    font-size: 2em;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, font-size 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    will-change: transform;
    font-family: inherit;
}

button:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

#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 */
}

@keyframes shake-mild {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes shake-strong {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-2deg); }
    20% { transform: translate(-4px, 0px) rotate(2deg); }
    30% { transform: translate(4px, 3px) rotate(0deg); }
    40% { transform: translate(2px, -1px) rotate(2deg); }
    50% { transform: translate(-2px, 3px) rotate(-1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(4px, 2px) rotate(-2deg); }
    80% { transform: translate(-2px, -1px) rotate(2deg); }
    90% { transform: translate(2px, 3px) rotate(0deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}

.shake-mild {
    animation: shake-mild 0.2s 2;
}

.shake-strong {
    animation: shake-strong 0.4s 2;
}

/* Devilish background effect */
.devilish-background {
    background-color: #8B0000; /* Dark Red */
    animation: devilish-shake 0.1s infinite;
}

@keyframes devilish-shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* New: Green background effect */
.green-background {
    background-color: #28a745; /* Brighter Green */
    animation: green-pulse 1s infinite alternate;
}

@keyframes green-pulse {
    from { background-color: #28a745; }
    to { background-color: #177c31; } /* Slightly darker green */
}

/* New: Green button racing animation */
.green-race {
    animation: green-race-path 5s linear infinite; /* 5s for one race, infinite makes it loop until removed */
    animation-iteration-count: 2; /* Races twice */
}

@keyframes green-race-path {
    0%   { transform: translate(0, 0); } /* Start relative to its initial random position */
    25%  { transform: translate(90vw, 0); } /* Move right */
    50%  { transform: translate(90vw, 90vh); } /* Move down */
    75%  { transform: translate(0, 90vh); } /* Move left */
    100% { transform: translate(0, 0); } /* Move up back to start */
}

#you-win {
    font-size: 5em;
    color: #28a745;
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#almost-good-ending {
    font-size: 4em;
    color: #20c997; /* Teal */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
    text-align: center;
}

#almost-bad-ending {
    font-size: 4em;
    color: #ffc107; /* Yellow/Orange */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
    text-align: center;
}

#bad-ending {
    font-size: 5em;
    color: #dc3545; /* Red */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#how-ending {
    font-size: 5em;
    color: #6f42c1; /* Purple */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#evil-ending {
    font-size: 5em;
    color: #660000; /* Dark Red */
    text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(255,0,0,0.3);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#best-ending {
    font-size: 5em;
    color: #FFD700; /* Gold */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#yes-im-sure-ending {
    font-size: 4em;
    color: #17a2b8; /* Cyan */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
    text-align: center;
}

#worst-ending {
    font-size: 5em;
    color: #333; /* Dark Gray */
    text-shadow: 2px 2px 0 #999, 4px 4px 0 rgba(0,0,0,0.1);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#wonderful-ending {
    font-size: 6em;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(45deg, #ff00de, #ff7f00, #ffff00, #00ff00, #00ffff, #007bff, #8a2be2);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 3px 3px 0 rgba(255,255,255,0.5);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1.5s ease-out forwards;
}

#bruh-ending {
    font-size: 6em;
    color: #8D6E63; /* A brownish, deadpan color */
    text-shadow: 2px 2px 0 #ccc, 4px 4px 0 rgba(0,0,0,0.1);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#idk-ending {
    font-size: 5em;
    color: #7B68EE; /* MediumSlateBlue - a slightly thoughtful/uncertain color */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#devilish-ending {
    font-size: 5em;
    color: #4B0082; /* Indigo - deep and ominous purple */
    text-shadow: 4px 4px 0 #000, 8px 8px 0 rgba(255,0,0,0.5);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#green-ending {
    font-size: 5em;
    color: #1a7d0d; /* Darker green for text */
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#impatient-ending {
    font-size: 5em; 
    color: #FF4500; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#patient-ending {
    font-size: 5em; 
    color: #8A2BE2; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#alternator-ending {
    font-size: 4.5em; 
    color: #DAA520; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#neutral-ending {
    font-size: 5em; 
    color: #696969; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#rapid-fire-ending {
    font-size: 5em; 
    color: #B22222; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#secret-agent-ending {
    font-size: 4.5em; 
    color: #4682B4; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#overthinker-ending {
    font-size: 4.5em; 
    color: #5F9EA0; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#the-test-ending {
    font-size: 5em; 
    color: #FFD700; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#curiosity-ending {
    font-size: 5em; 
    color: #FF69B4; 
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

#glitch-ending {
    font-size: 5em; 
    color: #800080; 
    text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(255,0,255,0.3);
    display: none; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: win-animation 1s ease-out forwards;
}

@keyframes win-animation {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

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

#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;
}

.modal {
    display: none; 
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    animation: fade-in 0.3s;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    text-align: left;
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#endings-list {
    list-style-type: none;
    padding: 0;
}

#endings-list li {
    margin-bottom: 10px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 10px; 
}

#endings-list li.unlocked .ending-name {
    color: #28a745;
    font-weight: bold;
}

.guide-button {
    padding: 5px 10px;
    font-size: 0.8em;
    background-color: #17a2b8; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; 
    white-space: nowrap; 
}

.guide-button:hover {
    background-color: #138496;
}