@font-face {
  font-family: '04B19';
  src: url('../assets/04B_19__.TTF');
}

#credit {
  /* shrink-wrap the anchor: a full-width link makes the glasses browser's
     link decoration span the whole screen as lines above/below the text */
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  color: #000;
  font-family: '04B19', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-decoration: none;
  z-index: 10;
}

/*
Scenery scrolling runs on ::before strips animated with transform, so it
stays on the compositor thread — background-position animations forced a
full main-thread repaint every frame, which hitches on low-power devices.
Each strip is one tile wider than its container and slides left by exactly
one tile width before looping.
*/

@keyframes scrollSky {
    to { transform: translate3d(-276px, 0, 0); }
}

@keyframes scrollLand {
    to { transform: translate3d(-336px, 0, 0); }
}

@keyframes scrollCeiling {
    to { transform: translate3d(-64px, 0, 0); }
}

@keyframes animBird {
    from { background-position: 0px 0px; }
    to   { background-position: 0px -96px; }
}

*,
*:before,
*:after {
    /* border box */
    box-sizing: border-box;
    /* select disable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html,
body {
    width: 600px;
    height: 600px;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    background-color: #000000;
}
.supercenter .cover{
    display: none;
}

.supercenter{
    display: flex;
    align-items: center;
    justify-content: center;
}

#gamecontainer {
    width: 600px;
    height: 600px;
    min-height: 600px;
}

/*
Screen - Game
*/

#gamescreen {
    position: absolute;
    width: 600px;
    height: 600px;
    overflow: hidden;
}

#sky {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80%;
    background-color: #4ec0ca;
}

#sky::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 276px);
    background-image: url('../assets/sky.png');
    background-repeat: repeat-x;
    background-position: 0px 100%;
    animation: scrollSky 7s linear infinite;
    will-change: transform;
}

#flyarea {
    position: absolute;
    bottom: 0;
    height: 480px;
    width: 100%;
}

#ceiling {
    position: absolute;
    top: -18px;
    height: 18px;
    width: 100%;
}

#ceiling::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 64px);
    background-image: url('../assets/ceiling.png');
    background-repeat: repeat-x;
    animation: scrollCeiling 481ms linear infinite;
    will-change: transform;
}

#land {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background-color: #ded895;
}

#land::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 336px);
    background-image: url('../assets/land.png');
    background-repeat: repeat-x;
    background-position: 0px 0px;
    animation: scrollLand 2516ms linear infinite;
    will-change: transform;
}

/* freeze the scenery when the bird dies */
.paused #sky::before,
.paused #land::before,
.paused #ceiling::before,
.paused .bird {
    animation-play-state: paused;
}

#bigscore {
    position: absolute;
    top: 23px;
    left: 274px;
    z-index: 100;
}

#bigscore img {
    display: inline-block;
    padding: 1px;
}

#splash {
    position: absolute;
    opacity: 0;
    top: 86px;
    left: 206px;
    width: 188px;
    height: 170px;
    background-image: url('../assets/splash.png');
    background-repeat: no-repeat;
}

#scoreboard {
    position: absolute;
    display: none;
    opacity: 0;
    top: 73px;
    left: 182px;
    width: 236px;
    height: 280px;
    background-image: url('../assets/scoreboard.png');
    background-repeat: no-repeat;
    z-index: 1000;
}

#medal {
    position: absolute;
    opacity: 0;
    top: 114px;
    left: 32px;
    width: 44px;
    height: 44px;
}

#currentscore {
    position: absolute;
    top: 105px;
    left: 107px;
    width: 104px;
    height: 14px;
    text-align: right;
}

#currentscore img {
    padding-left: 2px;
}

#highscore {
    position: absolute;
    top: 147px;
    left: 107px;
    width: 104px;
    height: 14px;
    text-align: right;
}

#highscore img {
    padding-left: 2px;
}

#replay {
    position: absolute;
    opacity: 0;
    top: 205px;
    left: 61px;
    height: 115px;
    width: 70px;
    cursor: pointer;
}

.boundingbox {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 1px solid red;
}

#player {
    left: 110px;
    top: 0; /* vertical position is applied via transform in updatePlayer() */
}

.bird {
    position: absolute;
    width: 34px;
    height: 24px;
    background-image: url('../assets/bird.png');
    animation: animBird 300ms steps(4) infinite;
    will-change: transform;
}

.pipe {
    position: absolute;
    left: 0;
    width: 52px;
    height: 100%;
    z-index: 10;
    will-change: transform;
}

.pipe_upper {
    position: absolute;
    top: 0;
    width: 52px;
    background-image: url('../assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}

.pipe_upper:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 52px;
    height: 26px;
    background-image: url('../assets/pipe-down.png');
}

.pipe_lower {
    position: absolute;
    bottom: 0;
    width: 52px;
    background-image: url('../assets/pipe.png');
    background-repeat: repeat-y;
    background-position: center;
}

.pipe_lower:after {
    content: "";
    position: absolute;
    top: 0;
    width: 52px;
    height: 26px;
    background-image: url('../assets/pipe-up.png');
}

.header {
  color: wheat;
  font-size: 1.0rem;
  text-align: center;
}

#footer {
    padding:5px;
    bottom: 3px;
    left: 3px;
    color: wheat;
    font-size: .9rem;

    text-align: center;
}

#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
    padding: 2px;
    text-decoration: none;
    color: wheat;
}