* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  min-height: 100vh;
  place-items: center;
  display: grid;
  /* background: white; */
  background: #0b0f17;
  color: #e5e7eb;
}

.console-log {
  position: fixed;
  right: 10px;
  transform: translatey(10%);
  display: flex;
  gap: 12px;
  background: #1f2937;
  color: #fff;
  padding: 8px 10px;
  /* border-radius: 10px; */
  height: 410px;
  width: 150px;
}

/* .console-log.hidden {
  display: none;
} */

.text-container {
  font-size: 8px;
  margin: 1px 1px;
  padding: 5px 5px;
  font-size: 7px;
  background-color: #374151;
  height: 390px;
  width: 200px;
}
.toggle-bgm {
  /* padding: 8px 12px; */
  /* border-style: none; */
  border-radius: 10px;
  /* background: #374151; */
  background: white;
  height: 12px;
  width: 20px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  position: fixed;
  /* right: 100px; */
  top: 20px;
  right: 20px;
  transform: scale(1.8);
}

/* .controls {

  height: 100px;
  width: 240px;
  color: white;
}

.control-title {
  text-align: center;
}

.controls ol {
  margin-top: 10px;
} */

.reset-game {
  /* padding: 8px 12px; */
  /* border-style: none; */
  border-radius: 10px;
  background: #374151;
  /* color: #223553; */
  height: 12px;
  width: 20px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  position: fixed;
  /* right: 100px; */
  top: 20px;
  right: 60px;
  transform: scale(1.8);
}

.action-bar {
  position: fixed;
  bottom: 24px;
  /* right: px; */
  transform: translateX(8%) scale(1.8);
  display: flex;
  gap: 12px;
  background: #1f2937;
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  z-index: 100;
}

.action-bar.hidden {
  display: none;
}

.action-bar button {
  padding: 8px 12px;
  /* border-style: none; */
  border-radius: 10px;
  background: #374151;
  color: #fff;
  cursor: pointer;
}

.action-bar button.pressed {
  transform: scale(0.96);
  box-shadow: 0 0 0;
}

button[button-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

button[button-disabled="true"]:hover,
button[button-disabled="true"]:focus {
  outline: 2px solid #7aa2ff;
}

.buttonGlow {
  animation: buttonGlow 2s ease-in-out infinite;
}

@keyframes buttonGlow {
  0% {
    outline: 2px solid rgb(255, 255, 255);
  }
  50% {
    outline: 2px solid #444;
  }
  100% {
    outline: 2px solid rgb(255, 255, 255);
  }
}

.floating-value {
  position: absolute;
  top: -5px;
  left: 0%;
  /* transform: translateX(-33%); */
  width: 100%;
  z-index: 1;
  font-size: 8px;
  letter-spacing: 1px;
  color: black;
  text-align: center;
  color: var(--float-color, white);

  animation: floatUp 3000ms ease-out forwards;
}

@keyframes floatUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-18px);
    opacity: 0;
  }
}
/* .floating-value.hidden {
  display: none;
} */

.health-bar-container {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-45%);
  width: 90%;
  z-index: 1;
}

.health-bar-background {
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(0, 0, 0);

  border-radius: 2px;
  overflow: hidden;
}

.health-bar-fill {
  height: 100%;
  background-color: #4ade80;
}

.unit-name-health {
  position: absolute;
  /* top: 13%; */
  right: calc(100% + 8px);
  width: clamp(150px, 6vw, 240px);
  height: calc(18%);
  font-size: 11px;

  background: #000000;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
}

/* .unit-name-health.hidden {
  display: none;
} */

.unit-name {
  position: absolute;
  left: 8%;
}

.unit-class {
  position: absolute;
  left: 72%;
}

.unit-hp-text {
  position: absolute;
  top: 47%;
  left: 15%;
}

.unit-health-stat {
  position: absolute;
  top: 70%;
  left: 74%;
}

