@font-face {
  font-family: "ARCADECLASSIC";
  src: url("../fonts/ARCADECLASSIC.TTF") format("truetype");
  font-weight: normal;
}

/* grow */
@keyframes grow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* shrink */
@keyframes shrink {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
/* erm this is more of a transition... */
#game .arena-fill {
  z-index: 1000;
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

#game .arena-info {
  position: absolute;
  width: 625px;
  height: 125px;
  background: rgba(0, 0, 0, 0.4);
  font-family: "ARCADECLASSIC";
  color: white;
  font-size: 18px;
  padding-bottom: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}

#game .battle-bar {
  background-color: white;
  height: 157px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 4px solid black;
  display: flex;
}

#game .battle-bar h1,
#game .battle-bar button,
#game .battle-bar p {
  margin: 0px;
  font-family: "ARCADECLASSIC";
}

#game .battle-info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  color: black;
  padding: 12px;
  font-family: "ARCADECLASSIC";
  font-size: 24px;
  display: none;
  cursor: pointer;
}

#game .health-bar-container {
  background-color: white;
  color: black;
  width: 300px;
  position: absolute;
  border: 4px black solid;
  padding: 12px;
}
#game .health-bar-container h1 {
  margin: 0px;
  font-family: "ARCADECLASSIC";
}

#game .health-bar {
  height: 5px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

#game .health-bar-bg {
  height: 5px;
  background-color: lightgrey;
  margin-top: 5px;
}

#game .enemy-pos {
  top: 50px;
  left: 700px;
}

#game .player-pos {
  top: 225px;
  left: 20px;
}

#game .battle-bar button {
  border: 0;
  cursor: pointer;
  font-size: 18px;
}

#game .battle-bar button:hover {
  background-color: rgb(211, 211, 211);
}

#game .battle-bar button:active {
  background-color: rgb(195, 195, 195);
}

#game .bb-buttons-container {
  width: 66%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#game .bb-text-style {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33%;
  border-left: 4px solid black;
  color: black;
}

#game .bb-text-style h1 {
  margin-left: 15px;
  font-size: 30px;
}

#game .disabled {
  display: none;
}

#game .box {
  animation: grow 1500ms ease-in-out forwards;
}

#game .box-end {
  animation: shrink 1500ms ease-in-out forwards;
}

#game .game-title-screen {
  font-family: "ARCADECLASSIC";
  position: absolute;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: white;
  margin-left: -88px;
  width: 1024px;
  height: 580px;
}
#game .instructions-image {
  font-family: "ARCADECLASSIC";
  position: absolute;
  background: rgba(0, 0, 0, 0.95);
  z-index: 12;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: white;
  margin-left: -88px;
  width: 1024px;
  height: 580px;
}

#game .game-title-screen button {
  font-size: 24px;
  border: 0px;
  padding: 5px 20px;
}


.game-wrapper {
  display: flex;
  justify-content: flex-start; /* push everything left */
  align-items: flex-start;
  gap: 20px;
}

.game-left {
  display: flex;
  flex-direction: column; /* stack title + game */
  align-items: flex-start;
}