/* ------------------------------------------------------------- */
.game-background {    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('/images/flightpath/background.png');
}
/* Landscape orientation */
@media screen and (orientation: landscape) {
    .game-background {
        width: 100%;
        height: 60vh;
    }
}
/* Portrait orientation */
@media screen and (orientation: portrait) {
    .game-background {
        width: 100vw; /* Or adjust width as needed */
        height: 70vh;
    }
}
/* ------------------------------------------------------------- */

.game-background .top-fader {
  height: 60px; /* Fixed height */
  background: linear-gradient(var(--bs-dark), transparent);
}

.game-background .bottom-fader {
  height: 60px; /* Fixed height */
  background: linear-gradient(transparent, var(--bs-dark));
}

/* ------------------------------------------------------------- */
.game-background #flightpath-detailButton {
    position: absolute;

    background-color: #04AA6D;
    border: 2px white solid;
    color: white;
    border-radius: 5px;
    font-size: 1.25rem;
    height: 3.0rem;    
    width: 10rem;
}

@media screen and (orientation: portrait) {
    .game-background #flightpath-detailButton {
      transform: translate(1rem, 3rem);
    }
}

@media screen and (orientation: landscape) {
    .game-background #flightpath-detailButton {
      transform: translate(5rem, 6rem);
    }
}
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- */
.game-background #flightpath-childRight {
    background-image: url('/images/flightpath/characters.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    right: 2%;
    transform: translateY(-10%);
}

@media screen and (orientation: portrait) {
    .game-background #flightpath-childRight {
      width: 70%;
      height: 80%;
    }
}

@media screen and (orientation: landscape) {
    .game-background #flightpath-childRight {
      width: 40%;
      height: 80%;
    }
}
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- */
.game-background #flightpath-childLeft {
    width: 50%;
    height: 60%;

    background-image: url('/images/flightpath/ship.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    right: 20%;
    transform: translateY(5%);
}

@media screen and (orientation: portrait) {
    .game-background #flightpath-childLeft {
      display: none;
    }
}

@media screen and (orientation: landscape) {
    .game-background #flightpath-childLeft {
      display: block;
    }
}
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- */
.game-background #flightpath-childBottom {
    background-image: url('/images/flightpath/title.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    right: 5%;
    transform: translateY(220%);
}

@media screen and (orientation: portrait) {
    .game-background #flightpath-childBottom {
      width: 95%;
      height: 20%;
    }
}

@media screen and (orientation: landscape) {
    .game-background #flightpath-childBottom {
      width: 50%;
      height: 20%;
    }
}
/* ------------------------------------------------------------- */