/* Ghost abilities HUD (public/js/abilities.js) */
#abilityBar {
  position: fixed;
  /* just above the BOO button; the chore panel owns the right edge */
  left: 50%;
  bottom: 160px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 16;
}
#abilityBar.hidden,
#abilityAim.hidden {
  display: none;
}
.ability-slot {
  --cd: 0deg;
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 14px;
  border: 1px solid var(--card-border, rgba(190, 160, 255, 0.22));
  background: var(--card, rgba(24, 14, 38, 0.86));
  color: var(--text, #f1eaff);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(157, 123, 255, 0);
  transition: transform 0.12s, box-shadow 0.2s, border-color 0.2s;
}
.ability-slot:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #9d7bff);
}
.ability-slot:not(.cooling):not(.empty) {
  box-shadow: 0 0 14px 0 rgba(157, 123, 255, 0.35);
}
.ability-slot.aiming {
  border-color: #7dffb0;
  box-shadow: 0 0 18px 2px rgba(125, 255, 176, 0.55);
  animation: ab-pulse 0.8s ease-in-out infinite;
}
.ability-slot .ab-icon {
  font-size: 22px;
  line-height: 1;
}
.ability-slot .ab-name {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ability-slot kbd {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 9px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}
.ability-slot .ab-pips {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent-2, #ffb347);
}
.ability-slot .ab-cd {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  pointer-events: none;
  background: conic-gradient(rgba(5, 2, 10, 0.72) var(--cd), transparent 0);
  opacity: 0;
}
.ability-slot.cooling .ab-cd,
.ability-slot.empty .ab-cd {
  opacity: 1;
}
.ability-slot.empty {
  filter: grayscale(1);
  opacity: 0.5;
  cursor: default;
}
@keyframes ab-pulse {
  50% {
    transform: translateY(-3px);
  }
}

#abilityAim {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  transform: translate(16px, 14px);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(20, 60, 40, 0.85);
  color: #c9ffe0;
  white-space: nowrap;
}
#abilityAim.bad {
  background: rgba(70, 14, 24, 0.85);
  color: #ffc4cc;
}

/* Blackout: extra darkness at the screen edges on top of the exposure drop. */
#blackoutFx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: radial-gradient(circle at center, transparent 25%, #000 85%);
  transition: opacity 0.08s;
}
#blackoutFx:not(.on) {
  opacity: 0 !important;
}

@media (max-width: 760px), (max-height: 520px) {
  #abilityBar {
    bottom: 150px;
    gap: 6px;
  }
  .ability-slot {
    width: 56px;
    height: 56px;
  }
  .ability-slot .ab-icon {
    font-size: 20px;
  }
  .ability-slot .ab-name {
    display: none;
  }
}