.health-container-ui {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 80%;
  height: 10%;
}

.health-background-ui {
  width: 80%;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgb(255, 255, 255);

  border-radius: 2px;
  overflow: hidden;
}

.health-fill-ui {
  height: 100%;
  width: 100%;
  background-color: #4ade80;
  /* background-color: red; */
}

/* .health-container-ui.hidden {
  display: none;
} */

.unit-name-content.hidden {
  display: none;
}

/* .health-value {
  position: absolute;
  left: 60%;
  transform: translateX(-33%);
  width: 100%;
  z-index: 4;
  font-size: 3px;
  letter-spacing: 1px;
  color: black;
  font-weight: bold;
  font-family: Helvetica, Arial; */
/* } */

.current-phase {
  position: absolute;
  top: 10%;
  right: 0px;
  border-radius: 2px;
  display: flex;
  z-index: 11;
  height: 35px;
  width: 120px;
  text-align: center;
  /* padding: 0 20px; */
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #07688f, #1e068b);
  /* background: linear-gradient(to right, rgb(238, 99, 99), rgb(68, 0, 0)); */
  opacity: 0.85;
  pointer-events: none;
}

.current-phase.hidden {
  display: none;
}

.current-phase.animate {
  animation: slideInOut 2000ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes slideInOut {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  15% {
    transform: translateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Menu */
.start-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  position: relative;
  height: 408px;
  width: 408px;
  z-index: 10;
  color: #ffffff;
  letter-spacing: 2px;
  word-spacing: 2px;
  gap: 6px;
  border: 2px solid #444;
}

.start-cover h1 {
  font-size: 40px;
  margin-bottom: 50px;
}

.start-cover button {
  padding: 8px 12px;
  font-size: 20px;
  /* border-style: none; */
  border-radius: 0px;
  background: #ffffff;
  height: 50px;
  width: 200px;
  color: #636363;
  cursor: pointer;
  font-weight: 300;
}

.start-cover button.pressed {
  transform: scale(0.96);
  box-shadow: 0 0 0;
}

.start-cover.hidden {
  display: none;
}

/* Controls */
.controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  position: relative;
  height: 408px;
  width: 408px;
  z-index: 10;
  color: #ffffff;
  letter-spacing: 2px;
  word-spacing: 2px;
  gap: 6px;
}

.controls.hidden {
  display: none;
}

.controls li {
  list-style-type: none;
}

/* Credits */
.credits {
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  position: relative;
  height: 408px;
  width: 408px;
  z-index: 10;
  color: #ffffff;
  letter-spacing: 2px;
  word-spacing: 2px;
  gap: 6px;
}

.credits.hidden {
  display: none;
}

.game-over-cover {
  display: grid;
  place-items: center;
  text-align: middle;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  height: 408px;
  width: 408px;
  z-index: 9;
  color: #ffffff;
  letter-spacing: 2px;
  word-spacing: 2px;
}

.game-over-cover.hidden {
  display: none;
}

.board {
  display: grid;
  grid-template-columns: repeat(12, 32px);
  grid-auto-rows: 32px;
  gap: 2px;
  /* width: 520px; */

  padding: 2px;
  background: transparent;

  outline: none;
  z-index: 1;
  position: absolute;
}
/* individual cells */
.tile {
  background: #fff4dc;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  user-select: none;
  position: relative;
  background: transparent;
}

.alt {
  background: #ffe5aa;
  background: transparent;
}

.hover {
  /* border: 1px solid rgb(31, 10, 223); */
  z-index: 4;
}

.tile.hover::after {
  content: "";
  position: absolute;
  inset: 0;
  /* box-sizing: border-box; */
  border: 1px solid rgb(31, 10, 223);
  z-index: 4;
  animation: pulse 1s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.attack-border {
  border: 1px solid red;
  z-index: 4;
}

.attack-confirm {
  background: rgb(255, 98, 98, 0.6);
  z-index: 4;
  animation: attackPulse 2s ease-in-out infinite;
}

.attack-confirm.selected {
  animation: none;
}

@keyframes attackPulse {
  0% {
    background: rgb(255, 98, 98, 0.6);
  }
  50% {
    background: transparent;
  }
  100% {
    background: rgb(255, 98, 98, 0.6);
  }
}

/* The frame */
.player {
  /* Positions relative to the nearest positioned ancestor */
  position: absolute;
  /* Sets all four inset offsets to 0- */
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
  transform: scale(0.8, 1.5);
  transform-origin: center bottom;
}

.player.knight_1::before {
  content: "";
  /* Size of ONE frame */
  width: 120px;
  height: 140%;

  background-repeat: no-repeat;

  background-size: 400% 100%;
  background-position: 0 0;

  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  transform: translate(-12px, -8px);
  /* transform: translate; */
  /* background-image: var(--sprite-url);

  animation: knightIdle 1.3s steps(1, end) infinite; */
}

.player.knight_1.idle::before {
  background-image: url("assets/knight_1/Idle.png");

  animation: knightIdle 1.3s steps(1, end) infinite;
}

.player.knight_1.attack::before {
  background-image: url("assets/knight_1/attack.png");
  /* background-size: 400% 100%; */
  animation: knightAttack 0.6s steps(1, end) forwards;
}

.player.knight_1.hurt::before {
  background-image: url("assets/knight_1/hurt.png");
  animation: knightHurt 0.5s steps(1, end) forwards;
  background-size: 200% 100%;
}

.player.knight_1.dead::before {
  background-image: url("assets/knight_1/dead.png");
  animation: knightDead 1s steps(1, end) forwards;
  background-size: 600% 100%;
}

.player.knight_1.run::before {
  background-image: url("assets/knight_1/Run.png");
  animation: knightRun 0.7s steps(1, end) infinite;
  background-size: 700% 100%;
}

.player.knight_2::before {
  content: "";
  /* Size of ONE frame */
  width: 120px;
  height: 140%;

  background-repeat: no-repeat;

  background-size: 400% 100%;
  background-position: 0 0;

  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  transform: translate(-12px, -8px);
  /* transform: translate; */
  /* background-image: var(--sprite-url);

  animation: knightIdle 1.3s steps(1, end) infinite; */
}

.player.knight_2.idle::before {
  background-image: url("assets/knight_2/idle.png");

  animation: knightIdle 1.3s steps(1, end) infinite;
}

.player.knight_2.attack::before {
  background-image: url("assets/knight_2/attack.png");
  /* background-size: 400% 100%; */
  animation: knightAttack 0.6s steps(1, end) forwards;
}

.player.knight_2.hurt::before {
  background-image: url("assets/knight_2/hurt.png");
  animation: knightHurt 0.5s steps(1, end) forwards;
  background-size: 200% 100%;
}

.player.knight_2.dead::before {
  background-image: url("assets/knight_2/dead.png");
  animation: knightDead 1s steps(1, end) forwards;
  background-size: 600% 100%;
}

.player.knight_2.run::before {
  background-image: url("assets/knight_2/Run.png");
  animation: knightRun 0.7s steps(1, end) infinite;
  background-size: 700% 100%;
}

@keyframes knightIdle {
  0% {
    background-position-x: 0px;
  }
  25% {
    background-position-x: -120px;
  }
  50% {
    background-position-x: -240px;
  }
  75% {
    background-position-x: -360px;
  }
  100% {
    background-position-x: 0px;
  }
}

@keyframes knightAttack {
  0% {
    background-position-x: -10px;
  }
  25% {
    background-position-x: -130px;
  }
  50% {
    background-position-x: -250px;
  }
  75% {
    background-position-x: -370px;
  }
  100% {
    background-position-x: -10px;
  }
}

@keyframes knightHurt {
  0% {
    background-position-x: -10px;
  }
  50% {
    background-position-x: -130px;
  }
}

@keyframes knightDead {
  0% {
    background-position-x: 0px;
  }
  20% {
    background-position-x: -120px;
  }
  40% {
    background-position-x: -250px;
  }
  60% {
    background-position-x: -370px;
  }
  80% {
    background-position-x: -490px;
  }

  100% {
    background-position-x: -622px;
  }
}

@keyframes knightRun {
  0% {
    background-position-x: 0px;
  }
  20% {
    background-position-x: -110px;
  }
  40% {
    background-position-x: -223px;
  }
  60% {
    background-position-x: -350px;
  }
  80% {
    background-position-x: -480px;
  }
  100% {
    background-position-x: 0px;
  }
}

.player.wizard_1::before {
  content: "";
  /* Size of ONE frame */
  width: 120px;
  height: 140%;

  background-repeat: no-repeat;

  background-position: 0 0;

  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  transform: translate(-30px, -8px);
}

.player.wizard_1.idle::before {
  background-size: 700% 100%;
  background-image: url("assets/wizard_1/idle.png");
  animation: wizardIdle 2s steps(1, end) infinite;
}

/* .player.wizard_1.attack::before {
  background-size: 400% 100%;
  background-image: url("assets/wizard_1/attack.png");
  animation: wizardAttack 0.5s steps(1, end) forwards;
} */

.player.wizard_1.attack::before {
  background-size: 800% 100%;
  background-image: url("assets/wizard_1/fireball.png");
  animation: fireball 0.6s steps(1, end) forwards;
}

.player.wizard_1.hurt::before {
  background-size: 300% 100%;
  background-image: url("assets/wizard_1/hurt.png");
  animation: wizardHurt 0.5s steps(1, end) forwards;
}

.player.wizard_1.dead::before {
  background-size: 600% 100%;
  background-image: url("assets/wizard_1/dead.png");
  animation: wizardDead 1s steps(1, end) forwards;
}

.player.wizard_1.run::before {
  background-size: 800% 100%;
  background-image: url("assets/wizard_1/run.png");
  animation: wizardRun 1s steps(1, end) infinite;
}
.player.wizard_1.fireball::before {
  background-size: 800% 100%;
  background-image: url("assets/wizard_1/fireball.png");
  animation: fireball 0.6s steps(1, end) forwards;
}

@keyframes wizardIdle {
  0% {
    background-position-x: 0px;
  }
  14% {
    background-position-x: -120px;
  }
  28% {
    background-position-x: -240px;
  }
  42% {
    background-position-x: -360px;
  }
  56% {
    background-position-x: -480px;
  }
  70% {
    background-position-x: -600px;
  }
  84% {
    background-position-x: -720px;
  }
  100% {
    background-position-x: 0px;
  }
}

@keyframes wizardAttack {
  0% {
    background-position-x: -7px;
  }
  25% {
    background-position-x: -128px;
  }
  50% {
    background-position-x: -248px;
  }
  75% {
    background-position-x: -368px;
  }
  100% {
    background-position-x: -7px;
  }
}

@keyframes wizardHurt {
  0% {
    background-position-x: 2px;
  }
  33% {
    background-position-x: -118px;
  }
  67% {
    background-position-x: -238px;
  }
  100% {
    background-position-x: 2px;
  }
}

@keyframes wizardDead {
  0% {
    background-position-x: 4px;
  }
  16.7% {
    background-position-x: -118px;
  }
  33.3% {
    background-position-x: -236px;
  }
  50% {
    background-position-x: -360px;
  }
  66.7% {
    background-position-x: -480px;
  }
  83.4% {
    background-position-x: -600px;
  }
  100% {
    background-position-x: -600px;
  }
}

@keyframes wizardRun {
  0% {
    background-position-x: 4px;
  }
  12.5% {
    background-position-x: -116px;
  }
  25% {
    background-position-x: -238px;
  }
  37.5% {
    background-position-x: -356px;
  }
  50% {
    background-position-x: -476px;
  }
  62.5% {
    background-position-x: -598px;
  }
  75% {
    background-position-x: -718px;
  }
  87.5% {
    background-position-x: -838px;
  }
  100% {
    background-position-x: 6px;
  }
}

@keyframes fireball {
  0% {
    background-position-x: 0px;
  }
  12.5% {
    background-position-x: -120px;
  }
  25% {
    background-position-x: -240px;
  }
  37.5% {
    background-position-x: -360px;
  }
  50% {
    background-position-x: -480px;
  }
  62.5% {
    background-position-x: -600px;
  }
  75% {
    background-position-x: -720px;
  }
  87.5% {
    background-position-x: -840px;
  }
  100% {
    background-position-x: 0px;
  }
}

.player.wizard_2::before {
  content: "";
  /* Size of ONE frame */
  width: 120px;
  height: 140%;
  background-repeat: no-repeat;

  background-position: 0 0;

  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35));
  transform: translate(-30px, -8px);
}

