/* =========================================
   GLOBAL TEXT STYLING FOR GAME UI
   ========================================= */
#nc-lobby,
#nc-lobby *,
#nc-animation-container,
#nc-animation-container * {
    color: #2c3e50 !important; /* Dark Slate-Gray text */
    text-shadow: none !important; /* Text shadow removed */
    font-family: Arial, sans-serif !important;
}

/* Lobby container */
.nc-lobby {
    padding: 20px;
    background: #f0f0f0 !important; /* Light Gray background */
    border: 2px solid #3498db; /* Professional Blue accent */
    border-radius: 10px;
}

/* Headings inside lobby */
.nc-lobby h3,
.nc-lobby h4 {
    color: #2c3e50 !important; /* Dark Slate-Gray text */
}

/* =========================================
   BUTTON STYLES - Blue, White Text
   ========================================= */
#nc-start-game,
.nc-cluemaster-panel button,
#copy-emoji-code {
    margin: 5px;
    padding: 10px 15px;
    background: #e0e0e0 !important; /* Light Gray button background */
    color: #cd7f32 !important; /* Bronze text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Removed font-weight: bold; */
    font-family: 'Inter', sans-serif !important; /* Changed font style */
    text-decoration: none;
    display: inline-block;
}

#nc-start-game:hover,
.nc-cluemaster-panel button:hover,
#copy-emoji-code:hover {
    background: #cccccc !important; /* Slightly darker gray for hover effect */
}

/* Animation container */
.nc-animation-container {
    margin-top: 20px;
    padding: 10px;
    min-height: 120px;
    background: #ffffff; /* Clean white for the text area */
    border: 1px solid #2c36f5; /* Professional Blue accent */
    font-size: 1.2em;
}

/* Emoji Result Area */
.nc-emoji-result {
    margin-top: 15px;
}

/* Emoji drop animation */
.drop-emoji {
    position: relative;
    font-size: 2em;
    animation: dropAnim 1s ease-out forwards;
}

@keyframes dropAnim {
    0% { transform: translateY(-30px); opacity: 1; }
    100% { transform: translateY(50px); opacity: 0; }
}
