@keyframes style_draw-edge__r0o7A {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.style_animate__12_w3 {
  animation: style_draw-edge__r0o7A 700ms ease-out forwards;
}

.style_edge__YA4uD {
  transition:
    stroke-dashoffset 700ms ease-out,
    stroke 200ms ease-out;
}

.style_allocatedEdge__ZLyJM {
  transition: stroke-dashoffset 700ms ease-out;
}

/* Node tooltip: a small "encounter card" -- accent-colored header matching
 * the node's type/tier (same oklch(var(--color-<type>)) token family used on
 * the node bubble itself), a stats row (enemy / tier / stage), a modifiers
 * list, a rewards row, and an inline Battle CTA -- instead of a flat stack
 * of unstyled divs. Mirrors the Hero/Tree skill-tooltip + Avatar profile-menu
 * card language used elsewhere in this codebase. */
.style_battleTooltip___pees {
  padding: 0 !important;
  overflow: hidden;
  border-color: color-mix(in oklch, var(--accent, var(--color-base-300)) 45%, var(--color-base-300)) !important;
}

/* Touch has no hover to dismiss the tooltip, so there it must not swallow a
   tap meant for a node underneath; only its links/buttons take taps. */
@media (hover: none) {
  .style_battleTooltip___pees {
    pointer-events: none;
  }
  .style_battleTooltip___pees a,
  .style_battleTooltip___pees button {
    pointer-events: auto;
  }
}

.style_battleTooltipInner__vMlJC {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 14rem;
  padding: 12px;
}

.style_battleTooltipHeader__GDRty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -12px -12px 0;
  padding: 12px;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--accent) 22%, var(--color-base-100)),
    var(--color-base-100)
  );
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, var(--color-base-300));
}

.style_battleTooltipIcon__EVBDF {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.3rem;
  border-radius: 0.75rem;
  background: color-mix(in oklch, var(--accent) 20%, var(--color-base-100));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--accent) 55%, transparent);
}

.style_battleTooltipName__H70QE {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style_battleTooltipMeta__OmDrT {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--accent) 75%, var(--color-base-content));
}

.style_battleTooltipBadge___7cyL {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  white-space: nowrap;
  color: color-mix(in oklch, var(--accent) 80%, var(--color-base-content));
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
}

.style_battleTooltipStats__y02ql {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.style_battleTooltipStat__A_PCr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.style_battleTooltipStatLabel__sXPy5 {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-base-content);
  opacity: 0.55;
}

.style_battleTooltipStatValue___Sl9a {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style_battleTooltipSection__j_GHW {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.style_battleTooltipSectionLabel__0qkMN {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-base-content);
  opacity: 0.55;
}

.style_battleTooltipModifier___vdBA {
  font-size: 0.78rem;
}

.style_battleTooltipRewards__tGhKL {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.style_battleTooltipReward__azv2Y {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  color: color-mix(in oklch, var(--accent) 85%, var(--color-base-content));
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent);
}
/* Popups fade in and rise, like the reward card (`Battle/reward.tsx`). `translate` is its own property, so it moves the tooltip without touching the `transform` floating-ui positions it with. */
@keyframes popup-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.popup-in {
  animation: popup-in 0.4s ease-out both;
}

@keyframes popup-out {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 8px;
  }
}

/* A closed tooltip's copy (see `fadeOutCopy` in `index.tsx`) */
.popup-out {
  animation: popup-out 0.2s ease-in both;
}

@media (prefers-reduced-motion: reduce) {
  .popup-in,
  .popup-out {
    animation: none;
  }
}

/* Depth: a borderless card, like a floating sheet. A tight dark edge under it, then a wider soft shadow. In dark mode a shadow alone vanishes, so the face is lifted lighter than the page and the shadow is deeper. */
.tooltip-depth {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.3),
    0 4px 10px rgb(0 0 0 / 0.12),
    0 12px 28px -4px rgb(0 0 0 / 0.18);
}

:is([data-theme='dark'], [data-theme$='-dark']) .tooltip-depth {
  background-color: color-mix(in oklab, var(--color-base-100) 90%, var(--color-base-content));
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.5),
    0 2px 4px rgb(0 0 0 / 0.5),
    0 10px 24px rgb(0 0 0 / 0.55),
    0 24px 48px -8px rgb(0 0 0 / 0.6);
}

/* The pointer takes the target's colour (`--color`) and bounces toward it (`--bx`, `--by`: a unit step, set by the placement), glowing as it goes. `translate` is its own property, so it leaves the arrow's `rotate` alone. */
@keyframes tooltip-arrow-pulse {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.9;
    filter: drop-shadow(0 0 2px oklch(var(--color) / 0.5));
  }
  50% {
    translate: calc(var(--bx) * 4px) calc(var(--by) * 4px);
    opacity: 1;
    filter: drop-shadow(0 0 7px oklch(var(--color) / 1)) brightness(1.15);
  }
}

.tooltip-arrow.gradient {
  /* Solid at the tip, fading out toward the card (the shared `.gradient` faded too soon and read washed out) */
  background: linear-gradient(var(--angle), oklch(var(--color)) 0%, oklch(var(--color)) 35%, oklch(var(--color) / 0) 62%);
  animation: tooltip-arrow-pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-arrow {
    animation: none;
  }
}