.player.wizard_2.idle::before {
  background-size: 800% 100%;
  background-image: url("assets/wizard_2/idle.png");
  animation: wizardIdle2 1.2s steps(1, end) infinite;
}

.player.wizard_2.attack::before {
  background-size: 700% 100%;
  background-image: url("assets/wizard_2/attack.png");
  animation: wizardAttack2 0.6s steps(1, end) forwards;
}

.player.wizard_2.hurt::before {
  background-size: 400% 100%;
  background-image: url("assets/wizard_2/hurt.png");
  animation: wizardHurt2 0.5s steps(1, end) forwards;
}

.player.wizard_2.dead::before {
  background-size: 400% 100%;
  background-image: url("assets/wizard_2/dead.png");
  animation: wizardDead2 1s steps(1, end) forwards;
}

.player.wizard_2.run::before {
  background-size: 800% 100%;
  background-image: url("assets/wizard_2/run.png");
  animation: wizardRun2 1s steps(1, end) infinite;
}

@keyframes wizardIdle2 {
  0% {
    background-position-x: -8px;
  }
  12.5% {
    background-position-x: -128px;
  }
  25% {
    background-position-x: -248px;
  }
  37.5% {
    background-position-x: -368px;
  }
  50% {
    background-position-x: -488px;
  }
  62.5% {
    background-position-x: -608px;
  }
  75% {
    background-position-x: -728px;
  }
  87.5% {
    background-position-x: -848px;
  }
  100% {
    background-position-x: -8;
  }
}

