/* static/css/anagram-finder.css */

/* Container for the letter tiles */
#af-source-letters-container {
    min-height: 80px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    align-items: center;
    padding: 10px;
    margin: 0 auto;
}

/* Individual letter tile */
.letter-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: var(--primary-color);
    border: 2px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-on-primary);
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background-color 0.3s, color 0.3s, border-color 0.3s;
    user-select: none;
}

/* Hover effect for letter tiles */
.letter-tile:hover {
    transform: scale(1.05);
    cursor: pointer;
}

/* Animation for shuffle */
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.letter-tile.animate {
    animation: popIn 0.3s ease-out forwards;
}

/* Dark mode adjustments */
.dark-mode .letter-tile {
    background-color: var(--background-color-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .letter-tile:hover {
    background-color: var(--primary-color-hover-bg);
    border-color: var(--border-color);
}

/* High contrast mode */
.high-contrast-mode .letter-tile {
    background-color: var(--bg-color);
    border: 2px solid var(--text-color);
    color: var(--text-color);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Message area */
#af-message-area,
#af-setup-message-area {
    width: 100%;
    max-width: 600px; /* Match the width of the letter tile box */
    margin: 0.5rem auto; /* Center the message box */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem; /* Match the letter tile box border radius */
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none; /* Make sure clicks go through */
}

/* Show message area when it has content */
#af-message-area:not(:empty),
#af-setup-message-area:not(:empty) {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Hide message area when empty */
#af-message-area:empty,
#af-setup-message-area:empty {
    display: none;
}

/* Animation for auto-dismiss messages */
#af-message-area.auto-dismiss,
#af-setup-message-area.auto-dismiss {
    animation: none; /* Disable the keyframe animation */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#af-message-area.auto-dismiss.show,
#af-setup-message-area.auto-dismiss.show {
    opacity: 1;
    transform: translateY(0);
}

#af-message-area.auto-dismiss.hide,
#af-setup-message-area.auto-dismiss.hide {
    opacity: 0;
    transform: translateY(-10px);
}


#af-guess-input {
    text-transform: uppercase; /* Optional: force uppercase input display */
}

.af-found-words-list {
    font-size: 0.95rem;
}

.af-found-words-list .list-group-item {
    padding: 0.5rem 1rem;
    background-color: var(--list-item-bg); /* Use theme variable */
    color: var(--text-color); /* Use theme variable */
    border-color: var(--border-color-subtle); /* Use theme variable */
}

/* Dark theme overrides if needed and not covered by global styles */
body.dark-theme .af-source-letters-box {
    /* background-color: #444; */ /* Example, if var(--input-bg) isn't enough */
    /* border-color: #555; */
}

/* High contrast overrides */
body.high-contrast-theme .af-source-letters-box {
    /* border: 2px solid var(--text-color); */ /* Example */
}

#af-play-section, #af-game-over-section {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}