:root {
    --navy: #283849;
    --blue: blue;
    --green: green;
    --yellow: goldenrod;
    --red: darkred;
    --white: white;
}

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    height: 100%;
    font-family: Verdana;
}
.phone-case {
    /*9.4 / 16 coming from vh issue with iphone and address bar always present */
    --pw: calc(min(1vw, 1vh*9.4/16));
    --vgap: calc( 2 * var(--pw));
    height: 100%;
    display: flex;
    background-color: gray;
}

.phone {
    position: relative;
    width: calc(100*var(--pw));
    height: 100%;
    margin: auto;
    background-color: gray;
    background-image: url("/img/stars.jpg");
    background-size: cover;
    color: white;
}

.header-case {
    --header-height: calc(10*var(--pw));
    height: var(--header-height);
    width: 100%;
    font-size: calc(4*var(--pw));
    font-weight: bold;
    display: flex;
    flex-flow: row nowrap;
    background-color: #0008;
}

.header-left {
    padding: calc(2.5*var(--pw));
    position: relative;
    width: 30%;
    text-align: left;
}

.header-center {
    font-size: calc(3*var(--pw));
    margin: auto; /* padding: calc(1.2*var(--pw)); */
    position: relative;
    text-align: center;
    width: 40%;
}
    .header-left::after {
        content: '';
        position: absolute;
        right: 0;
        top: calc( .15 * var(--header-height));
        height: calc(.7*var(--header-height));
        width: calc(0.25*var(--pw));
        background-color: #fffc;
    }
    .header-right::before {
        content: '';
        position: absolute;
        left: 0;
        top: calc( .15 * var(--header-height));
        height: calc(.7*var(--header-height));
        width: calc(0.25*var(--pw));
        background-color: #fffc;
    }

.header-right {
    width: 30%;
    position: relative;
    font-size: calc(3*var(--pw));
    padding: calc(3*var(--pw));
    text-align: center;
}

.logo-d {
    position: relative;
    top: calc(.25*var(--pw));
    display: inline-block;
    transform: rotateZ(-7deg);
}

.logo-e1 {
    position: relative;
    top: calc(.1*var(--pw));
    display: inline-block;
    transform: rotateZ(3deg);
}

.logo-w {
    position: relative;
    top: calc(.5*var(--pw));
    display: inline-block;
    transform: rotateZ(4deg);
}

.logo-e {
    position: relative;
    top: calc(0*var(--pw));
    display: inline-block;
    transform: rotateZ(-6deg);
}

.logo-l {
    position: relative;
    top: calc(-.1*var(--pw));
    display: inline-block;
    transform: rotateZ(-8deg);
}

.score-case {
    border-radius: calc(2*var(--pw));
    height: calc(8*var(--pw));
    margin: auto;
    font-size: calc(6*var(--pw));
    align-content: center;
    text-align: center;
    background-color: blue;
    margin: var(--vgap) var(--gmarg) var(--vgap) var(--gmarg)
}

[data-state="lose"] .score-case {
    background-color: red;
    animation: score-font-pulse .75s linear infinite
}

[data-state="win"] .score-case {
    background-color: green;
    animation: score-font-pulse .75s linear infinite
}

@keyframes score-font-pulse {
    0% {
        font-size: calc(6*var(--pw));
    }
    50% {
        font-weight: bold;
        font-size: calc(6.5*var(--pw));
    }
    100% {
        font-size: calc(6*var(--pw));
    }
}

.clue-case {
    height: calc(16*var(--pw));
    font-size: calc(6*var(--pw));
    align-content: center;
    text-align: center;
    align-items: center;
    background-color: blue;
    margin: var(--vgap);
    display: none;
}
.clue-content {
    margin: auto;
}

.grid-case {
    font-size: var(--tile-font-size);
    height: var(--grid-height);
    width: calc(100*var(--pw) - 2*var(--gmarg));
    display: flex;
    margin: auto;
}

.grid {
    position: relative;
    text-align: center;
    height: 100%;
    width: 100%;
}

.timer-case {
    border-radius: var(--pw);
    height: calc(4*var(--pw));
    margin: auto;
    border-style: solid;
    border-width: calc(.5*var(--pw));
    margin: var(--vgap) var(--gmarg) var(--vgap) var(--gmarg);
    border-color: yellow;
    border-style: solid;
    background: linear-gradient(90deg, goldenrod, gold 50%, red 50%);
    background-size: 200% 200%;
    visibility: hidden;
}
.timer-running {
    animation: timer-anim 10s linear 1
}

