/* ==========================================================
   MOT-LAMBDA — MOT DE LA VEILLE
   ========================================================== */

.yesterday-word-card[hidden] {
    display:
        none;
}


.yesterday-word-card {
    display:
        flex;

    margin:
        -4px
        0
        22px;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.055
        );

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #fafaf7,
            #f5f5f1
        );

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


.yesterday-word-copy {
    display:
        grid;

    min-width:
        0;

    gap:
        5px;
}


.yesterday-word-heading {
    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;
}


.yesterday-word-kicker {
    color:
        #77736d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.yesterday-word-meta {
    color:
        #aaa59e;

    font-size:
        10px;

    font-weight:
        650;
}


.yesterday-word-value {
    width:
        fit-content;

    max-width:
        100%;

    color:
        #24231f;

    font-size:
        20px;

    font-weight:
        850;

    line-height:
        1.08;

    overflow-wrap:
        anywhere;

    transition:
        opacity
        0.18s
        ease,
        transform
        0.18s
        ease;
}


.yesterday-word-value.is-masked {
    min-width:
        112px;

    padding:
        6px
        10px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.055
        );

    border-radius:
        8px;

    background:
        repeating-linear-gradient(
            -45deg,
            #e9e9e4,
            #e9e9e4 7px,
            #efefeb 7px,
            #efefeb 14px
        );

    color:
        #8c8982;

    font-size:
        15px;

    letter-spacing:
        0.16em;

    text-align:
        center;
}


.yesterday-word-hint {
    color:
        #9a958e;

    font-size:
        10px;

    line-height:
        1.35;
}


.yesterday-word-reveal {
    flex:
        0
        0
        auto;

    min-width:
        86px;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #34322e;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform
        0.12s
        ease,
        box-shadow
        0.12s
        ease,
        background
        0.12s
        ease;
}


.yesterday-word-reveal:hover {
    background:
        #fdfdfb;

    box-shadow:
        0
        5px
        15px
        rgba(
            0,
            0,
            0,
            0.055
        );

    transform:
        translateY(
            -1px
        );
}


.yesterday-word-reveal:active {
    transform:
        translateY(
            0
        );
}


.yesterday-word-reveal:disabled {
    opacity:
        0.55;

    cursor:
        wait;

    transform:
        none;
}


.yesterday-word-a11y {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;
}


/*
Le mot de la veille ne doit jamais apparaître pendant
une partie d'archive : l'utilisateur peut justement vouloir
jouer cette archive sans spoiler.
*/
body.archive-game-active
.yesterday-word-card {
    display:
        none
        !important;
}


@media (
    max-width:
        560px
) {

    .yesterday-word-card {
        padding:
            12px;

        gap:
            10px;
    }


    .yesterday-word-value {
        font-size:
            18px;
    }


    .yesterday-word-value.is-masked {
        min-width:
            96px;
    }


    .yesterday-word-hint {
        max-width:
            220px;
    }


    .yesterday-word-reveal {
        min-width:
            76px;

        padding:
            9px
            10px;
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {

    .yesterday-word-value,
    .yesterday-word-reveal {
        transition:
            none;
    }
}

/* ==========================================================
   MOT-LAMBDA V17 — FUN YESTERDAY CARD
   ========================================================== */

.yesterday-word-card {
    position:
        relative;

    overflow:
        hidden;

    margin:
        -2px
        0
        22px;

    padding:
        16px
        16px;

    border:
        1px solid
        rgba(
            196,
            141,
            58,
            0.34
        );

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at top right,
            rgba(
                255,
                183,
                76,
                0.18
            ),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0d1627 0%,
            #13243e 42%,
            #251a12 100%
        );

    box-shadow:
        0
        16px
        36px
        rgba(
            11,
            22,
            38,
            0.15
        );
}


.yesterday-word-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            rgba(
                255,
                255,
                255,
                0.08
            ) 0%,
            transparent 22%,
            transparent 78%,
            rgba(
                255,
                168,
                62,
                0.10
            ) 100%
        );

    pointer-events:
        none;
}


.yesterday-word-copy,
.yesterday-word-reveal {
    position:
        relative;

    z-index:
        1;
}


.yesterday-word-heading {
    gap:
        10px;
}


.yesterday-word-kicker {
    color:
        #ffd891;

    font-size:
        10px;

    letter-spacing:
        0.11em;
}


