/* BASIC LAYOUT, CANVAS & FIELD */

body {
  background-color: #333;
}

#canvas {
  background-color: #eee;
  position: fixed;
  width: 1010px;
  height: 510px;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

#field {
  background-color: #fff;
  position: fixed;
  width: 98%;
  height: 96%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.vertical-line {
  position: fixed;
  height: 100%;
  width: 0.75px;
  background-image: linear-gradient(#444 0%, black 50%, #444 100%);
  z-index: 10;
}

.horizontal-line {
  position: fixed;
  width: 100%;
  height: 0.75px;
  background-image: linear-gradient(90deg, #444 0%, black 50%, #444 100%);
  z-index: 10;
}

/* PLAYER */

#player {
  anchor-name: --anchor-el;
  height: 4%;
  width: 2%;
  background-color: rgba(170, 210, 245, 0.9);
  position: fixed;
  z-index: 5;
}

#hpBar {
  position-anchor: --anchor-el;
  width: 4%;
  height: 0.5%;
  border: solid 1px black;
  position: absolute;
  left: calc(anchor(left) - 1%);
  bottom: calc(anchor(top) + 1%);
  background-color: white;
  overflow: hidden;
  z-index: 20;
}

#hpBarHealth {
  background-color: red;
  position: absolute;
  width: calc(100% + 1px);
  height: 100%;
}

/* PLAYER ATTACKS */

.attack {
  background-color: #f77;
  height: 4%;
  width: 2%;
  position: fixed;
  display: none;
  z-index: 5;
}

#aLeft,
#aRight {
  width: 4%;
}

#aLeft {
  transform: translateX(-100%);
}

#aRight {
  transform: translateX(50%);
}

#aUp,
#aDown {
  height: 8%;
}

#aUp {
  transform: translateY(-100%);
}

#aDown {
  transform: translateY(50%);
}

#aRound {
  display: none;
}

#aTopRight {
  display: block;
  transform: translate(-100%, -100%);
}

#aTopLeft {
  display: block;
  transform: translate(100%, -100%);
}

#aBotRight {
  display: block;
  transform: translate(100%, 100%);
}

#aBotLeft {
  display: block;
  transform: translate(-100%, 100%);
}

/* ENEMY SQUARES ACCESSORIES */

.charge {
  background-color: black;
  position: fixed;
  z-index: 15;
}

.dot {
  background-color: black;
  position: fixed;
  width: 0.8%;
  height: 1.6%;
  border-radius: 50%;
  z-index: 15;
}

.warnV {
  background-color: #777;
  position: fixed;
  width: 1%;
  height: 100%;
  top: 0px;
  opacity: 0;
}

.warnH {
  background-color: #777;
  position: fixed;
  width: 100%;
  height: 2%;
  left: 0px;
  opacity: 0;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.killV {
  background-color: black;
  position: fixed;
  width: 2%;
  height: 100%;
  top: 0px;
  opacity: 0;
}

.killH {
  background-color: black;
  position: fixed;
  width: 100%;
  height: 4%;
  left: 0px;
  opacity: 0;
}

.areaAttack {
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ENEMY SQUARES */

.square {
  position: fixed;
  width: 2%;
  height: 4%;
}

.tile {
  position: absolute;
  width: 2%;
  height: 4%;
}

.r1 {
  background-color: #f44;
}

.r2 {
  background-color: #e72;
}

.r3 {
  background-color: #ea0;
}

.b1 {
  background-color: #0af;
}

.b2 {
  background-color: #57f;
}

.B {
  background-color: black;
}

.p1 {
  background-color: #faf;
}

.p2 {
  background-color: #c5c;
}

.p3 {
  background-color: #909;
}