/* style.css */

body {
    /* Background color for both client-side pages is #E9CDA5  */
    background-color: #E9CDA5;
    font-family: Arial, sans-serif;
}

.clooz-content {
    /* Centers the main content in the 6-column section */
    text-align: center;
}

.home-button-group {
    /* Ensures buttons are in a row */
    display: flex;
    justify-content: center;
    gap: 10px; /* Spacing between buttons */
    margin-top: 20px;
    margin-bottom: 20px;
}

.home-btn {
    /* All buttons being the same height and width */
    width: 120px;
    height: 40px;
    font-weight: bold;
    border-radius: 5px;
    padding: 0; /* Remove default padding for consistent sizing */
    line-height: 40px; /* Center text vertically */
}

.return-home-link {
    display: block;
    margin-top: -10px; /* Pulls link up closer to logo */
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* Ensure Red button is distinct */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Register and Login buttons both have transparent backgrounds */
#btn-register, #btn-login {
    background-color: transparent;
    border: 2px solid #333;
    color: #333;
}

/* Play button is green */
#btn-play {
    background-color: #28a745; /* Bootstrap green */
    border: 2px solid #28a745;
    color: white;
}

/* Game Page Styling */
.game-panel {
    background-color: white; /* White background */
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border-radius: 5px;
}

.panel-title-bar {
    background-color: black; /* Black title bar */
    color: white;
    padding: 10px;
    font-size: 1.2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-body {
    padding: 15px;
    text-align: start;
}

/* Styling for messages */
.game-message {
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px 0;
    margin-top: 10px;
    border-top: 1px solid #eee;
}

.message-error, .message-warning {
    color: red; /* Error messages and warning messages are in red */
}

.message-success {
    color: LimeGreen; /* All other messages are in green */
}

/* Clue Input/Button Row Styling */
.clue-interaction-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.clue-input-field {
    flex-grow: 1;
    padding: 0.375rem 0.75rem;
    height: 38px; /* Match standard Bootstrap button height */
}

.clue-btn {
    width: 80px; /* Width of 80px */
    height: 38px; /* Equal to the height of the answer field */
    font-weight: bold;
    padding: 0;
}

/* Hint highlighting */
.highlight-keywords {
    color: blue;
    font-weight: bold;
}

/* Yesterday's answer highlighting */
.yesterday-highlight {
    background-color: yellow;
    font-weight: bold;
    padding: 2px;
}

/* Leaderboard Styling */
.leaderboard-entry {
    cursor: default !important; /* Forces the arrow pointer */
    font-weight: normal !important; /* Removes bold */
    display: flex;
    justify-content: space-between;
}

/* Ensure no hover effects trigger since it is no longer interactive */
.leaderboard-entry:hover {
    background-color: transparent !important;
}

.leaderboard-score {
    text-align: end; /* Score is right aligned */
}

.leaderboard-panel {
    height: 96%; /* Fixed height, stretching to the bottom of the screen. */
    overflow-y: auto; /* Scrollable if necessary */
}

.leaderboard-panel-test {
	position: absolute;
	height: 100vh-140px;
	bottom: 20px;
    overflow-y: auto; /* Scrollable if necessary */
}

/* Pop-up (Modal) Styling */
.modal-title {
    font-weight: bold;
}

/* Media Query for small screens like Samsung J3 */
@media (max-width: 400px), (max-height: 650px) {
    .mt-4 { margin-top: 0.5rem !important; }
    .mb-5 { margin-bottom: 1rem !important; }
    #btn-howto img { max-height: 100px !important; margin-top: 20px !important; margin-bottom: 10px !important; }
    .clooz-content p { font-size: 1.3em !important; margin-bottom: 15px !important; }
    .home-button-group { margin-top: 10px !important; margin-bottom: 10px !important; }
    img[src="clooz_logo1.png"] { max-height: 45px !important; }
    h6 { font-size: 0.9rem; }
}

/* Inline Modal Button Layout */
.modal-body .d-flex {
    align-items: center; /* Vertically centers button with input */
}

.modal-body .btn {
    height: 38px; /* Matches standard Bootstrap input height */
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the password container behaves correctly inside the flexbox */
.modal-body .password-container {
    margin-bottom: 0; 
}

/* Media Query Adjustment for very narrow screens */
@media (max-width: 360px) {
    .modal-body .btn {
        padding: 0 10px;
        font-size: 0.9rem;
    }
}

#lookup-game-num.form-control {
    padding: 2px 5px;
    height: 30px;
    border: 1px solid #ccc;
}

#view-game-panel .panel-body {
    font-style: italic;
}