@import url("icons/menu/iconfont.css");

:root {
    --fontProximaNova: Proxima Nova, Open Sans, Gill Sans MT, Gill Sans, Arial, sans-serif;
    --fontTorus: Torus, sans-serif;
    --tileFontSize: 16px;
    --bezier: cubic-bezier(.25, .1, .25, 1);
    --cellSize: 94px;
    --cellSpacing: 16px;
    --gameInfoHeight: 64px;
    --maxPageWidth: 1860px;
    --navShadow: 0 6px 32px 0 rgba(0, 0, 0, .24);
    --blue-5: #0074e0;
    --blue-3: #054a91;
    --denim-blue: #002b50;
    --green-1: #15c8d1;
    --green-2: #17d7d8;
    --green-3: #18e9da;
    --green-4: #17f1d8;
    --green-5: #3cf7dc;
    --green-6: #4dffe1;
    --green-7: #B7DCFF;
    --green-8: #a4ffee;
    --grey-3: #5d6b84;
    --grey-5: #bac9de;
    --grey-7: #f0f5fc;
    --grey-9: #f9fbff;
    --pink-1: #ff7690;
    --pink-2: #ff8aa6;
    --pink-3: #ff99b1;
    --pink-4: #ffa4ba;
    --pink-5: #ffa9be;
    --pink-6: #ffaec5;
    --pink-7: #ffc2d6;
    --pink-8: #ffc9dd;
    --poki-blue: #009cff;
    --pure-white: #ffffff;
    --purple-1: #c977e8;
    --purple-2: #d490f2;
    --purple-3: #da9ef3;
    --purple-4: #dca7f2;
    --purple-5: #e0aef5;
    --purple-6: #e1b5f7;
    --purple-7: #eac0fc;
    --purple-8: #ebccff;
    --yellow-1: #ff9e00;
    --yellow-2: #ffaf00;
    --yellow-3: #ffc500;
    --yellow-4: #ffd100;
    --yellow-5: #ffdc00;
    --yellow-6: #ffe200;
    --yellow-7: #fbe756;
    --yellow-8: #ffed85;
}

*, ::before, ::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--poki-blue);
}

a {
    display: block;
    transition: transform .6s var(--bezier);
    border-radius: 16px;
    position: relative;
}

img {
    color: transparent;
}

body {
    overflow: auto;
    background: var(--green-7);
    color: var(--denim-blue);
    font: 400 16px/24px var(--fontProximaNova);
}

