.kino-back {
    position: absolute;
    width: 100dvw; height: 100dvh;
    justify-content: center; align-items: center;
    background: var(--bg-1);

    kino-face {
        display: flex;
        padding: 1em;
        position: absolute; inset: 0;
        grid-area: 0 / 0 / 1 / 1;
        gap: 1em; flex-direction: column;
    }
}

kino-deck {
    display: grid;
    width: 100%; height: 100%;
    max-width: 100%;
    justify-items: center; align-items: center;

    kino-card {
        grid-area: 1 / 1 / 2 / 2;
    }
}

kino-card {
    display: flex;
    padding: 1em;
    width: min(240px, calc(100% - 4em)); height: min(360px, calc(100% - 4em));
    background: var(--bg-2);
    border: .125em solid var(--fg-2); border-radius: 1em;
    outline: .5em solid var(--bg-2);
    justify-content: center; align-items: center;
    transition: opacity .3s;

    kino-face {
        font-size: 2em;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    &:nth-of-type(6) { opacity: 1 }
    &:nth-of-type(5) { opacity: 1 }
    &:nth-of-type(4) { opacity: .7 }
    &:nth-of-type(3) { opacity: .4 }
    &:nth-of-type(2) { opacity: .2 }
    &:nth-of-type(1) { opacity: 0 }
}

kino-search {
    display: flex;
    position: relative;
    gap: 1em;

    input { min-width: 0; flex-grow: 1; }

    ul {
        display: flex;
        margin: 0; padding: .0625em;
        position: absolute; top: calc(100% + 1em); left: 0; right: 0;
        background-color: var(--bg-2);
        flex-direction: column;
        gap: .0625em;

        li {
            padding: .5em 1em;
            list-style: none;
            background-color: var(--bg-1);
        }

        li:hover { cursor: pointer }

        li.highlighted { background: var(--bg-3)}
    }
    
    ul:not(:has(li)) { display: none }
}

.kino-wn {
    max-width: 480px;
    margin: auto;
    
    h2 { 
        font-size: 1.5em;
        text-align: center;
        margin: .25em 0;
    }

    .meaning {
        display: flex;
        flex-direction: column;

        .type-name { 
            margin-top: 1em;
            opacity: .75;
            font-size: 1.25em; font-weight: bolder; font-style: italic;
        }

        & > div {
            background: var(--bg-3);
            padding: 2em .5em;

            b { 
                display: block;
                margin: 0em 2em .5em; 
                text-indent: .5em;
            }

            .synonyms {
                display: flex;
                flex-wrap: wrap;
                margin: 0 .5em .5em;
                gap: 0 1em;

                i { font-style: italic }
            }

            .examples > * { display: block; }
        }
        & > div:nth-child(2n) {
            background: var(--bg-2);
        }
    }
}