:root {
    /*--font-sans: font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
    --foreground-rgb: 0, 0, 0;
    --background-end: #f2f4f4;
    --game-gap: 15px;
    --game-radius: 5px;
    --primary: #bc40ef;
    --primary-light: #e3b0f7;
    --primary-lighter: #f7d9ff;
    --blue-light: #2644b2;
    --blue: #1d3499;
    --blue-dark: #1d3499;
    --full-radius: 9999px;
    --ad-bg: #94949424;
    --panel-bg: linear-gradient(317.57deg, #342ebf 4.41%, #68d4e3 90.06%);
    --btn-bg: linear-gradient(180deg, #de3ac4, #f76133);
    --panel-radius: 10px;
    --panel-shadow: 0 2px 4px 0 #0000004d;
    --text-gray: #999;
    --text-shadow: 6px 1px 0 #263077, 0 0 0 #263077;
    --header-height: 60px;
    --banner-ratio: 128/85;
    --dialog-width: 96vw;
    --dialog-height: 250px
}

.pc:root {
    --header-height: 80px
}

::-webkit-scrollbar {
    display: none!important;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, to {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-5px)
    }
    60% {
        transform: translateY(-2px)
    }
}

@keyframes bouncex {
    0%, 20%, 50%, 80%, to {
        transform: translateX(0)
    }
    40% {
        transform: translateX(-5px)
    }
    60% {
        transform: translateX(-2px)
    }
}

@keyframes jello {
    0% {
        transform: scaleX(1)
    }
    30% {
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        transform: scale3d(1.05, .95, 1)
    }
    to {
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        transform: scale(.9)
    }
    to {
        transform: scale(1)
    }
}

.pulse {
    animation: pulse 1s ease-in-out infinite alternate
}

@keyframes msgn {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale(1.3)
    }
    to {
        transform: scaleX(1)
    }
}

@keyframes slider {
    0% {
        transform: translateX(0)
    }
    30% {
        transform: translateX(0)
    }
    33.3% {
        transform: translateX(-100%)
    }
    63.3% {
        transform: translateX(-100%)
    }
    66.6% {
        transform: translateX(-200%)
    }
    96.6% {
        transform: translateX(-200%)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes islider {
    0% {
        transform: translateX(0)
    }
    10% {
        transform: translateX(-45px)
    }
    20% {
        transform: translateX(-90px)
    }
    30% {
        transform: translateX(-135px)
    }
    40% {
        transform: translateX(-175px)
    }
    50% {
        transform: translateX(-215px)
    }
    60% {
        transform: translateX(-260px)
    }
    70% {
        transform: translateX(-305px)
    }
    80% {
        transform: translateX(-350px)
    }
    90% {
        transform: translateX(-410px)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes spinner-c7wet2 {
    to {
        transform: rotate(1turn)
    }
}

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

body, html {
    height: 100%
}

body {
    color: rgb(var(--foreground-rgb));
    font-family: var(--font-sans);
    background-color: var(--background-end)
}

img, video {
    max-width: 100%;
    object-fit: cover
}

a {
    color: inherit;
    text-decoration: none
}

.hidden {
    display: none
}

.flex-none {
    flex: none
}

.flex-1 {
    flex: 1 1
}

.flex {
    display: flex
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.items-center {
    align-items: center
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.uppercase {
    text-transform: uppercase
}

.cantarell {
    font-family: var(--font-cantarell);
    font-weight: 500
}

.poetsen-one {
    /*font-family: var(--font-poetsen-one);*/
    font-weight: 500
}

.loading {
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #182a3d
}

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #182a3d 94%, #0000) top/9px 9px no-repeat, conic-gradient(#0000 30%, #182a3d);
    /*-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);*/
    animation: spinner-c7wet2 1s linear infinite
}

.err-box {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.err-p {
    text-align: center;
    font-size: 40px;
    /*font-family: var(--font-poetsen-one)*/
}

.err-p-sub {
    text-align: center;
    line-height: 24px
}

.main-content {
    width: 100%;
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 10px
}

.game-grid-header {
    display: flex;
    align-items: center;
    margin: 20px 0 8px;
}

.game-grid-title {
    color: var(--primary);
    font-size: 26px;
    line-height: 40px;
    font-weight: bold;
}

.game-grid-subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 30px;
    margin-left: auto;
    border-radius: 10px;
    color: var(--primary);
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    background: var(--primary-lighter);
    transition: all .3s;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.game-grid-subtitle svg {
    margin-right: 2px
}

@media (any-hover: hover) {
    .game-grid-subtitle:hover {
        color: #fff;
        background: var(--primary)
    }
}

.game-column-main {
    display: grid;
    grid-gap: 10px;
    grid-template-columns:repeat(1, 1fr)
}

.game-column-item {
    overflow: hidden;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    font-size:1.2rem;
}

.game-column-item-wrap {
    overflow: hidden;
    display: flex;
    border-radius: var(--panel-radius);
    background: #fff;
    transition: all .3s
}

@media (any-hover: hover) {
    .game-column-item-wrap:hover {
        box-shadow: var(--panel-shadow);
        transform: translateY(-5px)
    }

    .game-column-item-wrap:hover .game-column-item-name {
        color: var(--primary)
    }
}

.game-column-item-cate {
    color: var(--text-gray);
    font-size: 1rem;
}

@media (any-hover: hover) {
    .game-column-item-wrap.hover:hover {
        transform: scale(1.06)
    }
}

.game-column-item-icon {
    position: relative;
    flex: none;
    display: flex
}

.game-column-item-icon.detail {
    overflow: hidden;
    border-radius: var(--panel-radius)
}

.game-column-item-name {
    flex: auto;
    margin-right: 8px
}

.game-column-item-download {
    flex: none;
    width: 84px;
    height: 30px;
    border-radius: 48px;
    color: var(--primary);
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    background: #fc10691a
}

@media (any-hover: hover) {
    .game-column-item-wrap.hover:hover .game-column-item-download {
        color: #fff;
        background: var(--primary)
    }
}

.app-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    transition: all .3s
}

