:root{
    --banner-h: 50px;                 /* banner thickness */
}

/* page = vertical flex-column */
body{
    margin:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;               /* centre game horizontally       */
    background:url("images/background.jpg") center/cover no-repeat fixed;
}

/* flexible slot the game lives in */
#GameArea{
    flex:1 1 auto;                    /* fills leftover height          */
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;               /* centres vertically             */
    overflow:hidden;
}

/* make Cocos’ default black fully transparent */
#GameArea,
#GameDiv,
#Cocos3dGameContainer,
canvas#GameCanvas{
    background:transparent!important;
}

#Cocos3dGameContainer {
    position: relative;
}

/* bottom banner */
#test-banner{
    flex:0 0 var(--banner-h);         /* exactly 50 px tall             */
    width:100%;
    line-height:var(--banner-h);
    text-align:center;
    font:600 0.9rem/1 system-ui, sans-serif;
    text-transform:uppercase;
    background:repeating-linear-gradient(
            135deg,#ff5555 0 15px,#ff8080 15px 30px);
    color:#fff;
    opacity:.8;
    box-sizing:border-box;            /* padding/borders inside 50 px   */
}

/* hide the banner & free the space when class is absent */
body:not(.with-banner) #test-banner{ display:none; }