/* Wordle styles - All components related to Wordle game */

/* WordleRanking styles - Podium display for top 3 players */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 12.5rem;
}

.podium {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    width: 100%;
    justify-content: center;
}

.podium-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 5rem;
}

.podium-avatar {
    margin-bottom: 0.5rem;
}

.podium-avatar-first {
    background-color: #FFD700 !important;
    color: white !important;
}

.podium-avatar-second {
    background-color: #C0C0C0 !important;
    color: white !important;
}

.podium-avatar-third {
    background-color: #CD7F32 !important;
    color: white !important;
}

.podium-bar {
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
}

.first-bar {
    background-color: #FFD700;
    height: 7.5rem;
}

.second-bar {
    background-color: #C0C0C0;
    height: 5.625rem;
}

.third-bar {
    background-color: #CD7F32;
    height: 4.375rem;
}

.podium-username-text {
    color: white;
    font-size: 0.7rem;
    text-align: center;
    margin-bottom: 0.25rem;
    font-weight: 400;
}

.podium-score-text {
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.white {
    color: white !important;
}

.bold {
    font-weight: bold !important;
}

/* RankingItem styles - Individual ranking row display */
.ranking-item {
    border: 0.0625rem solid #e0e0e0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.ranking-item-current {
    border: 0.125rem solid var(--mud-palette-orange-accent);
    background-color: #fff3e0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.position-number {
    font-weight: bold;
    min-width: 1.875rem;
    text-align: center;
}

.score-number {
    font-weight: bold;
}

/* WordleGame styles - Game board and tiles */
.wordle-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3125rem;
}

.word-row {
    display: flex;
    gap: 0.3125rem;
}

.tile {
    width: 3.125rem;
    height: 3.125rem;
    border: 0.125rem solid #d3d6da;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.tile.correct {
    background-color: #6aaa64;
    color: white;
    border-color: #6aaa64;
}

.tile.present {
    background-color: #c9b458;
    color: white;
    border-color: #c9b458;
}

.tile.absent {
    background-color: #787c7e;
    color: white;
    border-color: #787c7e;
}

.tile.empty {
    background-color: white;
    color: black;
}

/* WordleInfoDialog styles - Color indicator boxes */
.wordle-color-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
}

.wordle-color-box-correct {
    background-color: #6aaa64;
}

.wordle-color-box-present {
    background-color: #c9b458;
}

.wordle-color-box-absent {
    background-color: #787c7e;
}

/* Mensajes de severidad para WordleGame */
.wordle-message {
    padding-top: 0.5rem;
}

.wordle-message-info {
    color: #1976d2; /* Azul MudBlazor */
}

.text-success {
    color: var(--mud-palette-success-green) !important;
}

.text-warning {
    color: var(--mud-palette-warning-yellow) !important;
}

.text-error {
    color: var(--mud-palette-danger-red) !important;
}