/* =========================================================
   COMPONENT : MusiclicMotsMeles
   Version : 1.1
   ========================================================= */

.musiclic-motsmeles{
    position:absolute;
    left:50%;
    top:50%;
    width:min(1040px,94%);
    max-height:88%;
    overflow:auto;

    transform:translate(-50%,-50%) rotate(.1deg);

    padding:26px 30px;

    background:
        linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.04)),
        #ead8b6;

    color:#2b2118;

    border-radius:8px;

    box-shadow:
        0 16px 38px rgba(0,0,0,.38);

    font-family:Georgia,"Times New Roman",serif;

    animation:musiclicMotsMelesArrive .55s ease both;
}

.musiclic-motsmeles::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:8px;
    pointer-events:none;

    box-shadow:
        inset 0 0 50px rgba(88,55,28,.22);
}

.musiclic-motsmeles>*{
    position:relative;
    z-index:1;
}

/*---------------------------------------------------------*/

.musiclic-motsmeles-header{
    border-bottom:1px solid rgba(43,33,24,.22);
    padding-bottom:12px;
    margin-bottom:18px;
}

.musiclic-motsmeles-kicker{
    display:block;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    opacity:.70;
    margin-bottom:6px;
}

.musiclic-motsmeles-title{
    display:block;
    font-size:28px;
    font-weight:normal;
    line-height:1.2;
}

.musiclic-motsmeles-intro{
    max-width:760px;
    margin:0 0 20px;
    font-size:16px;
    line-height:1.6;
}

/*---------------------------------------------------------*/

.musiclic-motsmeles-layout{

    display:grid;

    grid-template-columns:1fr 250px;

    gap:18px;

    align-items:start;

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-grid{

    display:grid;

    gap:2px;

    padding:8px;

    border-radius:8px;

    background:rgba(255,255,255,.22);

    box-shadow:
        inset 0 0 0 1px rgba(43,33,24,.16),
        0 8px 18px rgba(0,0,0,.18);

    user-select:none;
    touch-action:none;

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-cell{

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:4px;
    border:1px solid rgba(43,33,24,.16);

    background:rgba(255,255,255,.38);

    font-family:Arial,Helvetica,sans-serif;
    font-size:17px;
    font-weight:bold;

    color:#17120d;

    cursor:pointer;

    transition:
        background .15s,
        transform .15s;

}

.musiclic-motsmeles-cell:hover{

    transform:scale(1.05);

}

.musiclic-motsmeles-cell.is-selecting{

    background:rgba(163,103,30,.32);

}

.musiclic-motsmeles-cell.is-found{

    background:rgba(163,103,30,.42);

    border-color:rgba(130,76,20,.55);

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-side{

    width:250px;

    padding:14px;

    border-radius:8px;

    background:rgba(255,255,255,.24);

    box-shadow:
        inset 0 0 0 1px rgba(43,33,24,.13);

}

.musiclic-motsmeles-side-title{

    display:block;

    margin-bottom:12px;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:12px;

    opacity:.72;

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-wordlist{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 14px;
    margin:0 0 14px;
    padding:0;
    list-style:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
}

.musiclic-motsmeles-word{

    opacity:.85;

}

.musiclic-motsmeles-word.is-found{

    color:#31551f;

    font-weight:bold;

    opacity:1;

}

.musiclic-motsmeles-word.is-found::before{

    content:"✓ ";

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-explanation{

    min-height:135px;

    padding:14px;

    margin-bottom:14px;

    border-radius:7px;

    background:rgba(255,255,255,.32);

    border-left:4px solid rgba(112,34,26,.45);

    line-height:1.55;

}

.musiclic-motsmeles-explanation strong{

    display:block;

    margin-bottom:8px;

    font-size:18px;

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-progress{

    padding:10px;

    border-radius:7px;

    background:rgba(255,255,255,.25);

    text-align:center;

    font-weight:bold;

}

/*---------------------------------------------------------*/

.musiclic-motsmeles-next{

    display:none;

    width:100%;

    margin-top:16px;

}

.musiclic-motsmeles-next.is-visible{

    display:block;

}

/*---------------------------------------------------------*/

@keyframes musiclicMotsMelesArrive{

    from{

        opacity:0;

        transform:translate(-50%,-43%) rotate(.1deg);

    }

    to{

        opacity:1;

        transform:translate(-50%,-50%) rotate(.1deg);

    }

}

/*---------------------------------------------------------*/

@media(max-width:900px){

    .musiclic-motsmeles-layout{

        grid-template-columns:1fr;

    }

    .musiclic-motsmeles-side{

        width:auto;

    }

    .musiclic-motsmeles-grid{

        overflow:auto;

    }

}

@media(max-width:768px){

    .musiclic-motsmeles{

        width:90%;

        padding:22px;

        max-height:84%;

    }

    .musiclic-motsmeles-title{

        font-size:22px;

    }

    .musiclic-motsmeles-cell{

        width:28px;
        height:28px;

        font-size:15px;

    }

}