/* Color Palette: https://coolors.co/palette/5aa9e6-7fc8f8-f9f9f9-ffe45e */
:root {
    --color-white: #F9F9F9;
    --color-light-blue: #7FC8F8;
    --color-dark-blue: #5AA9E6;
    --color-yellow: #FFE45E;
    --color-green: #a1ef7a;
    --color-red: #fc7b7b;
    --play-padding-x: 2vw;
    --play-padding-y: calc(2 * var(--vh));
    --card-size: min(18vw, 18 * var(--vh));
    --qr-size: min(100vw, 80 * var(--vh));
    --ripple-size: calc(var(--qr-size) / 2 + 2 * var(--ripple-thickness));
    --ripple-thickness: calc(var(--qr-size) / 20);
    --vh: 1vh;
}

html, body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    user-select: none;

    background-color: var(--color-white);

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

* {
    font-family: "Rajdhani", sans-serif;
}

/*******************************************************************************
*** Play area elements ********************************************************/

#play {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1vh 1vw;

    box-sizing: border-box;
    width: 100vw;
    height: calc(80 * var(--vh));
    padding: var(--play-padding-y) var(--play-padding-x);
}

.card {
    box-sizing: border-box;
    width: var(--card-size);
    height: var(--card-size);
    perspective: 1000px;
}

.card-inside {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.25s;
    transform-style: preserve-3d;
}

.card:hover .card-inside-draw {
    cursor: pointer;
    transform: rotateY(45deg);
}

.card-front, .card-back {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-front {
    display: flex;
    align-items: center;
    justify-content: center;

    border: min(0.5vh, 0.5vw) solid var(--color-dark-blue);
    background-color: var(--color-light-blue);
    color: black;
}

.card-front span {
    color: var(--color-dark-blue);
    font-size: calc(var(--card-size) / 2);
}

.card-back {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;

    border: min(var(--vh) * 0.5, 0.5vw) solid var(--color-yellow);
    transform: rotateY(180deg);
    background-color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: min(var(--vh) * 2.5, 2.5vw);

    box-sizing: border-box;
    padding: min(0.5 * var(--vh), 0.5vw);
    font-weight: 500;

    color:#000;
    text-align: center;
    -webkit-text-fill-color:#000;
	text-shadow:
        -2px -2px 0 #FFF,
        0   -2px 0 #FFF,
        2px -2px 0 #FFF,
        2px  0   0 #FFF,
        2px  2px 0 #FFF,
        0    2px 0 #FFF,
        -2px  2px 0 #FFF,
        -2px  0   0 #FFF;
}

#play .big-icon {
    font-size: var(--qr-size);
    font-weight: normal;
}

#qr {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: var(--qr-size);
    height: var(--qr-size);
}

#results {
    display: flex;
    flex-direction: column-reverse; /** Reversed so we can order by points, and the player with the most points will be at the top **/
    justify-content: center;
    align-content: center;

    width: 100%;
    height: 100%;
}

.results-player {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.results-name {
    font-size: calc(5 * var(--vh));
    font-weight: 700;
    width: 100%;
}

.results-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    width: 100%;
}

/** Card flip Effect **********************************************************/

/** Ripple Effect *************************************************************/
/** TODO: Figure out the calculation to make them center... **/
.lds-ripple div {
    position: absolute;
    border: var(--ripple-thickness) solid var(--color-dark-blue);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: calc(40 * var(--vh));
        left: 50vw;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: calc((80 * var(--vh) - var(--qr-size)) / 2);
        left: calc((100vw - var(--qr-size)) / 2);
        width: calc(var(--qr-size) - 2 * var(--ripple-thickness));
        height: calc(var(--qr-size) - 2 * var(--ripple-thickness));
        opacity: 0;
    }
}

/*******************************************************************************
*** Information area elements *************************************************/

#information {
    display: flex;
    align-items: center;

    font-size: calc(5 * var(--vh));

    box-sizing: border-box;
    padding: calc(1 * var(--vh)) 1vw;
    width: 100vw;
    height: calc(10 * var(--vh));
}

.error {
    color: var(--color-red);
    font-weight: 700;
}

/*******************************************************************************
*** Player area elements ******************************************************/

#players {
    display: flex;
    align-items: center;
    gap: 1vw;

    font-size: calc(2.5 * var(--vh));
    text-align: left;

    box-sizing: border-box;
    padding: var(--vh) 1vw;
    height: calc(10 * var(--vh));
}

#players input {
    font-size: calc(2.5 * var(--vh));
}

#players span {
    background-color: var(--color-light-blue);
    padding: min(1 * var(--vh), 1vw);
    border-radius: min(1 * var(--vh), 1vw);
}

#players .my-turn {
    background-color: var(--color-green) !important;
}

#players .winner {
    background-color: var(--color-yellow) !important;
}

/*******************************************************************************
*** Extra area elements *******************************************************/

#extra {
    display: flex;
    align-items: center;
    gap: 1vw;

    font-size: calc(5 * var(--vh));

    box-sizing: border-box;
    padding: var(--vh) 1vw;
    height: calc(10 * var(--vh));
}

#start {
    background-color: var(--color-green);
    font-weight: 700;
    cursor: pointer;
    display: none;
    padding: min(var(--vh), 1vw);
    border-radius: min(var(--vh), 1vw);
}

#again {
    background-color: var(--color-green);
    font-weight: 700;
    cursor: pointer;
    display: none;
    padding: min(var(--vh), 1vw);
    border-radius: min(var(--vh), 1vw);
}

#teacher {
    background-color: var(--color-red);
    cursor: pointer;
    display: none;
    padding: min(var(--vh), 1vw);
    border-radius: min(var(--vh), 1vw);
}