@import url('https://fonts.googleapis.com/css2?family=Jua&family=Outfit:wght@100..900&display=swap');

/* Variables */
:root {
  --primary: #ffffff;
  --secondary: #000;

  /* Properties */
  --border-radius: 24px;

  /* Clear Objects */
  --radius-clear: 32px;
  --bg-clear: linear-gradient(15deg, #ffffff30, #ffffff50, #ffffff30);
  --border-clear: 2px solid #ffffff50;
}

/* Essentials */
body {
  overflow: hidden;
  font-size: 16px;
  margin: 0;
  background-color: var(--primary);
}

/* Text Styles */
h1 {
  color: #fff;
  font-family: "Jua", sans-serif;
  font-size: 3.6em;
  margin: 0;
}

h2 {
  color: #fff;
  font-family: "Jua", sans-serif;
  font-size: 1.2em;
  margin: 0;
}

h5 {
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 1em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  bottom: -1.6em;
  margin: 0;
}

h6 {
  color: #fff;
  text-transform: uppercase;
  font-family: "Outfit", sans-serif;
  font-size: .6em;
  margin: 0;

  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

p {
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 1em;
  font-weight: 500;
  margin: 0;
}

hr {
  /* color: #ffffff50; */
  margin: 2.4em 0;
  border: 1px solid #ffffff50;
}

button {
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 1em;
  font-weight: 600;

  border: var(--border-clear);
  border-radius: var(--radius-clear);
  padding: 12px 24px;

  background: transparent;
  background-image: var(--bg-clear);
  backdrop-filter: blur(8px) saturate(80%); 
  
  cursor: pointer;
}

/* Containers */
#board {
  background-image: url(https://cdn3.f-cdn.com/contestentries/1437066/9304471/5bd42b344f7de_thumbCard.jpg);
  background-size: 256px;
  background-repeat: repeat;

  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  box-shadow: inset 0 0 48px 0 #00000050;

  filter: brightness(100%);
}

#monitor {
  position: absolute;
  left: 0;
  top: 0;
  
  overflow: none;

  width: 100vw;
  height: 100vh;
  z-index: -2;
}

#gameItem {
  background-color: teal;
  width: 50px;
  height: 50px;
  position: absolute;
/*   left: 100px; */  /* Uncomment if you want to set a "starting" position */
/*   top: 100px;  */  /* Uncomment if you want to set a "starting" position */
}

.walker {
  border-radius: 1em;
  position: absolute;
  width: 50px;
  height: 50px;
  border: var(--border-clear);
  background-color: hsl(116, 100%, 50%);
  z-index: 5;
}

  .tagger {
    box-shadow: 0 0 16px 0 red, inset 0 0 8px 0 white;
    border: 2px solid red;
  }

  .idle {
    animation: idle-glow infinite 5s linear;
  }

  @keyframes idle-glow {
    0% {
      box-shadow: 0 0 12px 48px #ffd44600;
    }

    50% {
      box-shadow: 0 0 12px 48px #ffd44680;
    }

    100% {
      box-shadow: 0 0 12px 48px rgba(0, 0, 0, 0);
    }
  }

.menu-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-image: url('assets/clouds/cloud-full.jpg');
  animation: background-offset linear 120s;
  box-shadow: inset 0 0 48px 16px #ffffff50;
}


.menu {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 50vw;
  max-width: 516px;

  z-index: 5;
  border-radius: var(--border-radius);
  text-align: center;
}

  #startMenu ul {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    padding-inline-start: 0;
    gap: 8px;
  }

  .player-card {
    background: var(--bg-clear);
    border: var(--border-clear);
    
    list-style: none;
    padding: 12px 16px;

    border-radius: var(--border-radius);
    height: 56px;
    /* width: 100%; */

    display: flex;
    justify-content: start;
    align-items: center;
  }

    .player-card .desc {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
    }

    .walker-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      margin-right: 16px;
      background-color: hsl(116, 100%, 50%);
      border: var(--border-clear);
      box-shadow: 0 0 8px 0 #ffffff80;
      cursor: pointer;
    }

    .player-card button {
     display: none;
      position: absolute;
      right: 8px;
      margin: 8px 0;
      font-family: "Jua", sans-serif;
      font-size: 1.6em;

      background-color: #ffdcdc;
      border: var(--border-clear);
      color: #ff6565;
      border-radius: var(--radius-clear);

      width: 48px;
      height: 48px;
      border: none;
    }

  #keyAssign {
    display: none; /* Hidden by default */
  }
    
    #keyAssign ul {
      list-style: none;
      padding-inline-start: 0;

      display: flex;
      justify-content: center;
      align-items: flex-start;
      
      gap: 8px;
    }

    #keyAssign li {
      width: 64px;
      height: 64px;

      color: #fff;
      font-weight: 600;
      font-size: 1.8em;
      border-radius: var(--radius-clear);
      background: var(--bg-clear);
      border: var(--border-clear);
      
      display: flex;
      justify-content: center;
      align-items: center;

      font-family: "Outfit", sans-serif;
      cursor: default;
    }

  .game-content {
    left: 0;
    top: 0;
    position: absolute;
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding-top: 5vh;

    box-shadow: inset 0 5vw
     10vw 2vw #ffffff3d;
    z-index: 5;
  }

/* Landscape */
#landscape {
  overflow: hidden;
}

#landscape img {
  position: absolute;
  z-index: 3;
}

/* Floating Animation */
.float-anim {
  animation: float ease-in-out infinite 5s;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-4px) rotate(1deg);
  }
  66% {
    transform: translateY(2px) rotate(-1deg);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes background-offset {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 100%;
  }
}