/* prefixed using https://autoprefixer.github.io */

/* sm: max-width: 559px */
/* md: min-width: 600px */
/* lg: min-width: 992px */
/* xl: min-width: 1200px */


/* FONTS */
@font-face {font-family: "emoji-one"; src: url("../fonts/emoji_one_color.ttf") format("truetype");}
@font-face {font-family: "noto"; src: url("../fonts/noto_color_emoji.ttf") format("truetype");}
@font-face {font-family: "twemoji"; src: url("../fonts/twemoji_color.ttf") format("truetype");}


/* ROOT VARIABLES */
:root {
    --red: 244, 67, 54; /*#F44336*/
    --yellowA2: 255, 255, 0; /*#FFFF00*/
    --greenL4: 200, 230, 201; /*#C8E6C9*/
    --green: 76, 175, 80; /*#4CAF50*/
    --blueL4: 187, 222, 251; /*#BBDEFB*/
    --blueL5: 227, 242, 253; /*#E3F2FD*/
    --blueX: 215, 224, 237; /*#D7E0ED*/
    --blue: 33, 150, 243; /*#2196F3*/
    --blueD4: 13, 71, 161; /*#0D47A1*/
    --white: 255, 255, 255; /*#FFFFFF*/
    --greyL2: 224, 224, 224; /*#E0E0E0*/
    --greyL5: 250, 250, 250; /*#FAFAFA*/
    --grey: 158, 158, 158; /*#9E9E9E*/
    --greyD2: 97, 97, 97; /*#616161*/
    --greyD3: 66, 66, 66; /*#424242*/
    --black: 0, 0, 0; /*#000000*/
    --card: 15vw; /* calc(40vh / 6); */
    --borderRadius: 8px;
}

