/* GAME SECTION */

@font-face {
    font-family: "Impact";
    src: url("../fonts/impact/impact.eot");
    src: url("../fonts/impact/impact.eot?#iefix") format("embedded-opentype"),
        url("../fonts/impact/impact.woff2") format("woff2"),
        url("../fonts/impact/impact.ttf") format("truetype"),
        url("../fonts/impact/impact.svg#impact") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon/icomoon.eot");
    src: url("../fonts/icomoon/icomoon.eot#iefix") format("embedded-opentype"),
        url("../css/fonts/icomoon/icomoon.ttf") format("truetype"),
        url("../fonts/icomoon/icomoon.woff") format("woff"),
        url("../fonts/icomoon/icomoon.svg#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

body {
    font-family: "icomoon", sans-serif;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: "icomoon" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-history:before {
    content: "";
}

.icon-admin:before {
    content: "";
}

.icon-allgame:before {
    content: "";
}

.icon-android:before {
    content: "";
}

.icon-arrow:before {
    content: "";
}

.icon-close:before {
    content: "";
}

.icon-favorites-fill:before {
    content: "";
}

.icon-favorites:before {
    content: "";
}

.icon-html5:before {
    content: "";
}

.icon-imgcircle:before {
    content: "";
}

.icon-info:before {
    content: "";
}

.icon-ios:before {
    content: "";
}

.icon-macos:before {
    content: "";
}

.icon-onlineplayers:before {
    content: "";
}

.icon-sgLogo:before {
    content: "";
}

.icon-start:before {
    content: "";
}

.icon-windows:before {
    content: "";
}

.icon-Search:before {
    content: "";
}

.icon-Close:before {
    content: "";
}

.home .main .container .game-category {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-column-gap: 8px;
    grid-row-gap: 20px;
    margin-top: 30px;
}

@media screen and (max-width: 768px) {
    .home .game-modal {
        display: block;
    }
    .home .main {
        padding-top: 50px;
    }
    .home .main .container .game-category {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        margin-top: 14px;
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }
}

@media screen and (max-width: 480px) {
    .home .main .container .game-category {
        grid-template-columns: repeat(1, 2fr);
    }
}

html.mobile.landscape .home .main .container .game-category {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

html.mobile.landscape .home .main .container .game-category .tag-list {
    transform-origin: 0 0;
    transform: scale(0.7);
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 12rem;
    grid-column-gap: 30px;
}

.game-card {
    width: 100%;
    position: relative;
    border-radius: 5px;
    -webkit-animation: animation-fade 0.5s;
    animation: animation-fade 0.5s;
}

.game-card .tag-list {
    position: absolute;
    top: 10px;
    left: 9px;
    z-index: 2;
}

.game-card .tag {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transform: rotate(-14deg);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.65);
    border: solid 1px;
    color: #fff;
    text-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.65);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.54));
    font-style: italic;
    border-radius: 50%;
    text-transform: uppercase;
    font-size: 0.8125rem;
    transition: transform 0.3s;
}

.game-card .tag span {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.64));
}

.game-card .tag.tag-new {
    border-color: #ff3434;
    background-image: linear-gradient(to bottom, #ff465d, #a00a1d);
}

.game-card .tag.tag-hot {
    border-color: #ffa925;
    background-image: linear-gradient(to bottom, #ffcd00, #ff6200);
}

.game-card .tag.tag-jackpot {
    border-color: #f825ff;
    background-image: linear-gradient(to bottom, #9700ff, #ff00c8 114%);
    text-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.64);
    color: #fff200;
    font-size: 0.8125rem;
    line-height: 10px;
}

.game-card .tag.tag-jackpot span {
    transform: scale(0.85);
    font-weight: 900;
    display: block;
    padding-top: 10px;
    letter-spacing: -0.5px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.64));
}