.app-box {
    /*width: 100%;*/
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.games-toolbar {
    /*display: flex;*/
    display: contents;
    flex-wrap: wrap;
    flex-direction: column;
    /*min-height: 70px;*/
    overflow: hidden;
}

.games-menu-button {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #3ab09e;
    position: relative;
    color: #fff;
    text-align: center;
    z-index: 1;

}

.games-menu-button:after {
    content: '+';
    position: absolute;
    font-size: 4.5rem;
    transform: translate(-50%, 150%);
}

.games-menu-icons {
    width: 0;
    height: 100%;
    list-style: none;
    padding: 16px 10px 10px 50px;
    background: #fff;
    /*box-shadow: 1px 1px 1px 1px #dcdcdc;*/
    border-radius: 3em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: -94px 0 0 15px;
    overflow: hidden;
}

.games-menu-icons li i {
    color: #3ab09e;
    font-size: 1.7em;
}

.games-menu-icons li:nth-child(1) {
    margin-left: 70px;
}

.games-menu-icons li {
    width: 95px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.games-menu-button.active {
    transform: rotate(45deg);
}

.games-menu-icons.open {
    /*width: 50%;*/
    /*width: calc(100vw - 50px);*/
    width: 90vw;
}

.games-menu-button, .games-menu-icons {
    /*transition: all 1s cubic-bezier(.85, -.57, .37, 2.99);*/
    transition: all 1s cubic-bezier(0.85, -.1, .37, 1.15);
}

.games-menu-button {
    z-index: 10;
}

.games-menu-icons {
    position: relative;
    z-index: 9;
}

.games-box, .games-about {
    margin: 0 auto;
}

.games-grid {
    display: grid;
    grid-template-rows: repeat(auto-fill, 94px);
    grid-gap: var(--cellSpacing);
    grid-auto-flow: dense;
    /*justify-content: center;*/
    margin: 16px auto 16px;
    padding: 0;
    list-style-type: none;
    --gridTemplateColumns: 3;
    grid-template-columns: repeat(var(--gridTemplateColumns), 94px);
}

/*.games-grid:nth-child(1):before {*/
/*    content: '';*/
/*    display: block;*/
/*}*/

.game-container {
    container-type: inline-size;
    /*container-name: tilecq;*/
    box-shadow: rgba(0, 0, 0, 0.24) 0 6px 12px 0;
    user-select: none;
    aspect-ratio: 1 / 1;

    display: block;
    transition: transform .6s var(--bezier);
    border-radius: 16px;
    position: relative;
}

.d-content {
    display: contents;
}

ul.d-content li {
    display: contents;
}

.game-img-min {
    width: 94px;
    height: 94px;
}

.game-img-max {
    width: 204px;
    height: 204px;
}

.game-img-wh {
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

.grid-box-row2 {
    grid-row-start: span 1;
    grid-column-start: span 2;
    align-items: center;
    display: flex;
}

.game-name-show {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 6px;
    color: rgb(255, 255, 255);
    font: 700 var(--tileFontSize)/1.3 'Proxima Nova', sans-serif;
    text-align: center;
    z-index: 6;
    transition: transform .3s var(--bezier) .1s, opacity .3s var(--bezier) .1s;
    transform: translate(0px, 8px);
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
}

.game-container:hover span {
    transform: translateY(0);
    opacity: 1;
}

.grid-box0 {
    grid-area: ip0;
}

.grid-box1 {
    grid-area: ip1;
}

.grid-box2 {
    grid-area: ip2;
}

.grid-box3 {
    grid-area: ip3;
}

.grid-box4 {
    grid-area: ip4;
}

.grid-box5 {
    grid-area: ip5;
}

.grid-box6 {
    grid-area: ip6;
}

.grid-box7 {
    grid-area: ip7;
}

.grid-box8 {
    grid-area: ip8;
}

.grid-box9 {
    grid-area: ip9;
}

.grid-box10 {
    grid-area: ip10;
}

.grid-box11 {
    grid-area: ip11;
}

.grid-box12 {
    grid-area: ip12;
}

.grid-box13 {
    grid-area: ip13;
}

.grid-box14 {
    grid-area: ip14;
}

.grid-box15 {
    grid-area: ip15;
}

.grid-box16 {
    grid-area: ip16;
}

.grid-box17 {
    grid-area: ip17;
}

.grid-box18 {
    grid-area: ip18;
}

.grid-box19 {
    grid-area: ip19;
}

.grid-box20 {
    grid-area: ip20;
}

.grid-box-x {
    grid-area: ipx;
}

.games-about {
    /*margin-top: 50px;*/
    /*margin-bottom: 50px;*/
    padding: 20px;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0;
}

.flex-space-between div {
    padding: 10px;
}

.d-flex-right {
    display: flex;
    margin-top: 0;
}

.d-flex-right a {
    margin: 0 10px;
}

a:hover {
    color: white;
}

.games-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
}


.games-header {
    height: 120px;
    background-color: transparent;
}

.games-header:before {
    content: '';
    position: absolute;
    height: 90px;
    width: 100%;
    top: 0;
    background-color: #3ab09e;
}

.games-title {
    height: 90px;
    background-color: #3ab09e;
    margin: 0 auto;
    display: flex;
}

.games-title:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    background: url(images/wavy.svg) 50% 0 repeat-x;
    height: 30px;
}

@media screen and (min-width: 111px) and (max-width: 550.9px) {
    .grid-container2 {
        --gridTemplateColumns: 3;
        grid-template-areas:
        ". . .";
    }

    .grid-container {
        --gridTemplateColumns: 3;
        grid-template-areas:
        '... ip0 ip0'
        '... ip0 ip0'
        '... ... ...'
        'ip1 ip1 ...'
        'ip1 ip1 ...'
        '... ... ...';
    }

    .games-box, .games-about, .games-title {
        width: 314px;
    }

    .games-menu-icons {
        width: 100% !important;
        height: 50%;
        margin: -75% 0 0 0;
        padding: 0;
        flex-direction: column;
    }

    .games-menu-icons.open {
        height: 90vh;
    }

    .games-menu-icons li:nth-child(1) {
        margin: 60px 0 0 0;
    }

    .d-flex-right {
        order: -1;
    }
}

@media screen and (min-width: 551px) and (max-width: 990.9px) {
    .grid-container2 {
        --gridTemplateColumns: 7;
        grid-template-areas:
         ". . . . . . .";
    }

    .grid-container {
        --gridTemplateColumns: 7;
        grid-template-areas:
        ". . ip0 ip0 ip0 ip1 ip1"
        ". . ip0 ip0 ip0 ip1 ip1"
        "ip2 ip2 ip0 ip0 ip0 . ."
        "ip2 ip2 . ip3 ip3 . ."
        ". . . ip3 ip3 ip4 ip4"
        ". . . . . ip4 ip4"
        "ip5 ip5 ip5 . . . ."
        "ip5 ip5 ip5 . ip6 ip6 ."
        "ip5 ip5 ip5 . ip6 ip6 ."
        ". . ip7 ip7 . . ."
        ". . ip7 ip7 . . .";
    }

    .games-box, .games-about, .games-title {
        width: 760px;
    }
}

@media screen and (min-width: 991px) and (max-width: 1210.9px) {
    .grid-container2 {
        --gridTemplateColumns: 9;
        grid-template-areas:
        ". . . . . . . . .";
    }

    .grid-container {
        --gridTemplateColumns: 9;
        grid-template-areas:
        ". . ip0 ip0 ip0 ip3 ip3 ip4 ip4"
        "ip2 ip2 ip0 ip0 ip0 ip3 ip3 ip4 ip4"
        "ip2 ip2 ip0 ip0 ip0 ip1 ip1 ip1 ."
        ". . . ip6 ip6 ip1 ip1 ip1 ."
        ". ip5 ip5 ip6 ip6 ip1 ip1 ip1 ."
        ". ip5 ip5 ip8 ip8 . ip9 ip9 ."
        ". ip7 ip7 ip8 ip8 . ip9 ip9 ."
        ". ip7 ip7 . . . . . ."
         ". . . . . . . . .";
    }

    .games-box, .games-about, .games-title {
        width: 980px;
    }
}

@media screen and (min-width: 1211px) and (max-width: 1320.9px) {
    .grid-container2 {
        --gridTemplateColumns: 11;
        grid-template-areas:
        ". . . . . . . . . . .";
    }

    .grid-container {
        --gridTemplateColumns: 11;
        grid-template-areas:
        ". . ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5"
        "ip2 ip2 ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5"
        "ip2 ip2 ip0 ip0 ip0 ip1 ip1 ip1 . ip6 ip6"
        ". ip7 ip7 . . ip1 ip1 ip1 . ip6 ip6"
        ". ip7 ip7 ip8 ip8 ip1 ip1 ip1 . ip9 ip9"
        ". . . ip8 ip8 . ip10 ip10 ip10 ip9 ip9"
        "ip11 ip11 ip12 ip12 . . ip10 ip10 ip10 . ."
        "ip11 ip11 ip12 ip12 . . ip10 ip10 ip10 . .";
    }

    .games-box, .games-about, .games-title {
        width: 1194px;
    }
}

@media screen and (min-width: 1321px) and (max-width: 1540.9px) {
    .grid-container2 {
        --gridTemplateColumns: 12;
        grid-template-areas:
        ". . . . . . . . . . . .";
    }

    .grid-container {
        --gridTemplateColumns: 12;
        grid-template-areas:
        ". . ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5 ."
        "ip2 ip2 ip0 ip0 ip0 ip3 ip3 ip4 ip4 ip5 ip5 ."
        "ip2 ip2 ip0 ip0 ip0 ip1 ip1 ip1 . ip6 ip6 ."
        ". ip7 ip7 . . ip1 ip1 ip1 . ip6 ip6 ."
        ". ip7 ip7 ip8 ip8 ip1 ip1 ip1 . ip9 ip9 ."
        "ip11 ip11 . ip8 ip8 . . ip10 ip10 ip9 ip9 ."
        "ip11 ip11 . . . . . ip10 ip10 . . .";
    }

    .games-box, .games-about, .games-title {
        width: 1304px;
    }
}

@media screen and (min-width: 1541px) and (max-width: 1870.9px) {
    .grid-container2 {
        --gridTemplateColumns: 14;
        grid-template-areas:
        ". . . . . . . . . . . . . .";
    }

    .grid-container {
        --gridTemplateColumns: 14;
        grid-template-areas:
        ". . ip0 ip0 ip0 ip4 ip4 . . . . . ip5 ip5"
        ". . ip0 ip0 ip0 ip4 ip4 . ip2 ip2 ip2 . ip5 ip5"
        "ip3 ip3 ip0 ip0 ip0 . . . ip2 ip2 ip2 . ip6 ip6"
        "ip3 ip3 . . . ip1 ip1 ip1 ip2 ip2 ip2 . ip6 ip6"
        "ip7 ip7 . ip8 ip8 ip1 ip1 ip1 ip9 ip9 ip10 ip10 . ."
        "ip7 ip7 . ip8 ip8 ip1 ip1 ip1 ip9 ip9 ip10 ip10 . .";
    }

    .games-box, .games-about, .games-title {
        width: 1524px;
    }
}

@media screen and (min-width: 1871px) {
    .grid-container2 {
        --gridTemplateColumns: 17;
        grid-template-areas:
        ". . . . . . . . . . . . . . . . .";
    }

    .grid-container {
        --gridTemplateColumns: 17;
        grid-template-areas:
        ". . ip0 ip0 ip0 . . ip5 ip5 . . . . ip7 ip7 ip8 ip8"
        ". . ip0 ip0 ip0 ip4 ip4 ip5 ip5 ip2 ip2 ip2 . ip7 ip7 ip8 ip8"
        ". . ip0 ip0 ip0 ip4 ip4 . . ip2 ip2 ip2 ip6 ip6 ip3 ip3 ip3"
        "ip9 ip9 ip10 ip10 ip11 ip11 ip1 ip1 ip1 ip2 ip2 ip2 ip6 ip6 ip3 ip3 ip3"
        "ip9 ip9 ip10 ip10 ip11 ip11 ip1 ip1 ip1 ip12 ip12 ip13 ip13 . ip3 ip3 ip3"
        ". . . . . . ip1 ip1 ip1 ip12 ip12 ip13 ip13 . . . .";
    }

    .games-box, .games-about, .games-title {
        width: 1854px;
    }
}

.container {
    max-width: 1366px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

.main {
    min-height: calc(100% - 170px);
}

.ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;

    >p {
        font-size: 12px;
        color: #999;
        text-align: center;
        font-family: Flight, serif;
    }
}