/* GLOBAL SETTINGS */
* {
    margin: 0 auto;
    padding: 0;
    -webkit-tap-highlight-color: rgba(var(--black), 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

*, *::after, *::before {-webkit-box-sizing: border-box; box-sizing: border-box;}
*::-moz-selection, *::selection {background-color: transparent;}

body {
    font-family: "Arial Black", "Open Sans", "Verdana", "Helvetica Neue", sans-serif;
    height: calc(100vh - 0.5em);
    display: -ms-grid;
    display: grid;
    background-color: rgba(var(--blue), 1);
    margin: 0.5em;
    margin-top: 0;
         -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "nav"
        "main";
}

/* page border */
html::before, html::after, body::before, body::after {
    content: "";
    background-color: rgba(var(--blue), 1);
    position: fixed;
    display: block;
    z-index: 5;
}

html::after {width: 0.5em; top: 0; right: 0; bottom: 0;}
body::before {height: 0.5em; right: 0; bottom: 0; left: 0;}
body::after {width: 0.5em; top: 0; bottom: 0; left: 0;}

/* scrollbar */
body::-webkit-scrollbar-track, body::-webkit-scrollbar-corner {background-color: rgba(var(--blueL4), 1);}
body::-webkit-scrollbar {width: var(--borderRadius); height: var(--borderRadius);}
body::-webkit-scrollbar-thumb {background-color: rgba(var(--blueD4), 1);}
body::-webkit-scrollbar-thumb {border-radius: 1em;}

hr {background-color: rgba(var(--blue), 1); height: 0.25em;}

/* LINKS */
a {outline: none;}

/* BUTTONS */
button:not(#btn-start):not(.btn-play) {width: 90%;}
button {
    cursor: pointer;
    background: rgba(var(--green), 1);
    color: rgba(var(--white), 1);
    font-size: 1em;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: var(--borderRadius);
    border: 5px solid rgba(var(--white), 1);
    outline: transparent;
    text-shadow: 2px 2px 2px rgba(var(--black), 0.5);
    -webkit-box-shadow: 0 0 0 3px rgba(var(--green), 1);
            box-shadow: 0 0 0 3px rgba(var(--green), 1);
    -webkit-transition: all 0.15s ease-in-out;
         -o-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;
}

/* SELECTS */
select {cursor: pointer;}

/* CUSTOM CLASSES */
.bold {font-weight: bold;}

.disabled {
    background-color: rgba(var(--greyL2), 1);
    -webkit-box-shadow: 0 0 0 4px rgba(var(--greyL2), 1);
            box-shadow: 0 0 0 4px rgba(var(--greyL2), 1);
    pointer-events: none;
}

.disabled-audio {pointer-events: none;}

.disabled-overflow {overflow: hidden;}

/* FLAGS */
#flag .flag {width: 1.5em;}

.flag {
    width: 2.5em;
    height: auto;
    vertical-align: middle;
    border-radius: calc(var(--borderRadius) / 2);
    -webkit-box-shadow: 2px 2px 2px rgba(var(--black), 0.5);
            box-shadow: 2px 2px 2px rgba(var(--black), 0.5);
}

/* NAV */
nav {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    width: 100%;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 0.25em 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    display: -ms-grid;
    display: grid;
    grid-area: nav;
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: repeat(4, 1fr); */ /* TODO: should be 4 columns once "about modal" implemented */
    background-color: rgba(var(--blue), 0.5);
    background: -webkit-gradient(linear,
                left top, right top,
                color-stop(25%, rgba(var(--blue), 1)),
                color-stop(50%, rgba(var(--blueL4), 1)),
                color-stop(75%, rgba(var(--blue), 1)));
    background: -o-linear-gradient(left,
                rgba(var(--blue), 1) 25%,
                rgba(var(--blueL4), 1) 50%,
                rgba(var(--blue), 1) 75%);
    background: linear-gradient(90deg,
                rgba(var(--blue), 1) 25%,
                rgba(var(--blueL4), 1) 50%,
                rgba(var(--blue), 1) 75%);
}

nav .emoji {
    cursor: pointer;
    font-size: 2.5em;
}

/* TOOLTIPS */
nav .emoji .tooltip {display: none;}

/* MAIN */
main {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    width: 100%;
    height: 100%;
    padding: 1em 0;
    border-radius: var(--borderRadius);
    background-color: rgba(var(--greyL5), 1);
    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 .";
}

/* BOARD GAMES */
.card {
    background-color: transparent;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    width: 100%;
    text-align: center;
      -webkit-box-pack: center;
         -ms-flex-pack: center;
       justify-content: center;
    -ms-flex-line-pack: center;
         align-content: center;
}

.emoji {
    outline: none;
    /* font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    vertical-align: middle;
    text-shadow: 0 -2px 2px rgba(var(--white), 1), 0 2px 2px rgba(var(--black), 0.25);
}

.board {list-style-type: none;}

/* GRID: USER BOARD */
#user {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 5;
    grid-area: user;
    -ms-grid-row-align: center;
    align-self: center;
}

#user-board {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: var(--card) 0.75em var(--card) 0.75em var(--card) 0.75em var(--card) 0.75em var(--card);
    grid-template-columns: repeat(5, var(--card));
    gap: 0.75em;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

#user-board .front {
    font-size: 3em;
    font-weight: bold;
    color: rgba(var(--white), 1);
    text-shadow: 3px 3px 3px rgba(var(--black), 1);
    text-align: center;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    line-height: 1;
    height: var(--card);
    border-radius: var(--borderRadius);
    -webkit-box-shadow: 0 0 4px 1px rgba(var(--black), 0.75);
            box-shadow: 0 0 4px 1px rgba(var(--black), 0.75);
    background: -o-repeating-linear-gradient(135deg,
            rgba(var(--blue), 1),
            rgba(var(--blue), 1) 0.25em,
            rgba(var(--blueL4), 1) 0.25em,
            rgba(var(--blueL4), 1) 0.5em);
    background: repeating-linear-gradient(-45deg,
            rgba(var(--blue), 1),
            rgba(var(--blue), 1) 0.25em,
            rgba(var(--blueL4), 1) 0.25em,
            rgba(var(--blueL4), 1) 0.5em);
}

#user-board .inner,
#ai-board .inner {
    position: relative;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    -o-transition: transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#user-board .inner {
    width: var(--card);
    height: var(--card);
}

#user-board .card .inner.flipped,
#ai-board .card .inner.flipped {
    -webkit-transform: rotateY(180deg); /* fixes Safari */
            transform: rotateY(180deg);
}

