/* V1.77 · Status gain, refresh and removal feedback without viewport effects. */
#battle:not([hidden]) .status-token.status-added,
#battle:not([hidden]) .status-token.status-updated {
  position: relative;
  isolation: isolate;
}

#battle:not([hidden]) .status-token.status-added {
  animation: status-token-gain 560ms cubic-bezier(.16,.78,.2,1) both;
}

#battle:not([hidden]) .status-token.status-added::after {
  content: "+";
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: #effff8;
  background: rgba(42, 171, 130, .9);
  box-shadow: 0 0 7px rgba(79, 231, 182, .4);
  font-size: 8px;
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}

#battle:not([hidden]) .status-token.debuff.status-added::after {
  content: "!";
  color: #fff2e8;
  background: rgba(194, 52, 57, .94);
  box-shadow: 0 0 7px rgba(255, 83, 70, .42);
}

#battle:not([hidden]) .status-token.status-updated {
  animation: status-token-refresh 420ms ease-out both;
}

#battle:not([hidden]) .status-token.status-updated::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.24) 46%, transparent 72%);
  pointer-events: none;
  transform: translateX(-120%);
  animation: status-token-refresh-sheen 420ms ease-out both;
}

@keyframes status-token-gain {
  0% { opacity: 0; transform: translateY(4px) scale(.94); filter: brightness(1.32); }
  34% { opacity: 1; transform: translateY(-1px) scale(1.025); filter: brightness(1.14); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes status-token-refresh {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.24); }
  100% { filter: brightness(1); }
}

@keyframes status-token-refresh-sheen {
  0% { opacity: 0; transform: translateX(-120%); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translateX(120%); }
}

body[data-vfx-quality="low"] #battle:not([hidden]) .status-token.status-added,
body[data-vfx-quality="low"] #battle:not([hidden]) .status-token.status-updated,
body[data-vfx-quality="low"] #battle:not([hidden]) .status-token.status-updated::after {
  animation-duration: 180ms;
  filter: none;
}

@media (max-width: 720px) {
  #battle:not([hidden]) .status-token.status-added::after {
    top: 1px;
    right: 2px;
    width: 9px;
    height: 9px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #battle:not([hidden]) .status-token.status-added,
  #battle:not([hidden]) .status-token.status-updated,
  #battle:not([hidden]) .status-token.status-updated::after {
    animation-duration: 100ms !important;
    animation-iteration-count: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}