@keyframes wizardAttack2 {
  0% {
    background-position-x: 0px;
  }
  14.2% {
    background-position-x: -120px;
  }
  28.4% {
    background-position-x: -240px;
  }
  42.6% {
    background-position-x: -360px;
  }
  56.8% {
    background-position-x: -480px;
  }
  80% {
    background-position-x: -600px;
  }
  100% {
    background-position-x: -720px;
  }
}

@keyframes wizardHurt2 {
  0% {
    background-position-x: -8px;
  }
  25% {
    background-position-x: -128px;
  }
  50% {
    background-position-x: -248px;
  }
  75% {
    background-position-x: -368px;
  }
  100% {
    background-position-x: -8px;
  }
}

@keyframes wizardDead2 {
  0% {
    background-position-x: 0px;
  }
  25% {
    background-position-x: -120px;
  }
  50% {
    background-position-x: -250px;
  }
  75% {
    background-position-x: -370px;
  }
  100% {
    background-position-x: -370px;
  }
}

@keyframes wizardRun2 {
  0% {
    background-position-x: 4px;
  }
  12.5% {
    background-position-x: -116px;
  }
  25% {
    background-position-x: -240px;
  }
  37.5% {
    background-position-x: -355px;
  }
  50% {
    background-position-x: -474px;
  }
  62.5% {
    background-position-x: -596px;
  }
  75% {
    background-position-x: -716px;
  }
  87.5% {
    background-position-x: -838px;
  }
  100% {
    background-position-x: -4px;
  }
}