.game-card .tag.tag-jackpot::after {
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDI2IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+DQogICAgPGcgaWQ9IlNHLUZTIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IlNHLURlc2t0b3AtTG9iYnkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MDguMDAwMDAwLCAtMTMyLjAwMDAwMCkiIGZpbGw9IiNGRkYyMDAiIGZpbGwtcnVsZT0ibm9uemVybyI+DQogICAgICAgICAgICA8ZyBpZD0iSmFja3BvdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjk4LjY5NDU1OSwgMTIzLjAwMDAwMCkiPg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNy44NTUwODM0LDEzLjAzODExNjQgQzE4LjIzNjYzNzcsMTMuNjEwNDQ3OSAxOC44MDg5NjkyLDE0LjM3MzU1NjUgMTkuMDYzMzM4NywxNC42OTE1MTg1IEMxOS4xMjY5MzExLDE0LjgxODcwMzIgMTkuMTkwNTIzNSwxNC45NDU4ODggMTkuMTkwNTIzNSwxNS4wNzMwNzI4IEwxOS4xOTA1MjM1LDE3LjIzNTIxMzkgQzE5LjE5MDUyMzUsMTcuNjgwMzYwNiAxOS42MzU2NzAyLDE3Ljk5ODMyMjUgMjAuMDE3MjI0NSwxNy44NzExMzc3IEwyMS45ODg1ODg1LDE3LjIzNTIxMzkgQzIyLjExNTc3MzIsMTcuMTcxNjIxNSAyMi4zMDY1NTA0LDE3LjE3MTYyMTUgMjIuNDMzNzM1MSwxNy4yMzUyMTM5IEwyNC4zNDE1MDY3LDE3Ljk5ODMyMjUgQzI0Ljc4NjY1MzQsMTguMTg5MDk5NiAyNS4yMzE4MDAxLDE3Ljg3MTEzNzcgMjUuMjMxODAwMSwxNy4zNjIzOTg2IEwyNS4yMzE4MDAxLDE1LjIwMDI1NzUgQzI1LjIzMTgwMDEsMTUuMDczMDcyOCAyNS4yOTUzOTI1LDE0Ljk0NTg4OCAyNS4zNTg5ODQ5LDE0LjgxODcwMzIgTDI2Ljc1ODAxNzMsMTMuMDM4MTE2NCBDMjcuMDEyMzg2OSwxMi42NTY1NjIxIDI2Ljg4NTIwMjEsMTIuMTQ3ODIzMSAyNi40NDAwNTU0LDEyLjAyMDYzODMgTDI0LjUzMjI4MzksMTEuNDQ4MzA2OCBDMjQuNDA1MDk5MSwxMS4zODQ3MTQ0IDI0LjI3NzkxNDMsMTEuMzIxMTIyMSAyNC4yMTQzMjE5LDExLjE5MzkzNzMgTDIyLjgxNTI4OTUsOS4yODYxNjU3MyBDMjIuNTYwOTE5OSw4LjkwNDYxMTQyIDIyLjA1MjE4MDgsOC45MDQ2MTE0MiAyMS43MzQyMTg5LDkuMjg2MTY1NzMgTDIwLjQ2MjM3MTIsMTEuMDAzMTYwMSBDMjAuMzk4Nzc4OCwxMS4xMzAzNDQ5IDIwLjI3MTU5NDEsMTEuMTkzOTM3MyAyMC4xNDQ0MDkzLDExLjI1NzUyOTcgTDE4LjEwOTQ1MywxMS45NTcwNDU5IEMxNy43Mjc4OTg3LDEyLjIxMTQxNTQgMTcuNjAwNzEzOSwxMi42NTY1NjIxIDE3Ljg1NTA4MzQsMTMuMDM4MTE2NCBMMTcuODU1MDgzNCwxMy4wMzgxMTY0IFogTTI5LjA0NzM0MzIsMTYuMDkwNTUwOSBDMjkuMzAxNzEyNywxNi40NzIxMDUyIDI5LjY4MzI2NywxNi45ODA4NDQzIDI5Ljg3NDA0NDIsMTcuMjM1MjEzOSBDMjkuOTM3NjM2NiwxNy4yOTg4MDYyIDI5LjkzNzYzNjYsMTcuMzYyMzk4NiAyOS45Mzc2MzY2LDE3LjQ4OTU4MzQgTDI5LjkzNzYzNjYsMTkuMDE1ODAwNiBDMjkuOTM3NjM2NiwxOS4zMzM3NjI2IDMwLjI1NTU5ODUsMTkuNTI0NTM5NyAzMC41MDk5NjgsMTkuNDYwOTQ3MyBMMzEuOTA5MDAwNSwxOS4wMTU4MDA2IEMzMi4wMzYxODUzLDE4Ljk1MjIwODMgMzIuMDk5Nzc3NywxOS4wMTU4MDA2IDMyLjIyNjk2MjQsMTkuMDE1ODAwNiBMMzMuNTYyNDAyNSwxOS41MjQ1Mzk3IEMzMy44ODAzNjQ1LDE5LjY1MTcyNDUgMzQuMTk4MzI2NCwxOS4zOTczNTUgMzQuMTk4MzI2NCwxOS4wNzkzOTMgTDM0LjE5ODMyNjQsMTcuNTUzMTc1OCBDMzQuMTk4MzI2NCwxNy40MjU5OTEgMzQuMjYxOTE4OCwxNy4zNjIzOTg2IDM0LjI2MTkxODgsMTcuMjk4ODA2MiBMMzUuMjE1ODA0NSwxNi4wOTA1NTA5IEMzNS40MDY1ODE3LDE1LjgzNjE4MTQgMzUuMjc5Mzk2OSwxNS40NTQ2MjcxIDM0Ljk2MTQzNSwxNS4zOTEwMzQ3IEwzMy42MjU5OTQ5LDE1LjAwOTQ4MDQgQzMzLjQ5ODgxMDEsMTUuMDA5NDgwNCAzMy40MzUyMTc4LDE0Ljk0NTg4OCAzMy4zNzE2MjU0LDE0LjgxODcwMzIgTDMyLjQ4MTMzMiwxMy41NDY4NTU1IEMzMi4yOTA1NTQ4LDEzLjI5MjQ4NiAzMS45MDkwMDA1LDEzLjI5MjQ4NiAzMS43MTgyMjM0LDEzLjU0Njg1NTUgTDMwLjgyNzkzLDE0Ljc1NTExMDggTDMwLjYzNzE1MjgsMTQuOTQ1ODg4IEwyOS4yMzgxMjAzLDE1LjM5MTAzNDcgQzI4Ljk4Mzc1MDgsMTUuNDU0NjI3MSAyOC44NTY1NjYsMTUuODM2MTgxNCAyOS4wNDczNDMyLDE2LjA5MDU1MDkgWiBNOS4zOTcyOTYyMSwxNi4wOTA1NTA5IEM5LjY1MTY2NTc1LDE2LjQ3MjEwNTIgMTAuMDMzMjIwMSwxNi45ODA4NDQzIDEwLjIyMzk5NzIsMTcuMjM1MjEzOSBDMTAuMjg3NTg5NiwxNy4yOTg4MDYyIDEwLjI4NzU4OTYsMTcuNDI1OTkxIDEwLjI4NzU4OTYsMTcuNDg5NTgzNCBMMTAuMjg3NTg5NiwxOS4wMTU4MDA2IEMxMC4yODc1ODk2LDE5LjMzMzc2MjYgMTAuNjA1NTUxNSwxOS41MjQ1Mzk3IDEwLjg1OTkyMTEsMTkuNDYwOTQ3MyBMMTIuMjU4OTUzNSwxOS4wMTU4MDA2IEMxMi4zODYxMzgzLDE4Ljk1MjIwODMgMTIuNDQ5NzMwNywxOS4wMTU4MDA2IDEyLjU3NjkxNTUsMTkuMDE1ODAwNiBMMTMuOTEyMzU1NiwxOS41MjQ1Mzk3IEMxNC4yMzAzMTc1LDE5LjY1MTcyNDUgMTQuNTQ4Mjc5NCwxOS4zOTczNTUgMTQuNTQ4Mjc5NCwxOS4wNzkzOTMgTDE0LjU0ODI3OTQsMTcuNTUzMTc1OCBDMTQuNTQ4Mjc5NCwxNy40MjU5OTEgMTQuNjExODcxOCwxNy4zNjIzOTg2IDE0LjYxMTg3MTgsMTcuMjk4ODA2MiBMMTUuNTY1NzU3NiwxNi4wOTA1NTA5IEMxNS43NTY1MzQ3LDE1LjgzNjE4MTQgMTUuNjI5MzQ5OSwxNS40NTQ2MjcxIDE1LjMxMTM4OCwxNS4zOTEwMzQ3IEwxNC4wMzk1NDAzLDE1LjAwOTQ4MDQgQzEzLjkxMjM1NTYsMTUuMDA5NDgwNCAxMy44NDg3NjMyLDE0Ljk0NTg4OCAxMy43ODUxNzA4LDE0LjgxODcwMzIgTDEyLjgzMTI4NSwxMy40ODMyNjMxIEMxMi42NDA1MDc5LDEzLjIyODg5MzYgMTIuMjU4OTUzNSwxMy4yMjg4OTM2IDEyLjA2ODE3NjQsMTMuNDgzMjYzMSBMMTEuMTc3ODgzLDE0LjY5MTUxODUgTDEwLjk4NzEwNTgsMTQuODgyMjk1NiBMOS41ODgwNzMzNywxNS4zOTEwMzQ3IEM5LjMzMzcwMzgzLDE1LjQ1NDYyNzEgOS4yMDY1MTkwNiwxNS44MzYxODE0IDkuMzk3Mjk2MjEsMTYuMDkwNTUwOSBMOS4zOTcyOTYyMSwxNi4wOTA1NTA5IFoiIGlkPSJTaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjIuMzA1NDQxLCAxNC4yNzg5OTMpIHJvdGF0ZSgtMTQuMDAwMDAwKSB0cmFuc2xhdGUoLTIyLjMwNTQ0MSwgLTE0LjI3ODk5MykgIj48L3BhdGg+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
    display: block;
    transform: rotate(14deg);
    position: absolute;
    top: 3px;
    left: 6px;
}

