/* General Styles */
body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    color: #fff;
    text-align: center;
    overflow-x: hidden;
}

#game-container {
    margin: 0 auto;
    padding: 20px;
}

#menu {
    margin-bottom: 20px;
}

#menu button {
    font-size: 16px;
    padding: 10px 20px;
    background-color: #ff69b4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: randomMovement 5s infinite;
}

@keyframes randomMovement {
    0% {transform: translate(0,0);}
    25% {transform: translate(5px, -5px);}
    50% {transform: translate(-5px, 5px);}
    75% {transform: translate(5px, 5px);}
    100% {transform: translate(0,0);}
}

#game-screen {
    border: 5px dashed #fff;
    padding: 20px;
    background-color: rgba(0,0,0,0.5);
}

#monkee img {
    width: 200px;
    height: auto;
    animation: spin 20s linear infinite;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

#stats {
    margin-top: 20px;
}

.progress-bar {
    margin: 10px 0;
}

.progress-bar span {
    display: block;
    margin-bottom: 5px;
}

.bar {
    width: 80%;
    background-color: #555;
    margin: 0 auto;
    position: relative;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    background-size: 600% 600%;
    animation: rainbow 5s ease infinite;
    width: 100%;
}

@keyframes rainbow {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#mood-display {
    font-size: 20px;
    margin-top: 10px;
}

#level-display {
    font-size: 20px;
    margin-top: 10px;
}

#actions {
    margin-top: 20px;
}

#actions button {
    margin: 5px;
    font-size: 16px;
    padding: 10px 15px;
    background-color: #00ced1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#quests, #achievements, #shop {
    margin-top: 20px;
}

#quests h2, #achievements h2, #shop h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

#quests ul, #achievements ul {
    list-style-type: none;
    padding: 0;
}

#quests li, #achievements li {
    background-color: rgba(255,255,255,0.2);
    margin: 5px 0;
    padding: 5px;
    border-radius: 5px;
}

.hidden {
    display: none;
}

marquee {
    font-size: 24px;
    margin-bottom: 20px;
}