.player.grayed::before {
  filter: grayScale(100%);
}

.highlight {
  background-color: rgb(190, 255, 190, 0.6);
}

.content {
  display: grid;
  /* grid-template-columns: auto; */
  /* grid-template-rows: 4fr 1fr; */
  /* flex-direction: row; */
  /* align-items: flex-start; */
  /* gap: 16px; */
  place-items: center;
}

.game-shell {
  position: relative;
  display: inline-block;
  transform: scale(1.8);
  /* transform-origin: center; */
}

.stage {
  position: relative;
  width: 408px;
  height: 408px;
  image-rendering: pixelated;
  background: url("maps/Fire-Emblem-Map.png") top left / 100% 100%;
  /* overflow: hidden; */
  /* transform: scale(1.8); */
}

.unit-name-health li {
  list-style: none;
}

.unit-stats {
  position: absolute;
  top: 19%;
  right: calc(100% + 8px);
  width: clamp(150px, 6vw, 240px);
  height: calc(24% + 1px);
  font-size: 11px;

  background: #000000;
  color: #ffffff;
  border: 2px solid #444;
  padding: 10px;
}

.unit-stats li {
  list-style: none;
}

.stat-list {
  display: flex;
}

.stat-list.hidden {
  display: none;
}

.normal-stat-list {
  flex: 1;
  font-size: 10px;
  line-height: 11.3px;
}

