/* V1.80 · Zero-damage miss punctuation, exclusive from block and hit feedback. */
.settlement-miss-confirm {
  --miss-size: 78px;
  --miss-angle: -90deg;
  position: fixed;
  z-index: 118;
  width: var(--miss-size);
  height: var(--miss-size);
  display: block;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  contain: layout style paint;
  animation: settlement-miss-confirm 680ms cubic-bezier(.12,.72,.18,1) both;
}

.settlement-miss-streak {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(218, 231, 239, .42) 22%, rgba(245, 250, 252, .92) 68%, transparent);
  box-shadow: 0 0 7px rgba(174, 211, 229, .28);
  transform-origin: 50% 50%;
  animation: settlement-miss-streak 460ms cubic-bezier(.12,.76,.18,1) both;
}

.settlement-miss-streak.streak-a {
  transform: translate(-42%, -50%) rotate(calc(var(--miss-angle) + 8deg));
}

.settlement-miss-streak.streak-b {
  width: 54%;
  opacity: .68;
  transform: translate(-36%, 320%) rotate(calc(var(--miss-angle) - 5deg));
  animation-delay: 34ms;
}

.settlement-miss-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -1px;
  min-width: 44px;
  display: inline-flex;
  justify-content: center;
  padding: 3px 8px 4px;
  border: 1px solid rgba(205, 219, 229, .48);
  border-radius: 999px;
  color: #edf3f7;
  background: linear-gradient(180deg, rgba(70, 82, 94, .94), rgba(15, 21, 29, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.3);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .11em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.74);
  white-space: nowrap;
  transform: translateX(-50%);
  animation: settlement-miss-label 560ms 42ms ease-out both;
}

.settlement-miss-target {
  outline: 1px dashed rgba(210, 224, 233, .2);
  outline-offset: 2px;
}

#fxLayer .settlement-reveal[data-settlement-outcome="miss"] .settlement-outcome {
  color: #dce7ee;
  border-color: rgba(197, 215, 226, .34);
  background: linear-gradient(180deg, rgba(94, 109, 120, .16), rgba(18, 25, 33, .74));
}

@keyframes settlement-miss-confirm {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.92); }
  16%, 62% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.03); }
}

@keyframes settlement-miss-streak {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(1.3); }
  30%, 68% { opacity: .92; clip-path: inset(0 0 0 0); filter: brightness(1.08); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); filter: brightness(1); }
}

@keyframes settlement-miss-label {
  0% { opacity: 0; transform: translateX(-50%) translateY(3px) scale(.88); }
  28%, 74% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-2px) scale(.98); }
}

body[data-vfx-quality="low"] .settlement-miss-streak {
  box-shadow: none;
}

body[data-vfx-quality="low"] .settlement-miss-streak.streak-b {
  display: none;
}

@media (max-width: 720px) {
  .settlement-miss-confirm {
    width: min(var(--miss-size), 68px);
    height: min(var(--miss-size), 68px);
  }

  .settlement-miss-label {
    min-width: 38px;
    padding: 2px 6px 3px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settlement-miss-confirm,
  .settlement-miss-streak,
  .settlement-miss-label {
    animation-duration: 140ms !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
  }
}