.game-card .game-content {
    position: relative;
    height: 100%;
    transition: transform 0.3s;
}

.game-card .game-content::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 49%,
        rgba(0, 0, 0, 0.48)
    );
}

.game-card .game-content .game-img-wrap {
    width: 100%;
    padding-bottom: 133.584%;
    position: relative;
}

.game-card .game-content .game-img-wrap .game-img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    -o-object-fit: cover;
    object-fit: cover;
}

.game-card .game-content .game-name {
    position: absolute;
    left: 8px;
    bottom: 20px;
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card .game-content .pro-name {
    position: absolute;
    left: 8px;
    bottom: 20px;
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card .game-detail {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0.5;
    text-align: center;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    height: 0;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}

.game-card .game-detail .detail-content {
    position: relative;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    transform: translateY(calc(100% + 36px));
    transition: all 0.3s ease-in-out;
}

.game-card .game-detail .detail-content::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.8);
}

.game-card .game-detail .detail-content .detail-head {
    height: 40px;
    padding: 0 9px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.52);
    border-bottom: solid 1px rgba(0, 0, 0, 0.24);
}

.game-card .game-detail .detail-content .detail-head .game-title {
    font-size: 0.875rem;
    vertical-align: middle;
    color: #000;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.game-card .game-detail .detail-content .main-box {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.52);
    border-bottom: solid 1px rgba(0, 0, 0, 0.24);
}

