/* _content/Ordla/Components/DatePicker.razor.rz.scp.css */
input[b-2vg0k7eug7] {
    padding:1rem;
}
/* _content/Ordla/Components/GameBoard.razor.rz.scp.css */

.game[b-uu2flmpro9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
}

.game-controls[b-uu2flmpro9], .game-results[b-uu2flmpro9] {    
    top: 0;
    transition: opacity .5s ease;
    transition-delay: 2s;
}

.game-controls[b-uu2flmpro9] {
    width: 100%;
}

    .game-playing .game-results[b-uu2flmpro9] {
        opacity: 0;
    }

.game-playing .game-controls[b-uu2flmpro9] {
    opacity: 1;
}

.game-finished .game-results[b-uu2flmpro9] {
    opacity: 1;
    position: static;
    z-index:100;
}

.game-finished .game-controls[b-uu2flmpro9] {
    opacity: 0;
    position: absolute;    
}

.word-rows[b-uu2flmpro9] {
    --tile-size: 60px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem 0 1.5rem 0;
}

.keyboard[b-uu2flmpro9] {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 0;
    margin: 15px 0;
    width: 100%;
    max-width: 600px;
}

    .keyboard .row[b-uu2flmpro9] {
        display: flex;
        justify-content: center;
    }

    .keyboard button[b-uu2flmpro9] {
        padding: unset;
    }

button[disabled][b-uu2flmpro9] {
    background: silver;
    color: gray;
    cursor: not-allowed;
    pointer-events:none;
}

button[b-uu2flmpro9] {
    display: inline-block;
    border: none;
    color: #fff;
    background: #808080;
    margin: 4px 3px;
    font-size: 17px;
    font-weight: bold;
    flex-grow: 1;
    flex-shrink: 1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

    button.invalid[b-uu2flmpro9] {
        background: repeating-linear-gradient(-45deg, #505050, #505050 5px, #3a3a3a 5px, #3a3a3a 10px);
    }

    button.correct[b-uu2flmpro9] {
        background: var(--green);
        color: white;
    }

    button.present[b-uu2flmpro9] {
        background: var(--yellow);
        color: white;
    }

.game-over[b-uu2flmpro9] {
    background: #333;
    max-width: 600px;
    width: 100%;
    border-radius: 2rem;
    padding: 2rem;
    text-align:center;
}

.guesses[b-uu2flmpro9] {
    margin:auto;
}

.struggling[b-uu2flmpro9] {
    background: #333333;
    padding: .5rem 1rem;
    font-weight: bold;
    border-radius: 0.5rem;
    color: #fff;
}

.hint[b-uu2flmpro9] {
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    padding: 2rem;
    border-radius: 2rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;    
    opacity: 0;
    animation: hintFlyIn-b-uu2flmpro9 0.2s ease-out forwards;
}

    .hint .letter[b-uu2flmpro9] {
        font-weight:bold;
        font-size:3rem;
    }

    .hint .words[b-uu2flmpro9] {
        display:flex;
        gap:.5rem;
        flex-wrap:wrap;
        overflow:auto;
        max-width:50vw;
        max-height:20vh;
    }

    .hint .word[b-uu2flmpro9] {
        font-weight: bold;
        background: var(--green);
        font-size:.5rem;
        padding:.5rem;
        border-radius:1rem;
    }

@keyframes hintFlyIn-b-uu2flmpro9 {
    0% {
        opacity: 0;
    }

    60% {
        opacity: .5;
    }

    100% {
        opacity: .9;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(2)
    }
}

@media (min-width: 600px) {

    .hint .words[b-uu2flmpro9] {
        max-width: 15vw;
        max-height: 10vh;
    }

    @keyframes hintFlyIn-b-uu2flmpro9 {
        0% {
            opacity: 0;
        }

        60% {
            opacity: .5;
        }

        100% {
            opacity: .9;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(4)
        }
    }
}

/* _content/Ordla/Components/GroupDetails.razor.rz.scp.css */
.group[b-3ilzw02n36] {
    border-top:2px solid #111;
    padding-top:1rem;
}

.group-head[b-3ilzw02n36] {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.group-name[b-3ilzw02n36] {
    font-weight:bold;
    font-size:18px;
    color:#999;
}

    .group-name a[b-3ilzw02n36] {
        color: #999;
    }

.group-access-code[b-3ilzw02n36] {
    color: #999;
    font-size:12px;
}

.group-participants[b-3ilzw02n36] {
    display:flex;
    flex-direction:column;
    gap:4px;
}
/* _content/Ordla/Components/GroupParticipantDetails.razor.rz.scp.css */
/* _content/Ordla/Components/MyGuess.razor.rz.scp.css */
.guess[b-4sqyym3044] {
    display:flex;
    gap:4px;    
}

    .guess > div[b-4sqyym3044] {
        text-transform:uppercase;
        font-weight:bold;
        width:32px;
        height:32px;
        display:grid;
        place-content:center;
        background:#222;
        margin-bottom:4px;
        border-radius:4px;
    }

        .guess > div.present[b-4sqyym3044] {
            background: var(--yellow);
        }

        .guess > div.correct[b-4sqyym3044] {
            background: var(--green);
        }
/* _content/Ordla/Components/Profile.razor.rz.scp.css */
.profile[b-fy8xz0s30o] {
    display:flex;
    gap:8px;
    align-items:center;
}
.profile a[b-fy8xz0s30o] {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
/* _content/Ordla/Components/ShareResult.razor.rz.scp.css */
.share[b-8q33kccyqd] {
    display:flex;
    flex-direction: row;
    gap:8px;
}

    .share button[b-8q33kccyqd] {
        flex:1;
    }
/* _content/Ordla/Components/WordRow.razor.rz.scp.css */
.word[b-ch6fco5vla] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    outline:none;
}

    .word.word--active .character[b-ch6fco5vla] {
        outline: 1px solid silver;
    }

    .word .character[b-ch6fco5vla] {
        display: block;
        border: 2px solid #333;
        margin: 2px;
        box-sizing: border-box;
        font-family: sans-serif;
        text-align: center;
        font-weight: bold;
        font-size: calc(var(--tile-size)* 0.6);
        width: var(--tile-size);
        height: var(--tile-size);
        line-height: var(--tile-size);
        position:relative;
    }

        .word .character span.background[b-ch6fco5vla] {
            display: block;
            position: absolute;
            color: white;
            width: 100%;
            height: 0%;
        }

        .word .character.present span.background[b-ch6fco5vla] {
            background: var(--yellow);            
            height: 100%;
            transition: height 1.5s ease-in;
        }

        .word .character.correct span.background[b-ch6fco5vla] {
            background: var(--green);
            height: 100%;
            transition: height 1.5s ease-in;
        }

        .word .character span[b-ch6fco5vla] {
            z-index: 2;
            position:relative;
        }
/* _content/Ordla/Shared/MainLayout.razor.rz.scp.css */
.wrap[b-fa3dosl7d4] {
    margin: 0 auto;
    max-width: 900px;
    width:100%;
}

header[b-fa3dosl7d4] {
    display: flex;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 15px;
    user-select: none;
    justify-content: space-between;
    align-items: center;
    position:relative;
}

    header h1[b-fa3dosl7d4] {
        font-size: 30px;
        margin: 0;
        outline: none;
    }

        header h1 span[b-fa3dosl7d4] {
            color: #444;
        }
