/* Block: battle — monster in the middle, task name and owner under it, timer above it; used with the screen block */

.battle__stage {
  position: absolute;
  top: 32px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;

  /* The stage is as wide as the screen and covers the lower menu items; let taps go through to them */
  pointer-events: none;
}

/* Full task name (the quest list may cut long names with "…") */
.battle__name {
  position: absolute;
  top: 100px;
  right: 16px;
  left: 16px;
  color: var(--color-light-gray);
  text-align: center;
  overflow-wrap: anywhere;
}

/* The party member who owns the task (F8) */
.battle__owner {
  position: absolute;
  top: 134px;
  right: 16px;
  left: 16px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: var(--color-yellow);
}

/* F9: countdown and the monster's HP, top centre between the command menu and YES / NO */
.battle__timer {
  position: absolute;
  top: 6px;
  left: 96px;
  width: 64px;
  text-align: center;
}

.battle__timer--hidden {
  display: none;
}

.battle__time {
  color: var(--color-white);
}

/* Paused, or not started yet */
.battle__time--paused {
  color: var(--color-gray);
}

.battle__hp {
  height: 6px;
  margin-top: 2px;
  border: 1px solid var(--color-white);
}

.battle__hp-fill {
  height: 100%;
  background: var(--color-yellow);
}

/* Less than a fifth of the time left */
.battle__hp-fill--low {
  background: var(--color-red);
}