.games-case {
    border-radius: calc(2*var(--pw));
    align-content: center;
    text-align: left;
    display: none;
    flex-direction: column;
    width: 100%;
}

.game-link {
    background-color: navy;
    border-color: gold;
    border-radius: calc(3*var(--pw));
    border-style: solid;
    border-width: calc(.3*var(--pw));
    font-size: calc(3*var(--pw));
    width: 80%;
    text-align: left;
    margin: calc(1*var(--pw)) auto;
    padding: calc(3*var(--pw)) calc(3*var(--pw)) calc(3*var(--pw)) calc(5*var(--pw));
}
.game-name {
    font-size: calc(4*var(--pw));
    color: #ffff;
}
.game-descr {
    color: #fffa;
}

.bottom-case {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    margin: auto;
    width: 100%;
}

.kb-case {
    width: 100%;
}
.get-ready-case {
    width: calc(100*var(--pw));
    height: calc(35*var(--pw));
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ready-box {
    width: calc(100*var(--pw));
    height: calc(31*var(--pw));
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: calc(2*var(--pw));
    margin: calc(2*var(--pw));
    color: black;
    background: #fffd;
    border-color: black;
    border-width: calc(.5*var(--pw));
    border-style: solid;
    border-radius: calc(4*var(--pw))
}
.ready-box-right {
    flex-direction: row-reverse;
}
.ready-box-content {
    width: calc(55*var(--pw));
    height: calc(28*var(--pw));
    overflow: hidden;
    align-content: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: calc(2*var(--pw));
}
.ready-text {
    color: green;
    font-size: calc(8*var(--pw));
    font-weight: bold;
    text-align: center;
    display: block;
}
.ready-text-err {
    color: red;
    font-size: calc(8*var(--pw));
    font-weight: bold;
    text-align: center;
    display: block;
}
.ready-text-go {
    width: 500%;
    margin: -200%;
    color: green;
    font-weight: bold;
    text-align: center;
    display: block;
    animation-name: goAnim;
    animation-duration: 3.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.ready-box-right .ready-text-go {
    color: gray;
}
.ready-box-right .ready-text {
    color: #333;
}
@keyframes goAnim {
    0% {
        font-size: calc(12*var(--pw));
        opacity: 1;
    }

    100% {
        font-size: calc(50*var(--pw));
        opacity: 0;
    }
}

.card-player {
    display: flex;
    flex-flow: column nowrap;
    width: calc(27*var(--pw));
    height: calc(27*var(--pw));
    font-weight: bold;
    font-size: calc(4*var(--pw));
    text-align: center;
}

.card-player-icon {
    width: calc(18*var(--pw));
    height: calc(18*var(--pw));
    margin: auto;
}
/*

.card-player-left {
    position: absolute;
    left: calc(2*var(--pw));
    bottom: 0;
}

.card-player-right {
    position: absolute;
    right: calc(2*var(--pw));
    bottom: 0;
}
*/

.callout-rows {
    display: flex;
    /*display: none;*/
    position: relative;
    flex-flow: column-reverse nowrap;
    justify-content: center;
}

.callout-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.callout {
    font-size: calc(var(--pw)*4);
    padding: calc(var(--pw)*1.5) calc(var(--pw)*6) calc(var(--pw)*1.5) calc(var(--pw)*6);
    margin: calc(var(--pw)*2) calc(var(--pw)*2) calc(var(--pw)*4) calc(var(--pw)*2);
    background: black;
    border-radius: calc(var(--pw)*3);
    border-style: none;
    color: white;
    border-width: 1px;
    border-style: solid;
    position: relative;
}

.callout-tr::after {
    content: '';
    position: absolute;
    background: black;
    clip-path: polygon(0% 100%,65% 100%,100% 0%);
    width: calc(var(--pw)*12);
    height: calc(var(--pw)*3);
    top: calc(var(--pw)*-3);
    right: calc(var(--pw)*-1);
}

.callout-tl {
    background: green;
}

    .callout-tl::after {
        content: '';
        position: absolute;
        background: green;
        clip-path: polygon(100% 100%,35% 100%,0% 0%);
        width: calc(var(--pw)*12);
        height: calc(var(--pw)*3);
        top: calc(var(--pw)*-3);
        left: calc(var(--pw)*-1);
    }

.callout-bl::after {
    content: '';
    position: absolute;
    background: black;
    clip-path: polygon(35% 0%,100% 0%,0% 100%);
    width: calc(var(--pw)*12);
    height: calc(var(--pw)*3);
    bottom: calc(var(--pw)*-3);
    left: calc(var(--pw)*-1);
}

.callout-br {
    background: blue;
}

    .callout-br::after {
        content: '';
        position: absolute;
        background: blue;
        clip-path: polygon(0% 0%,70% 0%,100% 100%);
        width: calc(var(--pw)*12);
        height: calc(var(--pw)*3);
        bottom: calc(var(--pw)*-3);
        right: calc(var(--pw)*-1);
    }

@keyframes timer-anim {
    0% {
        background-position: 0% 0%
    }

    100% {
        background-position: 100% 0%
    }
}

.board-timer-go {
}



.tile {
    background-color: black;
    border-color: white;
    border-style: solid;
    border-width: .5px;
    perspective: 1000px;
    transform-style: preserve-3d;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.tile-blank {
    background-color: var(--blue);
    color: var(--white);
}

.tile-blue {
    animation-name: flipTileB;
}

.tile-green {
    animation-name: flipTileG;
}

.tile-red {
    animation-name: flipTileR;
}

.tile-yellow {
    animation-name: flipTileY;
}

.tile-text {
    margin: 0px;
    /* aspect-ratio: 1; */
}

[data-transition] {
    perspective: 1000px;
    transform-style: preserve-3d;
    animation-duration: .75s;
    /* linear seems buggy on iphone 
        animation-timing-function: linear;
    */
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.vrt-animate[data-transition="flip-show"] {
    animation-name: flipShow;
}

.vrt-animate[data-transition="flip-hide"] {
    animation-name: flipHide;
}

@keyframes flipShow {
    0% {
        transform: rotateX(90deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes flipHide {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(90deg);
    }
}


@keyframes flipTileR {
    0% {
        transform: rotateX(0deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    50% {
        transform: rotateX(90deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    51% {
        transform: rotateX(90deg);
        background-color: var(--red);
        color: var(--white);
    }

    100% {
        transform: rotateX(0deg);
        background-color: var(--red);
        color: var(--white);
    }
}

@keyframes flipTileG {
    0% {
        transform: rotateX(0deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    50% {
        transform: rotateX(90deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    51% {
        transform: rotateX(90deg);
        background-color: var(--green);
        color: var(--white);
    }

    100% {
        transform: rotateX(0deg);
        background-color: var(--green);
        color: var(--white);
    }
}

@keyframes flipTileB {
    0% {
        transform: rotateX(0deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    50% {
        transform: rotateX(90deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    51% {
        transform: rotateX(90deg);
        background-color: var(--blue);
        color: var(--white);
    }

    100% {
        transform: rotateX(0deg);
        background-color: var(--blue);
        color: var(--white);
    }
}

@keyframes flipTileY {
    0% {
        transform: rotateX(0deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    50% {
        transform: rotateX(90deg);
        background-color: var(--blue);
        color: var(--blue);
    }

    51% {
        transform: rotateX(90deg);
        background-color: var(--yellow);
        color: var(--white);
    }

    100% {
        transform: rotateX(0deg);
        background-color: var(--yellow);
        color: var(--white);
    }
}


.title {
    margin: 0px;
    padding: 20px;
    background-color: var(--navy);
    color: var(--okwhite);
    font-size: var(--font-size2);
    width: 100%;
}

/* The Modal (background) */
.popup {
    --color: #335;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%;
    font-size: calc(6 * var(--pw));
}

.popup-content {
    color: #fffc;
    font-size: calc(6 * var(--pw));
    background-color: var(--color);
    padding: calc(6*var(--pw));
    border: calc(.5 * var(--pw)) solid #fff;
    border-radius: calc(3 * var(--pw));
    margin: calc(10*var(--pw)) auto auto auto;
    width: calc(90*var(--pw));
}

.popup-buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    padding: calc(5*var(--pw)) 0 0 0;
}

.popup-button {
    background-color: #fffc !important;
    color: var(--color);
    border: none;
    width: calc(35*var(--pw));
    margin: calc(1 * var(--pw)) calc(3 * var(--pw));
    text-align: center;
    font-size: calc(8 * var(--pw));
    font-weight: bold;
}

.popup-censor .option-group {
    padding: calc(2*var(--pw));
}

.about-text {
    padding-top: calc(5*var(--pw));
    padding-bottom: calc(5*var(--pw));
    padding-left: calc(5*var(--pw));
}
.about-logo {
    font-size: calc(8 * var(--pw));
    font-weight: bold;
    padding-left: 0;
    padding-top: 0;
}

.about-copyright {
    font-size: calc(4 * var(--pw));
    font-weight: lighter;
}
.censor-list {
    width: calc(65 * var(--pw));
    font-size: calc(8 * var(--pw));
    padding: calc(2*var(--pw));
    margin: calc(5*var(--pw));
    border-radius: calc(3*var(--pw));
}

.comment-box {
    width: calc(65 * var(--pw));
    height: calc(45 * var(--pw));
    padding: calc(2*var(--pw));
    margin: calc(5*var(--pw));
    border-radius: calc(3*var(--pw));
    color: #335;
    background-color: #fffc;
    font-family: Verdana;
    font-size: calc(5 * var(--pw));
}

input[type="radio"] {
    -webkit-appearance: none;
    display: none;
}
.option-group {
    padding: calc(6*var(--pw));
    display: flex;
    flex-flow: row wrap;
}

.option-value {
    background-color: var(--color);
    border-color: #fffc !important;
    border-width: calc(.15*var(--pw));
    border-style: solid;
    border-radius: calc(2*var(--pw));
    height: calc(10*var(--pw));
    margin: calc(2*var(--pw));
    display: inline-block;
    padding: calc(2*var(--pw));
    text-align: center;
    font-size: calc(4 * var(--pw));
    transition: 0.5s
}

input[type="radio"]:checked + .option-value {
    border-width: calc(.5*var(--pw));
    box-shadow: calc(.2*var(--pw)) calc(.5*var(--pw)) calc(3*var(--pw)) calc(.75*var(--pw)) rgb(24,141,249, 0.8);
}

.option-group-avatar {
    margin: calc(5*var(--pw)) 0 0 0;
    padding: calc(.5*var(--pw));
}

.option-value-avatar {
    height: calc(21*var(--pw));
    width: calc(21*var(--pw));
    display: inline-block;
    color: #000c;
    font-weight: bold;
    background-image: radial-gradient(#fffb 0%, #fffb 20%, #fff4 145%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

input[type="radio"]:checked + .option-value-avatar {
    background-color: #fffb;
}

.img-avatar {
    width: calc(12 * var(--pw));
    margin: auto auto;
}


/* LEVEL 5 tweaks */
[data-layout="home"] {
    --tile-font-size: calc(7.5*var(--pw));
    --grid-height: 0;
    --gmarg: calc(22 * var(--pw));
}

    [data-layout="home"] .grid-case {
        display: none;
        display: flex;
    }

    [data-layout="home"] .games-case {
        display: flex;
    }

    [data-layout="home"] .timer-case {
        display: none;
    }
    
    [data-layout="home"] .kb-case {
        display: none;
    }

[data-layout="level5"] {
    --tile-font-size: calc(7.5*var(--pw));
    --grid-height: calc(55*var(--pw));
    --gmarg: calc(22 * var(--pw));
}

/* LEVEL 6 tweaks */
[data-layout="level6"] {
    --tile-font-size: calc(7.5*var(--pw));
    --grid-height: calc(55*var(--pw));
    --gmarg: calc(16 * var(--pw));
}

/* LEVEL 10 tweaks */
[data-layout="level10"] {
    --tile-font-size: calc(6*var(--pw));
    --grid-height: calc(7.5*var(--pw));
    --gmarg: calc(5 * var(--pw));
}

    [data-layout="level10"] .score-case {
        margin: var(--vgap) calc(10*var(--vgap)) var(--vgap) calc(10*var(--vgap));
    }

/* LEVEL 12 tweaks */
[data-layout="level12"] {
    --tile-font-size: calc(6*var(--pw));
    --grid-height: calc(7.5*var(--pw));
    --gmarg: calc(1 * var(--pw));
}

    [data-layout="level12"] .score-case {
        margin: var(--vgap) calc(10*var(--vgap)) var(--vgap) calc(10*var(--vgap));
    }

    [data-layout="level12"] .clue-case {
        display: block;
    }