#text-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  z-index: 10000;
}

/* Prototypes are always hidden */
.prototype {
  display: none;
}

/* The speech that floats over a character: no panel behind it, and it still has to
   wrap instead of running off the screen. */
.text-window {
  text-align: center;
  word-break: break-word;
  max-width: 256px;
}

.text-window {
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  font-size: 10px;
  text-align: center;
}

.character-element-bar {
  margin: 0px auto;
  width: 32px;
  background-color: black;
  border: 1px solid black;
}

/* The marks under the name: the skull a character wears and the shield of its party.
   Each kind has a class of its own, so putting the real art in later is a matter of
   giving that class a background-image and dropping the placeholder colour. */
/* The marks belong to the health bar and not to the name: the party shield sits over the
   back half of the bar and the skull hangs off its end, which is where the client itself
   puts them. The row hangs below the plate instead of counting towards its height,
   because the plate is centred on the character: anything growing at the bottom would
   push the name up. */
.character-element-marks {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  margin-top: 1px;
  width: 32px;
  height: 11px;
}

/* Both marks are one strip of 11x11 cells where a cell sits at the offset of the very
   value the server sends, so drawing one is a matter of sliding the strip. The art is
   the client's own, lifted out of Tibia.pic. */
/* Eleven pixels, which is the size the art is drawn at in the client itself */
.mark {
  display: none;
  position: absolute;
  top: 0px;
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Shown only once the character actually wears one */
.mark.on {
  display: block;
}

/* Half a bar along, so it still sits on the bar */
.mark.shield {
  left: 16px;
  background-image: url("../png/shield.png");
}

/* And this one runs off the end of it */
.mark.skull {
  left: 27px;
  background-image: url("../png/skull.png");
}

/* A custom addition on top of the real 10.98 protocol: green for your own summon (or a
   party member's), red for anyone else's. Shares the skull's own spot instead of taking a
   third one of its own -- only a monster ever wears this mark, and a monster never has a
   skull to begin with, so the two never actually compete for it. Own/other are two separate
   PNGs (like the guild emblem below) rather than cells of one strip. */
.mark.summon {
  left: 27px;
}

.mark.summon.own {
  background-image: url("../png/creaturetype/summon_own.png");
}

.mark.summon.other {
  background-image: url("../png/creaturetype/summon_other.png");
}

/* Two of the ten shields are the blinking twin of another: the drawing is the same and
   only the blinking tells them apart */
.mark.mark-blink {
  animation: mark-blink 0.6s steps(1) infinite;
}

/* The guild emblem: its own row directly under the skull/shield row above, never sharing it --
   that row (.character-element-marks) is reserved for the skull and party shield alone, exactly
   as it always was. Aligned under the skull specifically (skull sits at 27px inside a 32px-wide,
   centred marks row, i.e. 11px right of center), not centred under the whole nameplate. Each
   state is a separate 11x11 png (png/emblems/) rather than cells of one strip, so a class swap
   picks the art instead of sliding a background-position. */
.guild-emblem {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 11px;
  margin-top: 13px;
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  image-rendering: pixelated;
}

.guild-emblem.on {
  display: block;
}

.guild-emblem.other {
  background-image: url("../png/emblems/emblem_other.png");
}

.guild-emblem.member {
  background-image: url("../png/emblems/emblem_member.png");
}

.guild-emblem.ally {
  background-image: url("../png/emblems/emblem_blue.png");
}

.guild-emblem.enemy {
  background-image: url("../png/emblems/emblem_red.png");
}

.guild-emblem.neutral-war {
  background-image: url("../png/emblems/emblem_green.png");
}

@keyframes mark-blink {
  50% { opacity: 0; }
}

.value-health {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(116, 255, 116, 0.45) 35%, rgba(0, 210, 0, 0.96) 65%, rgba(0, 105, 0, 1) 100%);
  height: 2px;
  width: 100%;
}

.character-element-bar.mana-bar {
  margin-top: 0px;
}

.character-element-bar.mana-bar.hidden {
  display: none;
}

.value-mana {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(100, 170, 255, 0.55) 35%, rgba(20, 110, 255, 1) 65%, rgba(0, 30, 210, 1) 100%);
  height: 2px;
  width: 100%;
}

/* The hover mark from the battle window (see BattleWindow / HighlightElement): sized in JS
   to the current sprite scale every frame, so it always traces the creature's own square */
.creature-highlight {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid red;
  pointer-events: none;
}