:root {
    --game-container-max-width-portrait-mobile: 335px;     
    --game-container-max-height-portrait-mobile: 232px;    
    --game-container-max-width-landscape-small-mobile: 300.65px;    
    --game-container-max-height-landscape-small-mobile: 208px;   
    --game-container-max-width-landscape-mobile: 318px;    
    --game-container-max-height-landscape-mobile: 220px;   
    --game-container-max-width-portrait-tablet: 698px;     
    --game-container-max-height-portrait-tablet: 484px;    
    --game-container-max-width-landscape-tablet: 758px;    
    --game-container-max-height-landscape-tablet: 525px;  
    --game-container-max-width-landscape-small-tablet: 585px;    
    --game-container-max-height-landscape-small-tablet: 405px;    
    --game-container-max-width-desktop: 926px;             
    --game-container-max-height-desktop: 640px;            
}

@font-face {
    font-family: 'CCWhatchamacallit Condensed';
    src: url('./assets/fonts/CCWhatchamacallit-Condensed-Regular.otf') format('opentype');
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'SagoMini Rounded Regular';
    src: url('./assets/fonts/SagoMiniRounded-Regular_v2.otf') format('opentype'),
         url('./assets/fonts/SagoMiniRounded-Regular_v2.woff2') format('woff2');
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .header-font {
    font-family: 'CCWhatchamacallit Condensed';
    font-stretch: condensed;
    font-weight: 400;
    line-height: normal;
}

p, span, label, a {
    font-family: 'SagoMini Rounded Regular';
}

button {
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
    padding: 0;
}

body {
    background-image: url('./assets/images/image_hero_bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}

#unity-container {
    box-shadow: 10px 10px 0px 0px #00000040;
    width: 100%;
    max-width: var(--game-container-max-width-portrait-mobile);
    height: var(--game-container-max-height-portrait-mobile);
}

#unity-loading-bar-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#unity-logo {
    width: 75px;
    height: 75px;
    background-size: contain;
}

#unity-progress-bar-empty {
    margin-left: 0px; /* this is an override - probably want to remove this from the base styles */
}

#unity-progress-bar-full {
    margin-top: 0px; /* this is an override - probably want to remove this from the base styles */
}

.superfonik-custom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #FF9E12;
    border: solid 2px #000000;
    border-radius: 999px;
    padding: 8px 30px;
    cursor: pointer;
    outline: none;
    position: relative;
    box-shadow: 3px 3px 0px 0px #000000;
    color: #000000;
}

.superfonik-custom-button:visited {
    color: #000000;
}

.superfonik-custom-button:active {
    background: #FFA82B;
}

.superfonik-custom-button:hover {
    background: #FFA82B;
}

.superfonik-custom-button span {
    font-family: 'CCWhatchamacallit Condensed';
    font-stretch: condensed;
    font-weight: 400;
    font-size: 26px;
    line-height: 33px;
}

.superfonik-custom-button .button-shine {
    width: 28px;
    top: 4px;
    left: 10px;
    position: absolute;
}

.superfonik-logo {
    width: 158px;
    height: 53px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: calc(50% - var(--game-container-max-height-portrait-mobile) / 2 - 65px); /* middle of the screen - half height of the game container - margins */
}

.superfonik-cta-container {
    color: #FFFFFF;
    font-weight: 300;
    font-size: 28px;
    line-height: 35px;   
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: calc(50% + var(--game-container-max-height-portrait-mobile) / 2 + 115px); /* middle of the screen + half height of the game container + margins */

    max-width: 315px;
    flex-direction: column;
}

.superfonik-cta-container p {
    margin: 0;
}

.screen-message-banner {
    height: 60px;
    background-color: rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.screen-message-banner p {
    margin: 0;
}

/* Mobile Landscape */
@media (min-width: 480px) 
    and (max-width: 1365px) 
    and (orientation: landscape) 
    and (max-height: 600px) {
    #unity-container {
        box-shadow: 5px 5px 0px 0px #00000040;
        max-width: var(--game-container-max-width-landscape-mobile);
        height: var(--game-container-max-height-landscape-mobile);
    }

    .screen-message-banner {
        height: 50px;
    }

    .superfonik-logo {
        display: none;
    }
    
    .superfonik-cta-container {
        flex-direction: row;
        max-width: initial;
        gap: 25px;
        font-size: 20px;
        line-height: 35px;
        top: calc(50% + var(--game-container-max-height-landscape-mobile) / 2 + 45px); /* middle of the screen + half height of the game container + margins */
    }

    .superfonik-custom-button .button-shine {
        width: 18px;
        left: 8px;
    }

    .superfonik-custom-button {
        padding: 7px 30px;
    }

    .superfonik-custom-button span {
        font-size: 22px;
        line-height: 100%;
    }
}

/* Tablet Portrait */
@media (min-width: 744px) 
     and (max-width: 1365px) 
     and (orientation: portrait) {
    #unity-container {
        max-width: var(--game-container-max-width-portrait-tablet);
        height: var(--game-container-max-height-portrait-tablet);
    }

    .screen-message-banner {
        display: none;
    }

    .superfonik-logo {
        top: calc(50% - var(--game-container-max-height-portrait-tablet) / 2 - 65px); /* middle of the screen - half height of the game container - margins */
    }
    
    .superfonik-cta-container {
        gap: 20px;
        max-width: initial;
        flex-direction: row;
        top: calc(50% + var(--game-container-max-height-portrait-tablet) / 2 + 70px); /* middle of the screen + half height of the game container + margins */
    }

    #unity-logo {
        width: 135px;
        height: 135px;
    }
}

