/* ============================================================
   otc-hud.css — HUD visual do OTClient (health circle, combat modes, states, battle)
   healthcircle/ + combatmodes/ + states/ + battle/ + creatureicons/
   ============================================================ */

/* ─────────────────────────────────── COMBAT MODES (combatmodes/) ─────── */
.combat-modes-strip {
  display: flex; gap: 2px; padding: 3px 4px;
  background: #12151a; border: 1px solid #2a2d34; border-radius: 3px;
}
.combat-mode-icon {
  width: 28px; height: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; border: 2px solid transparent;
  font-size: 16px; transition: all .12s;
}
.combat-mode-icon:hover { border-color: #d4af37; }
.combat-mode-icon.active { border-color: #d4af37; background: rgba(212,175,55,.15); }
.combat-mode-icon.pvp-dove  { color: #fff; }     /* White Dove */
.combat-mode-icon.pvp-hand  { color: #ffe680; }   /* White Hand */
.combat-mode-icon.pvp-yellow{ color: #fbbf24; }   /* Yellow Hand */
.combat-mode-icon.pvp-fist  { color: #f87171; }   /* Red Fist */

/* ─────────────────────────────────── COMBAT FIGHT MODES ─────────────── */
.fight-mode-strip {
  display: flex; gap: 2px; padding: 3px 4px;
}
.fight-mode-btn {
  width: 22px; height: 22px; cursor: pointer;
  border-radius: 3px; border: 1px solid #2a2d34;
  background: #1b1e24; display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: #666;
  transition: all .12s;
}
.fight-mode-btn:hover { border-color: #d4af37; color: #c0c0c0; }
.fight-mode-btn.active { border-color: #d4af37; background: #252820; color: #d4af37; }

/* Chase / Stand */
.chase-mode-strip {
  display: flex; gap: 2px; padding: 3px 4px;
}
.chase-mode-btn {
  width: 22px; height: 22px; cursor: pointer;
  border-radius: 3px; border: 1px solid #2a2d34;
  background: #1b1e24; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: #666;
  transition: all .12s;
}
.chase-mode-btn:hover { border-color: #d4af37; }
.chase-mode-btn.active { border-color: #d4af37; background: #252820; }

/* Safe Fight */
.safe-fight-btn {
  width: 28px; height: 28px; cursor: pointer;
  border-radius: 3px; border: 1px solid #2a2d34;
  background: #1b1e24; display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: #666;
  transition: all .12s;
}
.safe-fight-btn:hover { border-color: #d4af37; }
.safe-fight-btn.on { border-color: #4ade80; background: #1a2e1a; color: #4ade80; }

/* ─────────────────────────────────── PLAYER STATES (states/) ────────── */
.player-state-strip {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 2px 0;
}
.player-state-icon {
  width: 18px; height: 18px; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  border: 1px solid transparent;
}
.player-state-icon img {
  max-width: 16px; max-height: 16px; image-rendering: pixelated;
}
.player-state-icon .psi-timer {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 6px; background: rgba(0,0,0,.8); color: #ffe680;
  padding: 0 1px; border-radius: 1px;
}

/* ─────────────────────────────────── BATTLE LIST ICONS ──────────────── */
.battle-icon {
  width: 16px; height: 16px; display: inline-block;
  image-rendering: pixelated; vertical-align: middle;
}
.battle-icon.knight  { filter: hue-rotate(0deg); }
.battle-icon.paladin { filter: hue-rotate(45deg); }
.battle-icon.sorcerer{ filter: hue-rotate(270deg); }
.battle-icon.druid   { filter: hue-rotate(120deg); }
.battle-icon.monk    { filter: hue-rotate(200deg); }
.battle-icon.monster { filter: grayscale(1); }
.battle-icon.npc     { filter: sepia(1) brightness(.8); }

/* ─────────────────────────────────── CREATURE ICONS ─────────────────── */
.creature-icon-strip {
  display: flex; gap: 2px; flex-wrap: wrap;
}
.creature-icon {
  width: 14px; height: 14px;
  image-rendering: pixelated;
}

/* Skull icons */
.skull-icon {
  width: 14px; height: 14px; display: inline-block;
  image-rendering: pixelated; vertical-align: middle;
}
.skull-icon.yellow { color: #fbbf24; }
.skull-icon.green  { color: #4ade80; }
.skull-icon.white  { color: #fff; }
.skull-icon.red    { color: #f87171; }
.skull-icon.black  { color: #333; }
.skull-icon.orange { color: #f97316; }

/* Party shield icon */
.shield-icon {
  width: 12px; height: 12px; display: inline-block;
  image-rendering: pixelated; vertical-align: middle;
}

/* Emblem icon */
.emblem-icon {
  width: 12px; height: 12px; display: inline-block;
  image-rendering: pixelated; vertical-align: middle;
}

/* ─────────────────────────────────── HUD ROW (strips) ───────────────── */
.hud-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}

/* ─────────────────────────────────── Crosshair ─────────────────────── */
.crosshair {
  position: absolute; pointer-events: none; z-index: 100;
  width: 32px; height: 32px;
  /* Vetorial em CSS: evita request/404 e permanece nítido em qualquer DPR. */
  background:
    linear-gradient(#f4f4f4,#f4f4f4) center top/2px 10px no-repeat,
    linear-gradient(#f4f4f4,#f4f4f4) center bottom/2px 10px no-repeat,
    linear-gradient(90deg,#f4f4f4,#f4f4f4) left center/10px 2px no-repeat,
    linear-gradient(90deg,#f4f4f4,#f4f4f4) right center/10px 2px no-repeat,
    radial-gradient(circle,transparent 0 5px,#d93030 6px 7px,transparent 8px);
  filter: drop-shadow(1px 1px 0 #000);
  image-rendering: pixelated;
  transform: translate(-50%,-50%);
}