/* Shared selection-mode bar and target-card styles for solo and VS modes. */

/* ---- Bar: common layout ---- */
.vs-singer-bar,
.vs-damage-bar,
.vs-item-banish-bar,
.vs-effect-target-bar,
.solo-item-banish-bar,
.solo-effect-target-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 60;
}

.vs-singer-bar.active,
.vs-damage-bar.active,
.vs-item-banish-bar.active,
.vs-effect-target-bar.active,
.solo-item-banish-bar.active,
.solo-effect-target-bar.active { display: flex; }

/* Bar hint text */
.vs-singer-bar-hint,
.vs-damage-bar-hint,
.vs-item-banish-bar-hint,
.vs-effect-target-bar-hint,
.solo-item-banish-bar-hint,
.solo-effect-target-bar-hint { font-size: 0.82rem; }

/* Cancel button */
.vs-singer-cancel,
.vs-damage-cancel,
.vs-item-banish-cancel,
.vs-effect-target-cancel,
.solo-item-banish-cancel,
.solo-effect-target-cancel { padding: 2px 10px; font-size: 0.78rem; flex-shrink: 0; }

/* ---- Target card: common geometry (outline-color/cursor/animation stay per-mode) ---- */
.solo-card.singer-eligible,
.solo-card.damage-target,
.solo-card.item-banish-target,
.solo-card.effect-target {
  outline-offset: 2px;
  position: relative;
  z-index: 60;
}

.solo-card.singer-eligible:hover,
.solo-card.damage-target:hover,
.solo-card.item-banish-target:hover,
.solo-card.effect-target:hover { outline-width: 3px; }

/* ---- item-banish-target: used identically in solo and VS ---- */
@keyframes item-banish-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgb(64 144 255 / 0.5); }
  50%       { box-shadow: 0 0 0 6px rgb(64 144 255 / 0);   }
}

.solo-card.item-banish-target {
  outline: 2px solid var(--blue);
  cursor: crosshair;
  animation: item-banish-pulse 0.9s ease-in-out infinite;
}

/* ---- effect-target: used identically in solo and VS ---- */
@keyframes effect-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgb(76 175 80 / 0.5); }
  50%       { box-shadow: 0 0 0 6px rgb(76 175 80 / 0);   }
}

.solo-card.effect-target {
  outline: 2px solid #4caf50;
  cursor: pointer;
  animation: effect-target-pulse 0.9s ease-in-out infinite;
}