/* Joystick style */

#joystickContainer {
    display: none;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    width: 100%;
    height: 100%;
    user-select: none;
}

.direction-pad {
    position: relative;
    width: 40vw;
    height: 40vw;
    align-self: end;
}

.direction {
    width: 49%;
    height: 49%;
    background-color: #555;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#up {
    clip-path: polygon(
        0 50%,
        0% 0,
        100% 0%,
        100% 50%,
        50% 100%
    );
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

#down {
    clip-path: polygon(
        0 50%,
        50% 0,
        100% 50%,
        100% 100%,
        0 100%
    );
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}

#left {
  clip-path: polygon(
    50% 0,
    100% 50%,
    50% 100%, 
    0% 100%, 
    0 0%
  );
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}

#right {
    clip-path: polygon(
        50% 0,
        0 50%,
        50% 100%, 
        100% 100%, 
        100% 0
    );
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
}

.center-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 10vw;
    height: 100%;
}

.button {
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background-color: #333;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 20vh;
}

.action-buttons {
    height: 100%;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 40vw;
    height: 100%;
}

.action {
    width: 100%;
    height: 100%;
    background-color: #d9534f;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.a-button { background-color: #5bc0de; }
.b-button { background-color: #f0ad4e; }


@media (orientation: portrait) {
    #joystickContainer {
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
        width: 100%;
        height: 40vw;
        position: fixed;
        bottom: 10vh;
    }

    .direction-pad {
        height: 40vw;
    }
    
    .center-buttons {
        height: 40vw;
    }
    
    .action-buttons {
        height: 40vw;
    }
}

.pressed {
    background-color: #007bff;
}


#loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
    justify-content: center;
    align-items: center;
  }
  
  #loader {
    border: 4px solid rgba(0, 0, 0, 0);
    border-top: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  


/*

   Fiddle example for triangles 

  :root {
    --button-border: black;
    --button-border-width: 1px;
    --button-background: white;
    --button-padding: 0.85rem;
    --button-arrow-width: 1rem;
  }
  
  .buttons {
    display: flex;
    gap: 1rem;
    background-color: #eee;
    padding: 1rem;
  }
  
  button {
    background-color: var(--button-border);
    clip-path: polygon(
      calc(100% - var(--button-arrow-width)) 0,
      100% 50%,
      calc(100% - var(--button-arrow-width)) 100%, 
      0% 100%, 
      0 0%
    );
    padding: var(--button-border-width);
    border: none;
  }
  
  button div {
    background-color: var(--button-background);
    clip-path: inherit;
    padding: var(--button-padding);
    padding-right: calc(var(--button-padding) * 1.75);
  }
  
  button:hover {
    --button-border: orangered;
    --button-background: orangered;
    color: #fff;
  }
  */