@media (any-hover: hover) {
    .app-wrap:hover {
        transform: translateY(-5px)
    }

    .app-wrap:hover .app-name {
        color: var(--primary)
    }

    .app-wrap:hover .app-icon-wrap {
        box-shadow: var(--panel-shadow)
    }
}

.h5 .app-icon-wrap:after, .h5.game-column-item-icon:after {
    content: "H5";
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 18px;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    background: #fd5811
}

.app-icon-wrap {
    overflow: hidden;
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--game-radius)
}

.app-name {
    margin-top: 6px;
    font-size: 12px;
    text-align: center;
    transition: all .3s
}

.grid .app-name {
    color: #000
}

.detail-column-title {
    margin: 15px 0 8px;
    color: var(--primary);
    font-size: 26px;
    /*font-family: var(--font-poetsen-one);*/
    line-height: 40px
}

.related-games-panel {
    display: grid;
    grid-gap: var(--game-gap);
    grid-template-columns:repeat(3, 1fr);
    padding: 24px 18px
}

.download-panel, .related-games-panel {
    border-radius: var(--panel-radius);
    background: #fff
}

.download-panel {
    margin-top: 15px;
    padding: 30px 24px;
    font-size: 14px;
    line-height: 30px
}

.download-panel-title {
    font-size: 20px
}

.download-panel-desc-warp {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 20px 76px
}

.download-panel-os-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    margin-right: 8px;
    margin-top: 8px;
    border-radius: 9999px;
    font-size: 12px;
    color: var(--primary);
    background: #fc10691a
}

.download-panel-os-wrap.active {
    border-color: transparent;
    color: #fff;
    background: var(--primary)
}

.download-panel-os {
    display: flex;
    align-items: center;
    width: 100px
}

.download-panel-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 42px;
    margin: 24px auto 0;
    border-radius: var(--full-radius);
    color: var(--primary);
    /*font-family: var(--font-poetsen-one);*/
    background: #fc10691a;
    cursor: pointer
}

@media (any-hover: hover) {
    .download-panel-btn:hover {
        color: #fff;
        background: var(--primary)
    }
}

.download-panel-btn-svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    animation: bounce 2s 1s infinite
}

.download-panel-btn-svg-x {
    animation: bouncex 2s 1s infinite
}

.play-game-panel-icon {
    border-radius: var(--game-radius)
}

.play-game-panel-btn {
    width: 150px
}

.recommend-games {
    display: grid;
    grid-gap: var(--game-gap);
    grid-template-columns:repeat(3, 1fr)
}

.detail-main {
    padding: 0 10px
}

.detail-best-games-panel {
    display: grid;
    grid-gap: var(--game-gap)
}

.download-main {
    padding: 0 10px
}

.download-desc-panel {
    padding: 28px 24px;
    border-radius: var(--panel-radius);
    background: #fff
}

.download-desc-icon {
    display: block;
    margin: auto;
    border-radius: var(--game-radius)
}

.download-desc-name {
    margin-top: 10px;
    font-size: 20px;
    text-align: center;
    line-height: 30px
}

.download-desc-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 32px;
    margin: 10px auto;
    border-radius: var(--full-radius);
    color: var(--primary);
    /*font-family: var(--font-poetsen-one);*/
    background: #fc10691a
}

.download-desc-btn > svg {
    margin-right: 10px
}

.app-panel-get-down {
    width: 20px;
    height: 20px;
    margin-left: 5px
}

.app-panel-get-down.-more {
    transform: rotate(180deg)
}

.iframe-wrap {
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 120vw
}

.iframe-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.iframe-img {
    object-fit: cover;
    filter: brightness(.5)
}

.iframe-play-btn {
    position: relative;
    z-index: 99;
    color: #fff;
    background: var(--primary);
    animation: bounce 2s 1s infinite
}

.iframe {
    position: absolute
}

.iframe, .iframe-fixed {
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff
}

.iframe-fixed {
    position: fixed;
    z-index: 998
}

.iframe-back {
    left: 5px;
    top: 5px
}

.iframe-back, .iframe-full {
    position: absolute;
    z-index: 999;
    width: 48px;
    height: 48px;
    padding: 10px;
    border-radius: var(--full-radius);
    color: #fff;
    background: var(--primary)
}

.iframe-full {
    right: 5px;
    bottom: 5px
}

.iframe-play, .video-play {
    flex: 1 1
}

.iframe-games {
    overflow-y: auto;
    display: flex;
    padding: 2px 4px
}

.iframe-game {
    overflow: hidden;
    flex: none;
    display: flex;
    margin: 4px;
    border-radius: 4px
}

.video-name-wrap {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    /*font-family: var(--font-poetsen-one);*/
    color: #fff
}

.video-play-btn {
    display: flex;
    justify-content: center;
    width: 120px;
    height: 40px;
    margin-left: auto;
    border-radius: var(--full-radius);
    box-shadow: var(--panel-shadow);
    line-height: 40px;
    background: var(--btn-bg)
}

.video-play {
    position: relative;
    width: 100%;
    background: #000
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

@font-face {
    font-family: __cantarell_d6ca00;
    src: url(/css/game_9/fonts/920cbad6754794d1.ttf) format("truetype");
    font-display: swap
}

.__className_d6ca00 {
    font-family: __cantarell_d6ca00
}

.__variable_d6ca00 {
    --font-cantarell: "__cantarell_d6ca00"
}