html {
    /* This ensures that the height of the page is correct when resizing */
    overflow: hidden
}

body {
    position: fixed;
    margin: 0;
}

/* Grid layout for iFrame

[HEADER][HEADER][HEADER]
[SIDEBAR][IFRAME][BLANK]
[FOOTER][FOOTER][FOOTER]

*/

.frameGrid {
    width: var(--deviceWidth);
    height: 100%;
}

.gridHeader {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

.gridSidebar {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.gridContent {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    justify-self: center;
    align-self: center;
    width: 100%;
    height: 100%;
}

#leaderboardMenu {
    width: 100%;
    height: var(--game-menu-size);
    position: absolute;
    top: 0;
    z-index: 1;
}

#leaderboardMenuFrame {
    border: none;
    padding: 0;
    height: 100%;
    width: 100%;
}

#gameWrapper {
    width: 100%;
    height: 100%;
}

.frameGrid.leaderboardIsActive #gameWrapper {
    height: calc(100% - (var(--game-menu-size) * 2));
    position: absolute;
    top: var(--game-menu-size);
}

#optinContent {
    z-index: 1;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
}

#leaderboardContent {
    width: 100%;
    height: calc(100% - (var(--game-menu-size) * 2));
    position: absolute;
    top: var(--game-menu-size);
    z-index: 1;
}

.frameGrid.leaderboardIsActive.thrilltechIsActive #leaderboardContent {
    height: calc(100% - (var(--game-menu-size) * 2) - var(--thrilltech-optin-bar-height));
}

#gameFrame,
#leaderboardContentFrame,
#optinContentFrame {
    border: none;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

#licenseText {
    display: none;
    width: 100%;
    margin-block-start: 1em;
    text-align: center;
}

/* Required for legacy non-darksaber */
#layout-body .content {
    max-width: 100%;
    max-height: 100%;
}

/* Make standard after darksaber */
.page__content #gameplayComponent {
    margin-top: var(--sgabarHeight) !important;
}

#gameplayComponent {
    height: calc(var(--deviceHeight) - var(--sgabarHeight)) !important;
    display: flex !important;
}

#gameplayHolder {
    background: var(--game-page-bg-color);
    height: auto !important;
    display: flex !important;
}

.gridFooter {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
}

@media screen and (max-width: 1023px) and (max-aspect-ratio: 16/9) {
    .gridFooter #gameMenu {
        top: auto;
        bottom: 0;
        left: 0;
    }

    #gameplayHolder .frameGrid {
        height: calc(100% - var(--game-menu-size));
    }

    #gameplayHolder .frameGrid.thrilltechIsActive {
        height: calc(100% - var(--game-menu-size) - var(--thrilltech-optin-bar-height));
    }

    .frameGrid.leaderboardIsActive.thrilltechIsActive #gameWrapper {
        height: calc(100% - (var(--game-menu-size) * 2) - var(--thrilltech-optin-bar-height));
    }
}

/** Landscape **/
@media screen and (max-width: 1023px) and (min-aspect-ratio: 16/9) {
    body {
        background-color: #000;
    }

    .gridFooter #gameMenu {
        left: unset;
    }

    #leaderboardMenu {
        height: 100%;
        width: var(--game-menu-size);
    }

    #gameWrapper {
        height: 100%;
        width: calc(100% - var(--game-menu-landscape-size));
        overflow: hidden;
    }

    .frameGrid.leaderboardIsActive #gameWrapper {
        height: 100%;
        width: calc(100% - var(--game-menu-landscape-size) - var(--game-menu-size));
        top: 0;
        left: var(--game-menu-size);
        right: var(--game-menu-landscape-size);
    }

    .frameGrid.leaderboardIsActive.thrilltechIsActive #gameWrapper {
        height: calc(100% - var(--thrilltech-optin-bar-height));
    }

    #gameplayHolder .frameGrid.thrilltechIsActive { 
        height: calc(100% - var(--thrilltech-optin-bar-height));
    }

    .frameGrid.frameGrid .gridFooter {
        width: calc(100% - var(--game-menu-landscape-size));
        margin: 0 var(--game-menu-landscape-size) 0 0;
    }

    .frameGrid.frameGrid.leaderboardIsActive .gridFooter {
        width: calc(100% - var(--game-menu-size) - var(--game-menu-landscape-size));
        margin: 0 var(--game-menu-landscape-size) 0 var(--game-menu-size);
    }

    #gameplayHolder .frameGrid {
        height: 100%;
    }

    #leaderboardContent {
        height: 100%;
        width: calc(100% - var(--game-menu-landscape-size) - var(--game-menu-size));
        top: 0;
        left: var(--game-menu-size);
        right: var(--game-menu-landscape-size);
    }

    .frameGrid.frameGrid.leaderboardIsActive.thrilltechIsActive #leaderboardContent {
        height: calc(100% - var(--thrilltech-optin-bar-height));
    }

    .gridContent {
        display: flex;
    }

    #gameFrame,
    #leaderboardContentFrame,
    #optinContentFrame {
        height: 100%;
        min-height: 100%;
    }
}