.yesterday-word-meta {
    color:
        rgba(
            255,
            236,
            205,
            0.72
        );

    font-size:
        10px;
}


.yesterday-word-value {
    color:
        #fff6e4;

    text-shadow:
        0
        2px
        10px
        rgba(
            0,
            0,
            0,
            0.24
        );
}


.yesterday-word-value.is-masked {
    min-width:
        126px;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(
            255,
            220,
            156,
            0.20
        );

    border-radius:
        10px;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(
                255,
                255,
                255,
                0.10
            ),
            rgba(
                255,
                255,
                255,
                0.10
            ) 8px,
            rgba(
                255,
                203,
                120,
                0.16
            ) 8px,
            rgba(
                255,
                203,
                120,
                0.16
            ) 16px
        );

    color:
        #ffe3ad;

    letter-spacing:
        0.19em;
}


.yesterday-word-hint {
    color:
        rgba(
            255,
            238,
            212,
            0.76
        );

    font-size:
        10.5px;

    line-height:
        1.4;
}


.yesterday-word-reveal {
    min-width:
        94px;

    padding:
        11px
        15px;

    border:
        1px solid
        rgba(
            255,
            204,
            125,
            0.38
        );

    border-radius:
        12px;

    background:
        linear-gradient(
            180deg,
            #ffcf7a 0%,
            #f0a73b 100%
        );

    color:
        #2f2011;

    box-shadow:
        0
        8px
        22px
        rgba(
            43,
            25,
            8,
            0.22
        );
}


.yesterday-word-reveal:hover {
    background:
        linear-gradient(
            180deg,
            #ffd68d 0%,
            #f3b24d 100%
        );

    box-shadow:
        0
        10px
        26px
        rgba(
            43,
            25,
            8,
            0.24
        );
}


.yesterday-word-reveal:disabled {
    box-shadow:
        none;
}


@media (
    max-width:
        560px
) {

    .yesterday-word-card {
        padding:
            14px
            14px;

        gap:
            12px;

        border-radius:
            16px;
    }


    .yesterday-word-value {
        font-size:
            18px;
    }


    .yesterday-word-value.is-masked {
        min-width:
            106px;
    }


    .yesterday-word-hint {
        max-width:
            230px;
    }


    .yesterday-word-reveal {
        min-width:
            82px;

        padding:
            10px
            11px;
    }
}

/* ==========================================================
   MOT-LAMBDA V18 — COMPACT YESTERDAY CARD
   ========================================================== */

.yesterday-word-card {
    margin:
        -2px
        0
        13px
        !important;

    padding:
        9px
        11px
        !important;

    min-height:
        0
        !important;

    gap:
        9px
        !important;

    border-radius:
        14px
        !important;
}


.yesterday-word-copy {
    display:
        flex
        !important;

    flex:
        1
        1
        auto;

    min-width:
        0;

    align-items:
        center
        !important;

    gap:
        10px
        !important;
}


.yesterday-word-heading {
    display:
        grid
        !important;

    flex:
        0
        0
        auto;

    align-items:
        start
        !important;

    gap:
        1px
        !important;
}


.yesterday-word-value {
    flex:
        0
        1
        auto;

    min-width:
        0;

    font-size:
        17px
        !important;

    line-height:
        1
        !important;
}


.yesterday-word-value.is-masked {
    min-width:
        98px
        !important;

    padding:
        5px
        8px
        !important;

    font-size:
        13px
        !important;
}


.yesterday-word-hint {
    display:
        none
        !important;
}


.yesterday-word-reveal {
    min-width:
        78px
        !important;

    padding:
        8px
        10px
        !important;

    border-radius:
        10px
        !important;
}


@media (
    max-width:
        560px
) {

    .yesterday-word-card {
        margin-bottom:
            10px
            !important;

        padding:
            8px
            9px
            !important;

        gap:
            7px
            !important;
    }


    .yesterday-word-copy {
        gap:
            7px
            !important;
    }


    .yesterday-word-kicker,
    .yesterday-word-meta {
        font-size:
            9px
            !important;
    }


    .yesterday-word-value {
        font-size:
            15px
            !important;
    }


    .yesterday-word-value.is-masked {
        min-width:
            82px
            !important;

        padding:
            4px
            6px
            !important;

        font-size:
            11px
            !important;
    }


    .yesterday-word-reveal {
        min-width:
            70px
            !important;

        padding:
            7px
            8px
            !important;

        font-size:
            10px
            !important;
    }
}