.game-card .game-detail .detail-content .info {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 14px 9px;
    z-index: 1;
}

.game-card .game-detail .detail-content .info .box {
    flex: 1;
    z-index: 1;
}

.game-card .game-detail .detail-content .info .box:nth-child(2) {
    box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.52);
    border-left: solid 1px rgba(0, 0, 0, 0.24);
}

.game-card .game-detail .detail-content .detail-heading {
    color: #2f3031;
    font-size: 0.9375rem;
    display: block;
}

.game-card .game-detail .detail-content .detail-unit {
    color: #656565;
    font-size: 0.75rem;
    transform: scale(0.9166666667);
    display: block;
}

.game-card .game-detail .play-game-btn {
    transform: translateY(100%);
    transition-property: transform, color, background;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-card .game-detail .play-game-btn > div {
    background-color: #e12824;
    font-size: 0.8125rem;
    color: #fff;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 45px;
    line-height: 45px;
    overflow: hidden;
    cursor: pointer;
}

.game-card .game-detail .play-game-btn > div.try {
    background-color: #eda600;
    color: #333;
}

.play-game-btn .try a {
    text-decoration: none !important;
    font-size: 0.8125rem;
}

.play-game-btn .try a:hover {
    color: #e12824;
}

.game-card .game-detail .play-game-btn > div:hover {
    color: #e12824;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .game-card {
        cursor: pointer;
    }
    .game-card .tag {
        width: 34px;
        height: 34px;
        font-size: 0.6875rem;
        margin-bottom: 5px;
    }
    .game-card .tag.tag-jackpot span {
        transform: scale(0.8);
    }
    .game-card .tag.tag-jackpot::after {
        transform: rotate(14deg) scale(0.85);
        position: absolute;
        top: 2px;
        left: 3px;
    }
    .game-card .game-detail {
        z-index: 2;
    }
    .game-card .game-content .game-name {
        font-size: 0.875rem;
        bottom: 15px;
        left: 6px;
    }
    .game-card .game-content .pro-name {
        font-size: 0.875rem;
        bottom: 15px;
        left: 6px;
    }
}