#user-board .front,
#user-board .back,
#ai-board .front,
#ai-board .back {
    position: absolute;
    -webkit-backface-visibility: hidden; /* fixes Safari */
    backface-visibility: hidden;
}

#user-board .front,
#user-board .back {
    width: var(--card);
    height: var(--card);
}

#user-board .back,
#ai-board .back {
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    background-color: rgba(var(--white), 1);
}
        
#user-board .back {
    border-radius: var(--borderRadius);
    -webkit-box-shadow: 0 0 4px 1px rgba(var(--black), 0.75);
            box-shadow: 0 0 4px 1px rgba(var(--black), 0.75);
}

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

/* user has correct card */
#user-board .card .inner .back.correct {
    background-color: rgba(var(--green), 1);
    border-radius: var(--borderRadius);
    cursor: default;
    pointer-events: none;
}

/* user has incorrect card | wiggle effect : https://stackoverflow.com/a/15991184 */
#user-board .card .inner .back.incorrect {
    border-radius: var(--borderRadius);
    background-color: rgba(var(--red), 1);
    -webkit-animation: wiggleCard 0.5s linear;
            animation: wiggleCard 0.5s linear;
}

/* user has incorrect LingoBingo */
#user-board.incorrect .card {
    border-radius: var(--borderRadius);
    -webkit-box-shadow: 0 0 4px 4px rgba(var(--red), 1);
            box-shadow: 0 0 4px 4px rgba(var(--red), 1);
    -webkit-animation: wiggleBoard 0.5s linear;
            animation: wiggleBoard 0.5s linear;
}

/* user won - pulse winning cards */
#user-board .card .inner .back.correct.winning-tiles,
.chicken-dinner {
    -webkit-animation: pulseUser 2s ease-out infinite;
            animation: pulseUser 2s ease-out infinite;
}

/* STATS */
#btn-new {-ms-grid-row: 1; -ms-grid-column: 1; grid-area: btn-new;}
#btn-lingobingo {-ms-grid-row: 3; -ms-grid-column: 1; grid-area: btn-lingobingo;}
#timer {-ms-grid-row: 5; -ms-grid-column: 1; grid-area: timer;}
#score {-ms-grid-row: 7; -ms-grid-column: 1; grid-area: score;}
#flag {-ms-grid-row: 9; -ms-grid-column: 1; grid-area: flag;}

#stats {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    width: 100%;
    grid-area: stats;
    display: -ms-grid;
    display: grid;
    text-align: center;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    gap: 0.5em;
    -ms-grid-rows: 1fr 0.5em 1fr 0.5em 1fr 0.5em 1fr 0.5em 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
        "btn-new"
        "btn-lingobingo"
        "timer"
        "score"
        "flag";
}

#btn-new, #btn-lingobingo, #timer, #score, #flag {
    width: 90%;
    height: 90%;
    display: -ms-grid;
    display: grid;
    font-size: 1.25em;
    -ms-flex-line-pack: center;
         align-content: center;
    border-radius: var(--borderRadius);
}

#timer, #score, #flag {
    background-color: rgba(var(--blueX), 1);
    border: 5px solid rgba(var(--white), 1);
    outline: transparent;
    text-shadow: 0 -2px 2px rgba(var(--white), 1), 0 2px 2px rgba(var(--black), 0.25);
    -webkit-box-shadow: 0 0 6px rgba(var(--blueD4), 1);
            box-shadow: 0 0 6px rgba(var(--blueD4), 1);
}

/* STATS: SCORE & TIMER */
#score.correct, #score.incorrect, #timer.correct, #timer.incorrect {
    color: rgba(var(--white), 1); text-shadow: 2px 2px 2px rgba(var(--black), 0.5);
}
#score.correct, #timer.correct {background-color: rgba(var(--green), 1);}
#score.incorrect, #timer.incorrect {background-color: rgba(var(--red), 1); -webkit-box-shadow: 0 0 6px rgba(var(--red), 1); box-shadow: 0 0 6px rgba(var(--red), 1);}