/* Tablet Landscape - Large Height */
@media (min-width: 768px)
       and (max-width: 1365px)
       and (min-height: 856px)
       and (orientation: landscape) {
    #unity-container {
        max-width: var(--game-container-max-width-landscape-tablet);
        height: var(--game-container-max-height-landscape-tablet);
    }

    .screen-message-banner {
        display: none;
    }

    .superfonik-logo {
        width: 158px;
        height: 53px;
        top: calc(50% - var(--game-container-max-height-landscape-tablet) / 2 - 53px); /* middle of the screen - half height of the game container - margins */
    }
    
    .superfonik-cta-container {
        flex-direction: row;
        max-width: initial;
        gap: 20px;
        font-size: 28px;
        line-height: 35px;
        top: calc(50% + var(--game-container-max-height-landscape-tablet) / 2 + 65px); /* middle of the screen + half height of the game container + margins */
    }

    .superfonik-custom-button {
        padding: 8px 30px;
    }

    .superfonik-custom-button span {
        font-size: 26px;
        line-height: 33px;
    }
}

/* Tablet Landscape - Small Height */
@media (min-width: 768px)
       and (max-width: 1365px)
       and (min-height: 601px)
       and (max-height: 855px)
       and (orientation: landscape) {
    #unity-container {
        max-width: var(--game-container-max-width-landscape-small-tablet);
        height: var(--game-container-max-height-landscape-small-tablet);
    }

    .screen-message-banner {
        display: none;
    }

    .superfonik-logo {
        width: 138px;
        top: calc(50% - var(--game-container-max-height-landscape-small-tablet) / 2 - 45px);
    }

    .superfonik-cta-container {
        flex-direction: row;
        max-width: initial;
        font-size: 23px;
        top: calc(50% + var(--game-container-max-height-landscape-small-tablet) / 2 + 70px); /* middle of the screen + half height of the game container + margins */
    }

    .superfonik-custom-button {
        padding: 5px 25px;
    }

    .superfonik-custom-button span {
        font-size: 24px;
    }

    .superfonik-custom-button .button-shine {
        width: 23px;
        top: 4px;
        left: 8px;
    }
}

/* Desktop */
@media (min-width: 1366px) and (min-height: 856px) {
    #unity-container {
        max-width: var(--game-container-max-width-desktop);
        height: var(--game-container-max-height-desktop);
    }

    .screen-message-banner {
        display: none;
    }

    .superfonik-custom-button {
        padding: 10px 35px;
    }

    .superfonik-custom-button span {
        font-size: 30px;
    }

    .superfonik-logo {
        width: 180px;
        height: 60px;
        top: calc(50% - var(--game-container-max-height-desktop) / 2 - 65px);
    }
    
    .superfonik-cta-container {
        flex-direction: row;
        max-width: initial;
        gap: 25px;
        font-size: 26px;
        line-height: 35px;
        top: calc(50% + var(--game-container-max-height-desktop) / 2 + 70px);
    }

    #unity-logo {
        width: 180px;
        height: 180px;
    }
}

/* Desktop - Small Height (uses tablet large styles) */
@media (min-width: 1366px) and (min-height: 730px) and (max-height: 855px) and (orientation: landscape) {
    #unity-container {
        max-width: var(--game-container-max-width-landscape-tablet);
        height: var(--game-container-max-height-landscape-tablet);
    }

    .screen-message-banner {
        display: none;
    }

    .superfonik-logo {
        width: 158px;
        height: 53px;
        top: calc(50% - var(--game-container-max-height-landscape-tablet) / 2 - 53px);
    }
    
    .superfonik-cta-container {
        flex-direction: row;
        max-width: initial;
        gap: 20px;
        font-size: 28px;
        line-height: 35px;
        top: calc(50% + var(--game-container-max-height-landscape-tablet) / 2 + 65px);
    }

    .superfonik-custom-button {
        padding: 8px 30px;
    }

    .superfonik-custom-button span {
        font-size: 26px;
        line-height: 33px;
    }
}

/* Desktop - Very Small Height (uses tablet small styles) */
@media (min-width: 1366px) and (max-height: 729px) and (orientation: landscape) {
    #unity-container {
        max-width: var(--game-container-max-width-landscape-small-tablet);
        height: var(--game-container-max-height-landscape-small-tablet);
    }

    .screen-message-banner {
        display: flex;
    }

    .superfonik-logo {
        width: 138px;
        top: calc(50% - var(--game-container-max-height-landscape-small-tablet) / 2 - 45px);
    }

    .superfonik-cta-container {
        font-size: 23px;
        top: calc(50% + var(--game-container-max-height-landscape-small-tablet) / 2 + 50px);
    }

    .superfonik-custom-button {
        padding: 5px 25px;
    }

    .superfonik-custom-button span {
        font-size: 24px;
    }

    .superfonik-custom-button .button-shine {
        width: 23px;
        top: 4px;
        left: 8px;
    }
}

/* Mobile Landscape - Small Height */
@media (max-height: 375px) {
    #unity-container {
        max-width: var(--game-container-max-width-landscape-small-mobile);
        height: var(--game-container-max-height-landscape-small-mobile);
    }

    .superfonik-logo {
        display: none;
    }

    .screen-message-banner {
        display: flex;
    }

    .superfonik-cta-container {
        font-size: 16px;
        top: calc(50% + var(--game-container-max-height-landscape-small-mobile) / 2 + 30px); /* middle of the screen + half height of the game container + margins */
    }

    .superfonik-custom-button {
        padding: 5px 16px;
    }

    .superfonik-custom-button .button-shine {
        width: 15px;
        left: 4px;
        top: 2px;
    }

    .superfonik-custom-button span {
        font-size: 17px;
    }
}