/* Combat feature: self buff/debuff bar and the damage vignette. */

/* The HUD's plain status icons are replaced by the timed buff bar (only once it mounted). */
#hud-self .hud-selffx.cb-replaced {
  display: none !important;
}

.cb-buffbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 30px;
  pointer-events: none;
}

.cb-buffbar.cb-floating {
  position: fixed;
  left: 50%;
  bottom: 150px;
  z-index: 21;
  transform: translateX(-50%);
}

.cb-buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 330px;
  pointer-events: auto;
}

.cb-buffs.cb-pos {
  justify-content: flex-start;
}

.cb-buffs:empty {
  display: none;
}

.cb-buff {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  background: #0b0806;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(0, 0, 0, 0.6);
  animation: cb-pop 0.22s ease-out;
}

.cb-buff::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.cb-buff.pos::after {
  box-shadow: inset 0 0 0 2px var(--gold, #d9b45a);
}

.cb-buff.neg::after {
  box-shadow: inset 0 0 0 2px #d8453a;
}

.cb-buff.cc::after {
  box-shadow: inset 0 0 0 2px #ff5a4a, inset 0 0 6px rgba(255, 60, 40, 0.6);
}

.cb-buff.food::after {
  box-shadow: inset 0 0 0 1px #c08040;
}

.cb-buff canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.cb-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cb-time,
.cb-amt {
  position: absolute;
  font-size: 10px;
  font-weight: bold;
  line-height: 11px;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 1px #000;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cb-time {
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.cb-amt {
  top: 1px;
  right: 2px;
  color: #bfe6ff;
}

.cb-buff.soon {
  animation: cb-blink 0.5s ease-in-out infinite alternate;
}

@keyframes cb-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  70% {
    transform: scale(1.12);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes cb-blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.45;
  }
}

/* Red screen-edge flash when the player takes damage (intensity scales with the hit). */
.cb-hurt {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(160, 10, 0, 0.55) 100%);
}

.cb-hurt.on {
  animation: cb-hurt 0.55s ease-out;
}

@keyframes cb-hurt {
  0% {
    opacity: var(--cb-hurt, 0.5);
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .cb-buffs {
    max-width: 200px;
  }

  .cb-buff {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-buff,
  .cb-buff.soon,
  .cb-hurt.on {
    animation: none;
  }
}