.combat-stat-list {
  flex: 1;
  line-height: 23px;
}

.skill-list {
  position: absolute;
  top: calc(44% + 2px);
  right: calc(100% + 8px);
  width: clamp(150px, 6vw, 240px);
  height: 27%;

  font-size: 10px;

  background: #000000;
  color: #ffffff;
  border: 2px solid #444;
  padding: 10px;
  margin-bottom: 2px;

  /* align-items: left; */
}

.skill-list button {
  /* font-size: 11px; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
  /* text-align: left; */
  /* align-items: left; */
  padding-left: 1px;
  padding-right: 1px;
}

.skill-list .skill-name {
  font-size: 11px;
}

.skill-list .skill-uses {
  font-size: 9px;
  font-weight: bold;
  /* padding-top: 1px; */
  padding-top: 1.5px;
}

.item-list {
  position: absolute;
  top: calc(73% + 1px);
  right: calc(100% + 8px);
  width: clamp(150px, 6vw, 240px);
  height: 27%;
  /* font-size: 10px; */

  background: #000000;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
}

.item-list button {
  /* font-size: 11px; */
  width: 100%;
  display: flex;
  margin-bottom: 2px;
  justify-content: space-between;
  padding-left: 1px;
  padding-right: 1px;
}

.item-list .item-text {
  font-size: 11px;
  /* margin-left: auto; */
  /* width: 100%; */
  /* align-items: left; */
}

.item-list .equip-indicator {
  font-size: 9px;
  /* color: rgb(0, 0, 0); */
  font-weight: bold;
  /* margin-left: auto; */
  padding-top: 1.3px;

  /* width: 100%; */
  /* align-items: left; */
}

.glow {
  animation: glowAnim 2s ease-in-out infinite;
}

@keyframes glowAnim {
  0% {
    border: 2px solid rgb(255, 255, 255);
  }
  50% {
    border: 2px solid #444;
  }
  100% {
    border: 2px solid rgb(255, 255, 255);
  }
}

.combat-log {
  position: absolute;
  top: -1px;
  right: calc(-39% + 1px);
  width: clamp(150px, 6vw, 240px);
  height: calc(87% + 1px);

  font-size: 9px;
  line-height: 12px;

  background: #000000;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.combat-log::-webkit-scrollbar {
  width: 10px;
}

.combat-log::-webkit-scrollbar-track {
  background: #c5c5c5;
  border-radius: 10px;
}