/* GAME SETUP */
#ai {
    -ms-grid-row: 5;
    -ms-grid-column: 7;
    width: 100%;
    grid-area: ai;
    display: -ms-grid;
    display: grid;
    gap: 0.5em;
    text-align: center;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    grid-template-areas:
        "goal-board"
        "ai-board";
}

/* current word displayed each round */
#word {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 5;
    display: -ms-grid;
    display: grid;
    grid-area: word;
    margin: 0.5em auto;
    width: 100%;
    line-height: 2;
    letter-spacing: 2px;
    color: rgba(var(--blueD4), 1);
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    text-align: center;
    text-shadow: 0 -2px 2px rgba(var(--white), 1), 0 2px 2px rgba(var(--black), 0.25);
    font-size: x-large;
    background-color: rgba(var(--blueX), 1);
    border: 5px solid rgba(var(--white), 1);
    border-radius: var(--borderRadius);
    outline: transparent;
    -webkit-box-shadow: 0 0 6px rgba(var(--blueD4), 1);
            box-shadow: 0 0 6px rgba(var(--blueD4), 1);
}

/* GRID: GOAL BOARD */
#goal-board {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: goal-board;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: calc(var(--card) / 4) 0.25em calc(var(--card) / 4) 0.25em calc(var(--card) / 4) 0.25em calc(var(--card) / 4) 0.25em calc(var(--card) / 4);
    grid-template-columns: repeat(5, calc(var(--card) / 4));
    gap: 0.25em;
}

#goal-board .card {
    height: calc(var(--card) / 4);
    width: calc(var(--card) / 4);
    border-radius: calc(var(--borderRadius) / 2);
    border: 1px solid rgba(var(--green), 1);
    background-color: rgba(var(--green), 0.25);
}

#goal-board .card.correct {
    background-color: rgba(var(--green), 1);
    -webkit-animation: fadeIn 2s ease-out;
            animation: fadeIn 2s ease-out;
}

/* GRID: AI BOARD */
#ai-board {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: ai-board;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: calc(var(--card) / 2) 0.5em calc(var(--card) / 2) 0.5em calc(var(--card) / 2) 0.5em calc(var(--card) / 2) 0.5em calc(var(--card) / 2);
    grid-template-columns: repeat(5, calc(var(--card) / 2));
    gap: 0.5em;
}

#ai-board .card {
    height: calc(var(--card) / 2);
    width: calc(var(--card) / 2);
    border-radius: calc(var(--borderRadius) / 2);
    -webkit-box-shadow: 0 0 4px 0 rgba(var(--black), 0.5);
            box-shadow: 0 0 4px 0 rgba(var(--black), 0.5);
    background: -o-repeating-linear-gradient(45deg,
            rgba(var(--greyD2), 1),
            rgba(var(--greyD2), 1) 0.5em,
            rgba(var(--grey), 1) 0.5em,
            rgba(var(--grey), 1) 1em);
    background: repeating-linear-gradient(45deg,
            rgba(var(--greyD2), 1),
            rgba(var(--greyD2), 1) 0.5em,
            rgba(var(--grey), 1) 0.5em,
            rgba(var(--grey), 1) 1em);
}

#ai-board .inner,
#ai-board .front,
#ai-board .back {
    width: calc(var(--card) / 2);
    height: calc(var(--card) / 2);
    border-radius: calc(var(--borderRadius) / 2);
}

#ai-board .back .emoji {
    font-size: 5vw;
}

#ai-board .card.correct {
    background: -o-repeating-linear-gradient(45deg,
            rgba(var(--green), 1),
            rgba(var(--green), 1) 0.5em,
            rgba(var(--greenL4), 1) 0.5em,
            rgba(var(--greenL4), 1) 1em);
    background: repeating-linear-gradient(45deg,
            rgba(var(--green), 1),
            rgba(var(--green), 1) 0.5em,
            rgba(var(--greenL4), 1) 0.5em,
            rgba(var(--greenL4), 1) 1em);
}

/* ai won - blink winning cards */
#ai-board .card.correct .back.winning-tiles {
    -webkit-animation: blinkAI 2s ease-out infinite;
            animation: blinkAI 2s ease-out infinite;
}

/* MODALS */ /* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2 */
.modal {
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(var(--black), 0.9);
}

