.equipment-options-wrapper {
  display: flex;
  margin: 8px;
}

.equipment-buttons {
  flex: 1 1 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 4px;
}

.equipment-buttons button {
  width: 100%;
  margin: 2px;
  height: 20px;
  /* stone tiles, the Hub look (owner 2026-10-01); an open window's button is lighter (InteractiveWindow marks it) */
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.28)), url("/png/bg3.png");
  color: #efe9da;
  text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.equipment-buttons button:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.equipment-buttons button.window-open {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.18)), url("/png/bg2.png");
}

#logout-button { color: #f0b3a6; }

.character-status {
  margin: 8px;
}

.bar {
  border: 1px solid black;
  margin: 2px;
  border-radius: 8px;
  height: 12px;
  text-align: center;
  cursor: pointer;
  background-image: url("/png/bg3.png");
  position: relative;
}

.bar:hover {
  border: 1px solid white;
}

.bar .icon {
  position: absolute;
  left: 0;
  font-size: 10px;
}

.bar .percentage {
  position: absolute;
  font-size: 10px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.character-health {
  background-color: #FF7F7F;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
}

.character-mana {
  background-color: lightblue;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
}

.equipment.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  /* relative so #blessing-indicators can overlay the top-right corner */
  position: relative;
}

.equipment-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status-bar {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 18px;
  margin-top: 4px;
  background-image: url("/png/bg3.png");
  border: 1px solid black;
}

/* Blessing indicators — Material Icons rendered inside the status
 * bar (StatusBar.__createBlessingNode), alongside conditions like
 * PZ / haste / poison. Dim by default; glow when active. Title attr
 * drives the hover tooltip on desktop; mobile gets the same text via
 * the existing condition-bubble tap behaviour on the health bar. */
.blessing-status-icon.material-icons {
  font-size: 14px;
  line-height: 16px;
  color: #777;
  cursor: help;
  user-select: none;
  margin: 0 1px;
  text-shadow: 0 0 1px #000;
  transition: color 120ms ease, text-shadow 120ms ease;
  flex: 0 0 auto;
}

/* Pilgrim icon: two states only — faded grey while 1-4/5 (uses the
 * base .blessing-status-icon color #777), pale gold + halo when the
 * player completes the full 5/5. Four-shade escalation was too easy
 * to misread at a glance; one binary "in progress vs complete" reads
 * cleaner. The per-count classes (blessing-count-1..5) still ride on
 * the element so future re-introduction stays one rule away. */
.blessing-pilgrim.blessing-count-5,
.blessing-pilgrim.full {
  color: #fff0a0;
  text-shadow: 0 0 5px rgba(255, 215, 95, 1), 0 0 1px #000;
}

.blessing-temple.active {
  color: #87c0ff;
  text-shadow: 0 0 3px rgba(135, 192, 255, 0.8), 0 0 1px #000;
}

/* Martyr's Ward (Confessor Aldric, 2026-10-05): a crimson shield with a lock, its own colour beside the gold and the blue */
.blessing-ward.active {
  color: #e8606a;
  text-shadow: 0 0 3px rgba(232, 96, 106, 0.8), 0 0 1px #000;
}

.status-bar img {
  flex: 0 0 auto;
}

/* Skull do jogador na barra de status: a folha skulls.png (5 celulas de 11x11) no tamanho em que
   aparece sobre o personagem, 1:1 (em dobro ficava enorme e serrilhada) */
.status-bar .status-skull {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin: 0 3px;
  background-image: url("/png/skulls.png");
  background-size: 55px 11px;
  background-repeat: no-repeat;
}

#head-slot {
  background-image: url("/png/head.png");
}

#armor-slot {
  background-image: url("/png/armor.png");
}

#legs-slot {
  background-image: url("/png/legs.png");
}

#backpack-slot {
  background-image: url("/png/backpack.png");
}

#boots-slot {
  background-image: url("/png/boots.png");
}

#left-slot {
  background-image: url("/png/left.png");
}

#right-slot {
  background-image: url("/png/right.png");
}

#quiver-slot {
  background-image: url("/png/quiver.png");
}

#shoulder-slot {
  background-image: url("/png/shoulder.png");
}

#ring-slot {
  background-image: url("/png/ring.png");
}

.equipment-padding {
  text-align: center;
  font-size: 10px;
  min-height: 24px;
  /* Long text (translate plugins, future labels) must never stretch the
     equipment grid: no wrapping (explicit <br> still breaks), clip the
     rest. Belt to the notranslate markers — other plugins ignore those. */
  white-space: nowrap;
  overflow: hidden;
}

/* Tutorial highlight — pulsing glow on UI elements */
@keyframes tutorial-pulse {
  0% { box-shadow: 0 0 4px 1px rgba(50, 220, 255, 0.4); }
  50% { box-shadow: 0 0 10px 3px rgba(50, 220, 255, 0.8); }
  100% { box-shadow: 0 0 4px 1px rgba(50, 220, 255, 0.4); }
}

.tutorial-highlight {
  animation: tutorial-pulse 1.2s ease-in-out infinite !important;
  position: relative;
  z-index: 10;
}
/* Health and mana (owner 2026-10-01, the Hub look): deeper bars in a dark well, red and blue with a gloss. Scoped to the
   two status bars: the skills window's progress bars share the .bar class. */
#health-bar,
#mana-bar {
  height: 15px;
  margin: 3px 2px;
  border: 1px solid rgba(0, 0, 0, 0.95);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05);
}

#health-bar:hover,
#mana-bar:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

#health-bar .character-health {
  background: linear-gradient(180deg, #ef7b6c 0%, #c8372c 55%, #a52a21 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

#mana-bar .character-mana {
  background: linear-gradient(180deg, #7fb2ff 0%, #3b6fd8 55%, #2a54b0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

#health-bar .percentage,
#mana-bar .percentage {
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  color: #ffffff;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
}