.combat-log::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid #020202; /* creates padding effect */
}

/* Hover effect */
.combat-log::-webkit-scrollbar-thumb:hover {
  background: #6f6f6f;
}

.combat-log li {
  list-style: none;
}

.terrain-stat {
  position: absolute;
  top: calc(88.17% + 2px);
  right: calc(-39% + 1px);
  width: clamp(150px, 6vw, 240px);
  height: 11.5%;
  /* font-size: 10px; */

  background: #000000;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
}

.character-image {
  position: absolute;
  top: calc(48% + 4px);
  left: calc(69% - 1.5px);
  image-rendering: pixelated;

  /* background-image: url("assets/queen/Talk.png"); */
  /* width: clamp(150px, 6vw, 240px); */
  /* height: 20%; */
  /* width: 100%; */
  /* font-size: 10px; */

  /* background: #111; */
  color: #ffffff;
  /* border: 2px solid #444; */
  /* padding: 12px; */
  z-index: 99;
  opacity: 0.5;
  transform: translateX(-20px);
  transition:
    transform 100ms linear,
    opacity 100ms linear;
}

.character-image.hidden {
  display: none;
}

.character-image.animation {
  opacity: 1;
  transform: translateX(0);
}

/* .character-image.fade-out {
  opacity: 0;
} */

.item-image {
  position: absolute;
  top: var(--top);
  left: var(--left);
  height: var(--height);

  image-rendering: pixelated;
  /* background-image: url("assets/queen/Talk.png"); */
  /* width: clamp(150px, 6vw, 240px); */
  /* height: 20%; */
  /* width: 100%; */
  /* font-size: 10px; */

  /* background: #111; */
  color: #ffffff;
  /* border: 2px solid #444; */
  /* padding: 12px; */
  z-index: 100;
}

.item-image.hidden {
  display: none;
}

.speaker-name {
  position: absolute;
  top: calc(75% + 3px);

  /* width: clamp(150px, 6vw, 240px); */
  height: 5%;
  width: 20%;
  text-align: center;
  /* font-size: 10px; */

  background: #111;
  color: #ffffff;
  border: 2px solid #444;
  /* padding: 12px; */
  z-index: 99;
}

.speaker-name.hidden {
  display: none;
}

.description {
  position: absolute;
  top: calc(80% + 2px);

  /* width: clamp(150px, 6vw, 240px); */
  height: 20%;
  width: 100%;
  font-size: 14px;
  text-align: left;
  background: #111;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
  z-index: 99;
}

.description.hidden {
  display: none;
}

.description-box {
  position: absolute;
  top: calc(80% + 2px);

  /* width: clamp(150px, 6vw, 240px); */
  height: 20%;
  width: 100%;
  /* font-size: 10px; */
  text-align: left;
  background: #111;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
  z-index: 11;
}

.description-box.hidden {
  display: none;
}

.win-condition {
  position: absolute;
  top: calc(20% + 2px);

  width: clamp(150px, 6vw, 240px);
  text-align: center;
  height: 20%;
  width: 100%;
  /* font-size: 10px; */

  background: #111;
  color: #ffffff;
  border: 2px solid #444;
  padding: 12px;
  z-index: 99;
}

.win-condition.hidden {
  display: none;
}

.heading {
  display: flex;
  gap: 12px;
  background: #374151;
  color: white;
  padding: 8px 10px;
  /* border-radius: 10px; */
  position: static;
  width: 400px;
  height: 30px;
  justify-content: space-between;
}

.phase {
  color: white;
}

.turn {
  position: absolute;
  top: 2%;
  right: -80px;
  border-radius: 2px;
  display: flex;
  z-index: 11;
  /* height: px; */
  width: 120px;
  text-align: center;
  /* padding: 0 20px; */
  font-size: 10px;
  align-items: center;
  /* justify-content: center; */
  pointer-events: none;
  color: rgb(0, 0, 0);
  font-weight: 400;
}