/* tooltips only from +500px / all others found below +600px */
@media only screen and (min-width: 500px) {

    /* TOOLTIPS */
    nav .emoji {position: relative;}

    nav .emoji .tooltip {
        display: unset;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        width: 20vw;
        margin-left: -10vw; /* 50% width */
        padding: 0.25em;
        top: 115%;
        left: 50%;
        line-height: 1.5;
        font-size: 0.5em;
        font-weight: bold;
        letter-spacing: 2px;
        text-align: center;
        color: rgba(var(--white), 1);
        background-color: rgba(var(--blueD4), 1);
        text-shadow: 2px 2px 2px rgba(var(--black), 1);
        border: 2px solid rgba(var(--blue), 1);
        -webkit-box-shadow: 2px 2px 0.25em rgba(var(--black), 1);
                box-shadow: 2px 2px 0.25em rgba(var(--black), 1);
        border-radius: var(--borderRadius);
        -webkit-transition: opacity 0.5s ease-in-out;
             -o-transition: opacity 0.5s ease-in-out;
                transition: opacity 0.5s ease-in-out;
    }

    nav .emoji .tooltip::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -0.5em;
        border: 0.5em solid;
        border-color: transparent transparent rgba(var(--blueD4), 1) transparent;
    }

    nav .emoji:hover .tooltip {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (min-width: 600px) {

    /* ROOT VARIABLES */
    :root {--card: 10vw;}

    /* BUTTONS */
    button:not(#btn-start):not(.btn-play) {width: 100%;}

    button:hover {
        color: rgba(var(--green), 1);
        background-color: rgba(var(--white), 1);
        text-shadow: none;
        border: 5px solid rgba(var(--green), 1);
        -webkit-box-shadow: 0 0 6px 0 rgba(var(--black), 0.5);
                box-shadow: 0 0 6px 0 rgba(var(--black), 0.5);
    }
    
    button:active, button:focus {-webkit-box-shadow: none; box-shadow: none;}

    /* MAIN */
    main {
        width: 100%;
        height: 100%;
        padding: 1em 0;
        grid-area: main;
        display: -ms-grid;
        display: grid;
        gap: 0.25em;
             -ms-grid-columns: 0.5em 0.25em 1fr 0.25em 0.5em 0.25em 1fr 0.25em 0.5em;
        grid-template-columns: 0.5em 1fr 0.5em 1fr 0.5em;
        -ms-grid-rows: auto 0.25em auto 0.25em auto;
        grid-template-areas:
            ". user user user ."
            ". word word word ."
            ". stats . ai .";
    }

    /* GRID: USER BOARD */
    #user-board .card .inner .back:hover {
        cursor: pointer;
        border-radius: var(--borderRadius);
        -webkit-box-shadow: 0 0 4px 3px rgba(var(--blueD4), 1);
                box-shadow: 0 0 4px 3px rgba(var(--blueD4), 1);
    }

    #user-board .back .emoji {
        font-size: 7vw;
    }

    /* GRID: AI BOARD */
    #ai-board .back .emoji {
        font-size: 3.5vw;
    }
    

    /* STATS */
    #btn-new, #btn-lingobingo, #timer, #score, #flag {width: 100%;}

    /* GAME SETUP */
    #ai {
        grid-template-areas:
            "word"
            "goal-board"
            "ai-board";
    }

    /* MODALS */
    .modal-container {
        width: 80%;
        height: 90%;
        margin: 2.5% auto;
    }

    #modal-scoreboard table td img.flag {width: 2em;}

}