/* Portrait Phones */

@media (max-width: 576px) {


    
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        justify-content: center; /* Optional if horizontal centering is required */
        align-items: flex-start; /* Aligns items to the top */
        width: 100vw;
        height: 100vh;
        background-color: lightblue;
    }      

    .breakClass {
        display: visible;
    }

    .canvasContainerWrap {
        position: fixed; /* Fixes the wrap to the viewport */
        top: 0;
        left: 0;
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        background-color: rgb(173, 216, 230, 1); /* Semi-transparent background */
        z-index: 1; /* Background layer */
    }
    
    .canvas-container {
        position: relative; /* Positioned relative to its parent */
        z-index: 2; /* Middle layer */
        display: block;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: transparent; /* Ensure transparency */
    }
    
    
    
    
     
     .fullscreenButtonDiv {
        position: absolute;
        top: 34vh; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust for exact center */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.0); /* Optional for visibility */
        padding: 1em; /* Optional for spacing around the button */
        border-radius: 10px; /* Optional rounded corners for the container */
     }
     
     #fullscreenButton {
        width: 2em; /* Adjust button width */
        height: 2em; /* Adjust button height */
        font-size: 1.5em;
        text-align: center; /* Align text horizontally */
        line-height: 1.2; /* Adjust line spacing for text */
        background-color: rgba(0, 150, 255, 0.8); /* Button background */
        color: white;
        border: none;
        border-radius: 10px; /* Rounded corners */
        cursor: pointer;
     }
     
     #fullscreenButton:hover {
        background-color: rgba(0, 120, 220, 0.8); /* Slightly darker on hover */
     }
     
     #fullscreenButton:active {
        background-color: #0056a6; /* Darker blue when pressed */
     }
     
     #fullscreenButton:focus {
        outline: none; /* Remove focus ring */
     }
     
     :fullscreen {
        background-color: transparent !important; /* Ensure the fullscreen background is transparent */
    }
    
    .canvas-container:fullscreen {
        background-color: transparent !important; /* Ensure the container stays transparent */
    }

     #fpsDisplay {
        background-color: rgba(255, 255, 255, 0.1);
        font-size: 1.5em; /* Adjust the value to set the desired font size */
        top: 30vh;
        left: 2vw;
        position: absolute;
        width: 5em;
        border: 1px solid black;
        border-radius: 5px;
     }
     
     .versionInfo {
        position: absolute;
        width: 45px;
        height: 90px; /* Maintain the height of the div */
        top: 30.4vh; /* Vertical positioning */
        right: 5vw; /* Horizontal positioning */
        font-size: 1em; /* Font size */
        line-height: 4vw; /* Align text vertically by matching line-height to height */
        color: white; /* Text color */
        background-color: rgba(10, 155, 35, 0.5); /* Background with opacity */
        text-align: center; /* Center text horizontally */
        padding: 0; /* Remove inner padding to prevent shifting */
        border-radius: 5px; /* Rounded corners */
     }
     
     .screenSize {
         position: absolute;
         width: 30vw;
         top: 35vh;
         left: 1vw;
         font-size: 1.6em;
         font-style: bold;
         color: black;
         background-color: rgba(255, 255, 255, 0.1);
         padding: 0.34em;
         border: 1px solid black;
         border-radius: 5px;
         font-size: 1em;
  }
    
     .dpad {
        position: absolute;
        bottom: 30%;
        left: 25vw;
        transform: translateX(-50%); /* Offset for centering */
        background-color: rgba(0, 0, 0, 0.0); /* Black with 50% opacity */
        width: 50vw;
        height: 50vw;
        display: grid;
        grid-template-areas:
           ". up ."
           "left . right"
           ". down .";
        gap: 0; /* Adjust spacing between buttons */
        justify-content: center;
        align-items: center; 
     }
     
     .dpad button {
           width: 2.6em;
           height: 2.6em;
           margin: 0px;
           bottom: 0px;
           font-size: 24px;
           background-color: rgba(0, 150, 255, 0.5);
           color: white;
           border: none;
           border-radius: 10px;
           cursor: pointer;
           vertical-align: middle; /* Vertically align the buttons in the middle */
     }
     
     .actionButtonsDiv {
        position: absolute;
        bottom: 30%;
        right: -25vw;
        transform: translateX(-50%); /* Offset for centering */
        background-color: rgba(0, 0, 0, 0.0); /* Black with 50% opacity */
        width: 50vw;
        height: 50vw;
        display: grid;
        grid-template-areas:
           ". up ."
           "left . right"
           ". down ."; /* Same grid layout as dpad */
        gap: 0; /* Adjust spacing between buttons */
        justify-content: center; /* Center buttons horizontally */
        align-items: center; /* Center buttons vertically */
     }
     
     .actionButtons {
        width: 2.6em;
        height: 2.6em;
        margin: 0px;
        font-size: 24px;
        background-color: rgba(0, 150, 255, 0.5); /* Button color */
        color: white;
        border: none;
        border-radius: 50px; /* Rounded corners */
        cursor: pointer;
        vertical-align: middle; /* Align text vertically */
     }
     
     
     button.pressed {
        background-color: #0056a6;
     }
     
     button:active {
        background-color: #0056a6;  /* This code could be omitted if button.pressed is enacted properly. */
     }
     
     button:focus {
        outline: none; /* Removes the default focus ring */
     }
     
     
     .button-up {
        grid-area: up;
     }
     
     .button-left {
        grid-area: left;
     }
     
     .button-right {
        grid-area: right;
     }
     
     .button-down {
        grid-area: down;
     }
     
     .centerButtonsDiv {
        position: absolute;
        bottom: 4em; /* Adjust vertical placement */
        left: 50%;
        width: 80vw; /* Adjust width to fit content */
        height: 10%; /* Adjust height to fit content */
        transform: translateX(-50%); /* Center the buttons horizontally */
        display: grid;
        grid-template-areas: "start select"; /* Define areas for Start and Select buttons */
        grid-template-columns: auto auto; /* Adjust columns to fit content */
        gap: 0.5em; /* Space between buttons */
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.0); /* Optional background for visibility */
     }
     
     
     .centerButtonsDiv button {
        width: 5em; /* Same size as dpad buttons */
        height: 1.5em;
        font-size: 24px;
        margin: 0px;
        background-color: rgba(0, 150, 255, 0.5);
        color: white;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        vertical-align: middle; /* Align text vertically */
        text-align: center;
     }
     
     
   }

   #backgroundCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: lightblue;
      z-index: 0;
      pointer-events: none;
   }

   .canvas-container {
      position: relative;
   }

   #backgroundCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: lightblue;
      z-index: 0;
      pointer-events: none;
   }

   #gameCanvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: white;
      display: block;
   }