/* Target devices with max width of 768px in portrait mode */

@media screen and (max-width: 1676px) {
  .mpu-ghost {
    display: none; /* Hide the MPU ad */
  }

}


@media screen and (max-width: 768px) and (orientation: portrait) {
  #game {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto; /* Allow scrolling */
  }

  
  .chevron {
    position: absolute;
    display: block;
    color: #fff;

}
.chevron.scrollup {
    top: 10px;
    animation: bounce1 1.5s infinite ease-in-out;
}  
.chevron.scrolldown {
    bottom: 20px;
    animation: bounce2 1.5s infinite ease-in-out;
} 

@keyframes bounce1 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
@keyframes bounce2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}


 

  
  #game .side,
  #scores {
    width: 91%;
    height: 100vh; /* Full screen height for each section */
  }
  #board {
    position: relative;
    width: 100vw;
    height: 95vh; /* Full screen height for each section */
    margin-bottom: 0; /* Remove bottom margin */
  }

  
  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
  }

  #alt_button {
    display: block;
    margin: 0 auto;
  }

  #canvas_wrap {
    margin-bottom: 50px; /* Ensure footer is above the fold */
  }
}

@media screen and (min-height: 740px) {
    
    #alt_button {        
        position: static;       
        transform: scale(1);
    }    
}