/* Shared visual feedback animations — loaded by both solo and vs boards.
   JS counterpart: js/shared/feedback.js */

/* ---- Ink-shortage shake ---- */
@keyframes ink-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX( 4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX( 3px); }
}
.ink-warn { animation: ink-shake 0.4s ease; }

/* ---- Floating lore-gain badge ---- */
@keyframes lore-gain-float {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20%  { opacity: 1; transform: translate(-50%, calc(-50% - 10px)) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 52px)) scale(0.9); }
}
.lore-gain-badge {
  position: fixed;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--blue) 20%, rgb(0 0 0 / 0.75));
  border: 1px solid color-mix(in srgb, var(--blue) 50%, transparent);
  border-radius: var(--radius-sm);
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  animation: lore-gain-float 1.2s ease-out forwards;
}

/* ---- Damage floating number ---- */
@keyframes damage-float {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  15%  { opacity: 1; transform: translate(-50%, calc(-50% - 8px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 40px)) scale(0.85); }
}
.damage-float {
  position: fixed;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--accent) 20%, rgb(0 0 0 / 0.75));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  animation: damage-float 0.9s ease-out forwards;
}

/* ---- Heal floating badge ---- */
@keyframes heal-float {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  15%  { opacity: 1; transform: translate(-50%, calc(-50% - 8px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 44px)) scale(0.85); }
}
.heal-float {
  position: fixed;
  padding: 3px 8px;
  background: color-mix(in srgb, #40c870 20%, rgb(0 0 0 / 0.75));
  border: 1px solid color-mix(in srgb, #40c870 55%, transparent);
  border-radius: var(--radius-sm);
  color: #40c870;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  animation: heal-float 1.0s ease-out forwards;
}

/* ---- Buff floating badge ---- */
@keyframes buff-float {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  15%  { opacity: 1; transform: translate(-50%, calc(-50% - 6px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 40px)) scale(0.85); }
}
.buff-float {
  position: fixed;
  padding: 3px 8px;
  background: color-mix(in srgb, #c070e8 20%, rgb(0 0 0 / 0.75));
  border: 1px solid color-mix(in srgb, #c070e8 55%, transparent);
  border-radius: var(--radius-sm);
  color: #c8a0f0;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 500;
  animation: buff-float 1.0s ease-out forwards;
}

/* ---- Turn change banner ---- */
@keyframes turn-banner-slide {
  0%   { opacity: 0; transform: translate(calc(-50% + 40px), -50%); }
  27%  { opacity: 1; transform: translate(-50%, -50%); }
  73%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(calc(-50% - 40px), -50%); }
}
.turn-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 12px 40px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  white-space: nowrap;
  pointer-events: none;
  z-index: 300;
  display: none;
}
.turn-banner.active {
  display: block;
  animation: turn-banner-slide 1.1s ease-in-out forwards;
}
.turn-banner.player-turn {
  background: color-mix(in srgb, var(--blue) 22%, rgb(0 0 0 / 0.82));
  border: 1px solid color-mix(in srgb, var(--blue) 55%, transparent);
  color: #fff;
}
.turn-banner.opponent-turn {
  background: color-mix(in srgb, var(--accent) 22%, rgb(0 0 0 / 0.82));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

/* ---- Damage hit flash ---- */
@keyframes damage-hit {
  0%   { filter: brightness(1) saturate(1); outline: none; }
  25%  { filter: brightness(2.2) saturate(0) sepia(1) hue-rotate(-15deg);
         outline: 3px solid rgb(233 69 96 / 0.9); outline-offset: 2px; }
  100% { filter: brightness(1) saturate(1); outline: none; }
}
.solo-card.damage-hit {
  animation: damage-hit 0.45s ease-out forwards;
}

/* ---- Card land animation (field entry) ---- */
@keyframes card-land {
  0%   { transform: scale(1.1) translateY(-4px); filter: brightness(1.25); }
  50%  { transform: scale(0.97); filter: brightness(1); }
  75%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.solo-card.card-land {
  animation: card-land 0.38s ease-out forwards;
  position: relative;
  z-index: 5;
}

/* ---- Banish exit animation ---- */
@keyframes card-banish {
  0%   { transform: scale(1) rotate(0deg);   opacity: 1;
         filter: brightness(1); }
  35%  { transform: scale(1.1) rotate(-4deg); opacity: 1;
         filter: brightness(2) saturate(0); }
  100% { transform: scale(0.2) rotate(18deg); opacity: 0;
         filter: brightness(0.5) saturate(0); }
}
.solo-card.banishing {
  animation: card-banish 0.55s ease-in forwards;
  pointer-events: none;
  position: relative;
  z-index: 10;
}