.page.game-page {
    display: flex;
}

/* Mobile */
.page.game-page.mobile {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: calc(100dvh - 40px - 40px);
}

.page.game-page.mobile .mobile-game-topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.page.game-page.mobile .mobile-game-topbar .left {
    display: flex;
}
.page.game-page.mobile .mobile-game-topbar .left .back-button {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6E7681;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    padding-right: 15px;
}

.page.game-page.mobile .mobile-game-topbar .right {
    display: flex;
    gap: 5px;
}
.page.game-page.mobile .mobile-game-topbar .right .icon-button {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6E7681;
    cursor: pointer;
}

.page.game-page.mobile .mobile-game-topbar .right .icon-button svg {
    width: 22px;
    height: auto;
}

.page.game-page .game-info {
    width: 100%;
    max-width: 390px;
}
.page.game-page .game-info .game-info-details {
    width: 100%;
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
.page.game-page .game-info .game-info-details .game-details {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.page.game-page .game-info .game-info-details .game-details img {
    width: 153px;
    height: 206px;
    border-radius: 14px;
}
.page.game-page .game-info .game-info-details .game-details .game-lore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.page.game-page .game-info .game-info-details .game-details .game-lore .title {
    font-size: 20px;
    font-weight: 600;
    color: #E8EAED;
}
.page.game-page .game-info .game-info-details .game-details .game-lore .provider {
    display: flex;
    font-size: 12px;
    font-weight: 500;
    color: #A1A7B0;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.page.game-page .game-info .game-info-details .game-details .game-lore .provider svg {
    width: 16px;
    height: auto;
}

.page.game-page .game-info .game-info-background {
    width: calc(100% - 20px);
    max-width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: 1;
}
.page.game-page .game-info .game-info-background .circle-mask {
    width: 100%;
    aspect-ratio: 1/1;
    background-image: url(../../images/circle-mask.png);
    background-size: 100%;
    position: relative;
    z-index: 1;
}
.page.game-page .game-info .game-info-background .ellipse {
    width: 82%;
    aspect-ratio: 4/1;
    border-radius: 100%;
    filter: blur(70px);
    -webkit-filter: blur(70px);
    -moz-filter: blur(70px);
    -o-filter: blur(70px);
    position: absolute;
    z-index: 0;
    margin-top: 20%;
    opacity: 1;
    background: rgb(0, 0, 0);
    transition: background 200ms;
}

.page.game-page .game-info .game-controller {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page.game-page .game-info .game-configs {
    width: calc(100% - 28px);
    padding: 14px;
    border-radius: 14px;
    background: #1F2328;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.page.game-page .game-info .game-configs .game-config {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page.game-page .game-info .game-configs .game-config .title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.page.game-page .game-info .game-configs .game-config .value {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #A1A7B0;
    font-size: 12px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0);
    transition: background 200ms;
    cursor: pointer;
}
.page.game-page .game-info .game-configs .game-config .value svg {
    width: 16px;
    height: 16px;
}
.page.game-page .game-info .game-configs .game-config .value svg:nth-child(2) {
    width: 12px;
    height: 12px;
}

.page.game-page .game-info .game-buttons {display: flex;gap: 10px;}
.page.game-page .game-info .game-buttons .button {}
.page.game-page .game-info .game-buttons .button.blue {}
.page.game-page .game-info .game-buttons .button.dark {}

.page.game-page .game-info .game-configs .game-config-devider {
    width: 100%;
    height: 1px;
    background: #262B31;
}

.page.game-page.mobile .game-widget {
    width: 100vw;
    height: calc(100dvh - 80px);
}

.page.game-page .game-widget iframe {
    width: 100%;
    height: 100%;
    outline: 0;
    border: 0;
}

/* Desktop */
.page.game-page.desktop {
    gap: 20px;
}
.page.game-page.desktop .desktop-game-topbar {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
}
.page.game-page.desktop .desktop-game-topbar .left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.page.game-page.desktop .desktop-game-topbar .left .back-button {
    border-radius: 14px;
    background: #1F2328;
    height: 36px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #E8EAED;
    cursor: pointer;
}
.page.game-page.desktop .desktop-game-topbar .left .back-button svg {
    color: #6E7681;
    width: 14px;
    height: 14px;
}

.page.game-page.desktop .desktop-game-topbar .left .demo-toggler {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #E8EAED;
    gap: 10px;
}

.page.game-page.desktop .desktop-game-topbar .right {
    display: flex;
    gap: 10px;
}
.page.game-page.desktop .desktop-game-topbar .right .icon-button {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: #262B31;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.page.game-page.desktop .desktop-game-topbar .right .icon-button svg {
    color: #6E7681;
}
.page.game-page.desktop .game-widget {
    width: 100%;
    aspect-ratio: 16/9;
    background: #16181c;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
}

/* FullScreen header */
.page.game-page .fullscreen-header {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column;
    background: #121417;
}
.page.game-page .fullscreen-header .logotype {
    width: 100%;
    height: 50px;
    min-height: 50px;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page.game-page .fullscreen-header .logotype svg {width: auto;height: 28px;}

.page.game-page .fullscreen-header .buttons-block {
    width: calc(100% - 14px);
    height: 50px;
    padding: 0px 7px;
    position: relative;
    margin-top: -50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
}
.page.game-page .fullscreen-header .buttons-block .button {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #262B31;
    border-radius: 14px;
    cursor: pointer;
}
.page.game-page .fullscreen-header .buttons-block .button svg {
    color: #6E7681;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes gradientRotate {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}