.modal-container {
    display: flex;
    flex-direction: column;
    cursor: default;
    position: relative;
    border-radius: var(--borderRadius);
    background-color: rgba(var(--blue), 1);
    color: rgba(var(--white), 1);
    margin: 5% auto;
    width: 100%;
    height: 85%;
    -webkit-animation: 0.4s slideIn ease-in-out;
            animation: 0.4s slideIn ease-in-out;
}

.modal-header {
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: center;
         align-content: center;
    padding: 5px;
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(var(--black), 0.5);
}

.modal-body:not(.speech-synth) {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
}

.modal-body {
    overflow-y: scroll;
    margin: 0 0.5em;
    flex: 1;
    border-radius: var(--borderRadius);
    background-color: rgba(var(--greyL5), 1);
    color: rgba(var(--black), 1);
}

.modal-body.speech-synth {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 200%;
}

.modal-close {
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: center;
         align-content: center;
    max-height: 10%;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(var(--black), 0.5);
    -webkit-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

.modal-close:hover {
    cursor: pointer;
    background-color: rgba(var(--blueD4), 1);
}

.modal-body table {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
    border-collapse: separate;
}

/* MODAL: SETTINGS */
#modal-settings .modal-body {
    -ms-flex-line-pack: center;
         align-content: center;
    padding: 1em;
    text-align: center;
}

#modal-settings table {
    border-spacing: 0 2em;
}

#modal-settings label {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 2;
    color: rgba(var(--black), 0.5);
}

#modal-settings select {
    font-size: 2em;
    width: 100%;
    color: rgba(var(--white), 1);
    text-shadow: 2px 2px 4px rgba(var(--black), 1);
    border-radius: var(--borderRadius);
    border: 3px solid rgba(var(--black), 1);
    background: rgba(var(--blueD4), 1);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--blueD4), 1)), to(rgba(var(--blue), 1)));
    background: -o-linear-gradient(bottom, rgba(var(--blueD4), 1) 0%, rgba(var(--blue), 1) 100%);
    background: linear-gradient(0deg, rgba(var(--blueD4), 1) 0%, rgba(var(--blue), 1) 100%);
}

#modal-settings select:focus {outline: none;}

#modal-settings select option {
    color: rgba(var(--black), 1);
    text-shadow: none;
    background-color: rgba(var(--blue), 0.75);
}

#modal-settings select option:disabled {
    color: rgba(var(--blue), 0.5);
    background-color: rgba(var(--blueD4), 1);
}

#modal-settings span.emoji {
    font-size: 2em;
    vertical-align: unset;
}

#modal-settings button#btn-start {
    font-size: 2em;
}

/* MODAL: SCORE BOARD */
#modal-scoreboard .modal-body {
    cursor: pointer;
}

#modal-scoreboard #flag-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 15;
    background-color: rgba(var(--blue), 1);
    padding: 0.5em 0;
    margin: 0 5px;
}

#modal-scoreboard #flag-selection img.flag {
    width: 2em;
    border-radius: 0;
    margin: 5px;
}

#modal-scoreboard table {
    cursor: default;
    width: 100%;
    border-spacing: 0 8px;
}

#modal-scoreboard table thead tr th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    color: rgba(var(--white), 1);
    background-color: rgba(var(--blueD4), 1);
    letter-spacing: 2px;
    line-height: 2;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(var(--black), 1);
}

#modal-scoreboard table tbody tr {
    scroll-margin-top: 50px;
}

#modal-scoreboard table thead tr th:not(:last-child) {
    border-right: 1px solid rgba(var(--white), 0.75);
}

#modal-scoreboard table thead tr th,
#modal-scoreboard table td {
    padding: 2px 0;
    text-align: center;
}

#modal-scoreboard table tbody td {
    background-color: rgba(var(--white), 1);
}

#modal-scoreboard table td img.flag {
    width: 1.5em;
    border-radius: 2px;
    border: 1px solid rgba(var(--black), 0.5);
    -webkit-box-shadow: none;
            box-shadow: none;
}

#modal-scoreboard table tbody tr {
    -webkit-box-shadow: 0px 0px 4px 0px rgba(var(--blue), 0.5);
            box-shadow: 0px 0px 4px 0px rgba(var(--blue), 0.5);
}

