/* V1.83 · Resource delivery lands on the actual beneficiary, after action release. */
.settlement-resource-confirm {
  --resource-size: 78px;
  --resource-primary: 255, 209, 91;
  --resource-secondary: 117, 227, 255;
  position: fixed;
  z-index: 118;
  width: var(--resource-size);
  height: var(--resource-size);
  display: block;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  contain: layout style paint;
  animation: settlement-resource-confirm 760ms cubic-bezier(.14,.76,.18,1) both;
}

.settlement-resource-confirm[data-resource-kind="fel"] {
  --resource-primary: 191, 124, 255;
  --resource-secondary: 118, 255, 179;
}

.settlement-resource-core {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 30%;
  height: 30%;
  display: block;
  border: 1px solid rgba(var(--resource-primary), .82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.86), transparent 12%),
    radial-gradient(circle, rgba(var(--resource-secondary), .52), rgba(var(--resource-primary), .16) 56%, transparent 70%);
  box-shadow: inset 0 0 10px rgba(var(--resource-secondary), .2), 0 0 11px rgba(var(--resource-primary), .34);
  transform: translate(-50%, -50%);
  animation: settlement-resource-core 620ms cubic-bezier(.12,.72,.2,1) both;
}

.settlement-resource-pips {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 82%;
  height: 82%;
  display: block;
  transform: translate(-50%, -50%);
}

.settlement-resource-pip {
  position: absolute;
  left: calc(50% + (var(--resource-pip) - 1) * 17%);
  top: 5%;
  width: 9%;
  aspect-ratio: 1;
  display: block;
  border: 1px solid rgba(var(--resource-secondary), .7);
  border-radius: 50%;
  background: rgba(var(--resource-primary), .86);
  box-shadow: 0 0 7px rgba(var(--resource-primary), .42);
  transform: translateX(-50%);
  animation: settlement-resource-pip 520ms calc(var(--resource-pip) * 42ms) ease-out both;
}

.settlement-resource-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -1px;
  min-width: 50px;
  display: inline-flex;
  justify-content: center;
  padding: 3px 8px 4px;
  border: 1px solid rgba(var(--resource-primary), .56);
  border-radius: 999px;
  color: #fff9dd;
  background: linear-gradient(180deg, rgba(104, 73, 20, .96), rgba(29, 25, 18, .98));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.3);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .07em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.72);
  white-space: nowrap;
  transform: translateX(-50%);
  animation: settlement-resource-label 620ms 44ms ease-out both;
}

.settlement-resource-confirm[data-resource-kind="fel"] .settlement-resource-label {
  color: #f7ecff;
  background: linear-gradient(180deg, rgba(85, 45, 121, .96), rgba(26, 18, 37, .98));
}

.settlement-resource-target {
  outline: 1px solid rgba(255, 209, 91, .28);
  outline-offset: 2px;
}

.settlement-resource-target[data-settlement-resource-kind="fel"] {
  outline-color: rgba(191, 124, 255, .3);
}

@keyframes settlement-resource-confirm {
  0% { opacity: 0; transform: translate3d(-50%, -47%, 0) scale(.9); }
  18%, 66% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -56%, 0) scale(1.03); }
}

@keyframes settlement-resource-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.52); filter: brightness(1.5); }
  34%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); filter: brightness(1); }
}

@keyframes settlement-resource-pip {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.6); }
  38%, 76% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(.92); }
}

@keyframes settlement-resource-label {
  0% { opacity: 0; transform: translateX(-50%) translateY(3px) scale(.9); }
  28%, 76% { 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-resource-pip:nth-child(n + 2) {
  display: none;
}

body[data-vfx-quality="low"] .settlement-resource-core,
body[data-vfx-quality="low"] .settlement-resource-pip {
  box-shadow: none;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .settlement-resource-confirm,
  .settlement-resource-core,
  .settlement-resource-pip,
  .settlement-resource-label {
    animation-duration: 150ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
  }
}