/** Bigger devices - desktop, etc. **/
@media screen and (min-width: 1024px) {
    #gameplayHolder {
        background: var(--game-page-bg);
    }

    .frameGrid.leaderboardIsActive .gridContent {
        border-top-left-radius: var(--game-menu-border-radius-desktop);
        border-top-right-radius: var(--game-menu-border-radius-desktop);
        position: relative;
    }

    .frameGrid {
        margin: auto;
        display: grid;
        grid-template-columns: 0 100% 0;
        grid-template-rows: 6% 76% 18%;
    }

    .frameGrid.leaderboardIsActive {
        grid-template-rows: 7% 76% 17%;
    }

    .frameGrid.thrilltechIsActive {
        grid-template-rows: 6% 78% 16%;
    }

    .frameGrid.thrilltechIsActive.licenseIsActive {
        grid-template-rows: 6% 74% 20%;
    }

    .gridContent {
        justify-content: normal;
        justify-self: auto;
        align-self: stretch;
        width: -moz-fit-content;
        width: fit-content;
        aspect-ratio: var(--desktopGameAspectRatio);
        max-height: 100%;
        max-width: 96vw;
        margin: 0 auto;
    }

    @supports not (aspect-ratio: auto) {
        /* Fallback in case the browser does not support aspect-ratio */
        .gridContent {
            width: 100%;
        }
    }

    .gridFooter {
        align-self: center;
    }

    #leaderboardMenuFrame {
        border-top-left-radius: var(--game-menu-border-radius-desktop);
        border-top-right-radius: var(--game-menu-border-radius-desktop);
    }

    #gameWrapper {
        height: 100%;
    }

    .frameGrid.leaderboardIsActive #gameWrapper {
        height: calc(100% - var(--game-menu-size));
    }

    #optinWrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--spk-site-overlay-shadow-background-color-primary);
        z-index: 1;
    }

    #optinContent {
        width: 400px;
        border-radius: 10px;
    }

    #optinContentFrame {
        border-radius: 10px;
    }

    #leaderboardContent {
        height: calc(100% - var(--game-menu-size));
    }

    #licenseText {
        display: inline-block;
    }
}

@media screen and (min-width: 1024px) and (min-height: 900px) {
    .frameGrid {
        grid-template-columns: 2% 96% 2%;
        grid-template-rows: 6% 80% 14%;
    }
}

@media screen and (min-width: 1024px) and (min-height: 1200px) {
    .frameGrid {
        grid-template-rows: 3% 88% 9%;
    }
}

@media screen and (min-width: 1024px) and (min-height: 1800px) {
    .frameGrid {
        grid-template-columns: 1% 98% 1%;
        grid-template-rows: 2% 90% 8%;
    }
}

/* Always background cover on high resolution screens */
@media screen and (min-width: 3840px) {
    #gameplayHolder {
        background-size: cover;
    }
}

/*# sourceMappingURL=gamePageStyle.259e036ee7c0f541c54f.css.map*/