#modal-scoreboard table tbody tr:hover td {
    background-color: rgba(var(--blue), 0.25);
}

#modal-scoreboard .btn-play {
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

#modal-scoreboard .btn-play:hover {
    color: rgba(var(--white), 1);
    text-shadow: 2px 2px 2px rgba(var(--black), 0.5);
    background-color: rgba(var(--blue), 1);
}

/* custom scrollbar in mobile */
.modal-body::-webkit-scrollbar-track {
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    background-color: rgba(var(--blueL4), 1);
}

.modal-body::-webkit-scrollbar {width: 10px;}

.modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(var(--blueD4), 1);
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
}

/* KEYFRAME ANIMATIONS */
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* user has incorrect card */
@-webkit-keyframes wiggleCard {
    8%, 41% {-webkit-transform: translateX(-10px) rotateY(180deg);transform: translateX(-10px) rotateY(180deg);}
    25%, 58% {-webkit-transform: translateX(10px) rotateY(180deg);transform: translateX(10px) rotateY(180deg);}
    75% {-webkit-transform: translateX(-5px) rotateY(180deg);transform: translateX(-5px) rotateY(180deg);}
    92% {-webkit-transform: translateX(5px) rotateY(180deg);transform: translateX(5px) rotateY(180deg);}
    0%, 100% {-webkit-transform: translateX(0) rotateY(180deg);transform: translateX(0) rotateY(180deg);}
}
@keyframes wiggleCard {
    8%, 41% {-webkit-transform: translateX(-10px) rotateY(180deg);transform: translateX(-10px) rotateY(180deg);}
    25%, 58% {-webkit-transform: translateX(10px) rotateY(180deg);transform: translateX(10px) rotateY(180deg);}
    75% {-webkit-transform: translateX(-5px) rotateY(180deg);transform: translateX(-5px) rotateY(180deg);}
    92% {-webkit-transform: translateX(5px) rotateY(180deg);transform: translateX(5px) rotateY(180deg);}
    0%, 100% {-webkit-transform: translateX(0) rotateY(180deg);transform: translateX(0) rotateY(180deg);}
}

/* user has incorrect LingoBingo */
@-webkit-keyframes wiggleBoard {
    8%, 41% {-webkit-transform: translateX(-10px);transform: translateX(-10px);}
    25%, 58% {-webkit-transform: translateX(10px);transform: translateX(10px);}
    75% {-webkit-transform: translateX(-5px);transform: translateX(-5px);}
    92% {-webkit-transform: translateX(5px);transform: translateX(5px);}
    0%, 100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes wiggleBoard {
    8%, 41% {-webkit-transform: translateX(-10px);transform: translateX(-10px);}
    25%, 58% {-webkit-transform: translateX(10px);transform: translateX(10px);}
    75% {-webkit-transform: translateX(-5px);transform: translateX(-5px);}
    92% {-webkit-transform: translateX(5px);transform: translateX(5px);}
    0%, 100% {-webkit-transform: translateX(0);transform: translateX(0);}
}

/* user won */
@-webkit-keyframes pulseUser {
    0%, 100% {background-color: rgba(var(--yellowA2), 1);}
    50% {background-color: rgba(var(--green), 1);}
}
@keyframes pulseUser {
    0%, 100% {background-color: rgba(var(--yellowA2), 1);}
    50% {background-color: rgba(var(--green), 1);}
}

/* ai won */
@-webkit-keyframes blinkAI {
    0%, 100% {background-color: rgba(var(--yellowA2), 1);}
    50% {background-color: rgba(var(--green), 1);}
}
@keyframes blinkAI {
    0%, 100% {background-color: rgba(var(--yellowA2), 1);}
    50% {background-color: rgba(var(--green), 1);}
}

/* modal animations */
@-webkit-keyframes slideIn {
    from {top: -300px; opacity: 0;}
    to {top: 0; opacity: 1;}
}
@keyframes slideIn {
    from {top: -300px; opacity: 0;}
    to {top: 0; opacity: 1;}
}

.hide {
    display: none;
}