/* @media screen and (min-width: 769px) { */
@media screen and (min-width: 279px) {
    .game-card:hover .game-content {
        transform: translateY(-36px);
    }
    .game-card:hover .tag {
        transform: translateY(-36px);
    }
    .game-card:hover .game-detail {
        opacity: 1;
        height: 100%;
    }
    .game-card:hover .game-detail .detail-content,
    .game-card:hover .game-detail .play-game-btn {
        transform: translateY(0);
    }
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card {
    width: 100%;
    border-radius: 5rem;
    overflow: hidden;
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card:hover
    .game-content {
    transform: none;
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card:hover
    .tag {
    transform: rotate(-14deg);
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card
    .game-detail {
    display: none;
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card
    .tag-list {
    top: 7rem;
    right: 5rem;
    width: 35rem;
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card
    .tag-list
    .tag {
    width: 30rem;
    height: 30rem;
    font-size: 11rem;
}

html.mobile.host-no-viewport.portrait
    #app
    .home
    .main
    .container
    .game-category
    .game-card
    .game-name
    .pro-name {
    font-size: 13rem;
    bottom: 11rem;
    right: 5rem;
}

.game-modal.SlideDownward-enter-from .game-detail,
.game-modal.SlideDownward-leave-to .game-detail {
    transform: translateY(100%);
}

.game-modal.SlideDownward-enter-from .mask,
.game-modal.SlideDownward-leave-to .mask {
    opacity: 0;
}

.game-modal.SlideDownward-enter-to .game-detail,
.game-modal.SlideDownward-leave-from .game-detail {
    transform: translateY(0);
}

.game-modal.SlideDownward-enter-to .mask,
.game-modal.SlideDownward-leave-from .mask {
    opacity: 1;
}

.game-modal.SlideDownward-enter-active .game-detail,
.game-modal.SlideDownward-leave-active .game-detail {
    transition: transform 0.3s;
}

.game-modal.SlideDownward-enter-active .mask,
.game-modal.SlideDownward-leave-active .mask {
    transition: opacity 0.3s;
}

.game-modal .game-detail {
    height: auto;
    opacity: 1;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    position: fixed;
    left: 0;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-direction: column;
}

.game-modal .game-detail .game-modal-title {
    position: relative;
    border-radius: 20px 20px 0 0;
    background-color: #760c0c;
}

.game-modal .game-detail .game-modal-title strong {
    text-align: center;
    display: block;
    line-height: 40px;
    color: #fff;
    font-size: 0.875rem;
}

.game-modal .game-detail .game-modal-title .close-btn {
    color: #fff;
    position: absolute;
    top: 8px;
    right: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    background-color: rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-modal .game-detail .game-modal-title .close-btn::before {
    content: "";
    font-family: "icomoon";
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

.game-modal .game-detail .detail-content {
    position: relative;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background-color: #fff;
}

.game-modal .game-detail .detail-content::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.8);
}

.game-modal .game-detail .detail-content .detail-head {
    height: 40px;
    padding: 0 9px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
    height: 87px;
    padding: 0 17px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.52);
    border-bottom: solid 1px rgba(0, 0, 0, 0.24);
}

.game-modal .game-detail .detail-content .detail-head .game-small-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    background-color: #fff;
}

.game-modal .game-detail .detail-content .detail-head .game-title {
    margin-left: 14px;
    font-size: 0.875rem;
    text-align: left;
    vertical-align: middle;
    color: #0f0f0f;
    position: relative;
    font-weight: bold;
    z-index: 1;
}

.game-detail .detail-content .detail-head img {
    box-shadow: none;
}

.game-modal .game-detail .detail-content .info {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    z-index: 1;
}

.game-modal .game-detail .detail-content .info .box {
    padding: 10px;
    flex: 1;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.game-modal .game-detail .detail-content .info .box:not(:nth-child(1)) {
    box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.52);
    border-left: solid 1px rgba(0, 0, 0, 0.24);
}

.game-modal .game-detail .detail-content .detail-heading {
    color: #2f3031;
    font-size: 0.9375rem;
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-modal .game-detail .detail-content .detail-unit {
    margin-top: 5px;
    color: #9a9c9e;
    font-size: 0.75rem;
    transform: scale(0.9166666667);
    display: block;
    width: 100%;
}

.game-modal .game-detail .btnwrap {
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
}

.game-modal .game-detail .btnwrap .play-game-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e12824;
    font-size: 0.8125rem;
    color: #fff;
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 40px;
    line-height: 40px;
    overflow: hidden;
    cursor: pointer;
}

.game-modal .game-detail .btnwrap .play-game-btn2 {
    background-color: #eda600;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .game-modal-title {
    border-radius: 20rem 20rem 0 0;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .game-modal-title
    strong {
    line-height: 40rem;
    font-size: 14rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .game-modal-title
    .close-btn {
    top: 8rem;
    right: 17rem;
    width: 24rem;
    min-width: 24rem;
    height: 24rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .game-modal-title
    .close-btn::before {
    font-size: 12rem;
    transform: scale(0.6);
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .detail-head {
    padding: 0 16rem;
    height: 87rem;
    border-width: 1rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .detail-head
    .game-small-img {
    width: 56rem;
    height: 56rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .detail-head
    .game-title {
    font-size: 14rem;
    margin-left: 14rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .info {
    padding: 25rem 0;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .info
    .box {
    padding: 10rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .info
    .box
    .info {
    padding: 25rem 0;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .info
    .box
    .info
    .box {
    padding: 10rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .detail-heading {
    font-size: 14rem;
}

html.mobile.host-no-viewport.portrait
    .game-modal
    .game-detail
    .detail-content
    .detail-unit {
    font-size: 11rem;
}

html.mobile.host-no-viewport.portrait .game-modal .game-detail .play-game-btn {
    height: 40rem;
    font-size: 13rem;
}

#myBtnContainer {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

.filterDiv {
    display: none;
}

.show {
    display: block;
}

.btn-filter {
    font-size: 0.875rem;
    color: #fff;
    font-weight: 500;
    outline: none;
    padding: 12px 16px;
    background-color: transparent;
    border: 1px solid #ff0000;
    cursor: pointer;
    border-radius: 0;
    text-transform: uppercase;
}

.btn-filter:hover {
    background-color: transparent;
    border: 1px solid #ff0000;
    color: #ff0000;
}

.btn-filter.active {
    background-color: #ff0000;;
    color: #fff;
}

@media (max-width: 360px) {
    .btn-filter {
        font-size: 0.75rem;
        padding: 10px 14px;
    }
}

@media (max-width: 280px) {
    .btn-filter {
        font-size: 0.5rem;
        padding: 8px 12px;
    }
}