/* Port of border-beam sm/md + sunset (Jakubantalik/border-beam).
   Source: d:/AI/border-beam-main/border-beam-main/src/styles.ts
   Game is vanilla HTML — do not mount the React package.
   Hosts: [data-beam=circle|ewad|ellipse] · [data-beam=hud] + [data-active] + [data-beam-bloom] */

@property --beam-angle-hud {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
@property --beam-opacity-hud {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam] {
  --beam-strength: 0.72;
  --beam-radius: 8px;
  --beam-pad: 1.5px;
  position: relative;
  isolation: isolate;
  border-radius: var(--beam-radius);
  background: transparent;
}
[data-beam] > :not([data-beam-bloom]) {
  z-index: 4;
}
[data-beam="circle"],
[data-beam="ewad"],
[data-beam="ellipse"] {
  --beam-radius: 50%;
  overflow: hidden;
}
[data-beam="hud"] {
  --beam-radius: 8px;
  overflow: hidden;
}
.battle-cmd-sub[data-beam="hud"] {
  overflow: auto;
}
[data-beam][data-active] {
  animation:
    beam-spin-hud 1.96s linear infinite,
    beam-fade-in-hud 0.55s ease forwards;
}
.ewad-slot.is-focus .ewad-label[data-beam],
.ewad-slot.is-focus[data-beam],
.ewad-slot.is-focus [data-beam],
.bp-face.is-lead[data-beam],
.bst-glyph[data-beam] {
  --beam-strength: 1;
}

[data-beam][data-active]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--beam-radius);
  padding: var(--beam-pad);
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(
      from var(--beam-angle-hud),
      transparent 0%, transparent 54%,
      rgba(255, 255, 255, 0.1) 57%,
      rgba(255, 255, 255, 0.3) 60%,
      rgba(255, 255, 255, 0.6) 63%,
      rgba(255, 255, 255, 0.75) 66%,
      rgba(255, 255, 255, 0.6) 69%,
      rgba(255, 255, 255, 0.3) 72%,
      rgba(255, 255, 255, 0.1) 75%,
      transparent 78%, transparent 100%
    ),
    radial-gradient(ellipse 9px 18px at 2% 68%, rgb(255, 180, 50), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgb(255, 150, 40), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 80, 60), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgb(255, 100, 80), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgb(255, 60, 80), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgb(255, 120, 60), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgb(255, 200, 50), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 90, 70), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle-hud),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(
      from var(--beam-angle-hud),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  opacity: calc(var(--beam-opacity-hud) * 0.46 * var(--beam-strength, 1));
  animation: beam-hue-shift-hud 12s ease-in-out infinite;
}

[data-beam="circle"][data-active]::before,
[data-beam="ewad"][data-active]::before,
[data-beam="ellipse"][data-active]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--beam-radius);
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 9px 18px at 2% 68%, rgba(255, 180, 50, 0.5), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgba(255, 150, 40, 0.45), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 80, 60, 0.35), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgba(255, 100, 80, 0.35), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgba(255, 60, 80, 0.3), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgba(255, 120, 60, 0.4), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgba(255, 200, 50, 0.3), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 90, 70, 0.3), transparent);
  -webkit-mask-image: conic-gradient(
    from var(--beam-angle-hud),
    transparent 0%, transparent 22%,
    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
    white 46%, white 82%,
    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
    transparent 97%, transparent 100%
  );
  mask-image: conic-gradient(
    from var(--beam-angle-hud),
    transparent 0%, transparent 22%,
    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
    white 46%, white 82%,
    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
    transparent 97%, transparent 100%
  );
  opacity: calc(var(--beam-opacity-hud) * 0.24 * var(--beam-strength, 1));
  animation: beam-hue-shift-hud 12s ease-in-out infinite;
}

[data-beam] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--beam-radius);
  padding: var(--beam-pad);
  pointer-events: none;
  z-index: 3;
  background: conic-gradient(
    from var(--beam-angle-hud),
    transparent 0%, transparent 58%,
    rgba(255, 255, 255, 0.03) 62%,
    rgba(255, 255, 255, 0.08) 65%,
    rgba(255, 255, 255, 0.2) 67%,
    rgba(255, 255, 255, 0.45) 69%,
    rgba(255, 255, 255, 0.85) 70%,
    rgba(255, 255, 255, 0.85) 70.5%,
    rgba(255, 255, 255, 0.45) 71.5%,
    rgba(255, 255, 255, 0.2) 73%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.03) 78%,
    transparent 82%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: blur(8px) brightness(1.3) saturate(1.2);
  opacity: 0;
}
[data-beam][data-active] > [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-hud) * 0.38 * var(--beam-strength, 1));
}

@keyframes beam-spin-hud {
  to { --beam-angle-hud: 360deg; }
}
@keyframes beam-fade-in-hud {
  to { --beam-opacity-hud: 1; }
}
@keyframes beam-hue-shift-hud {
  0% { filter: hue-rotate(-18deg) brightness(1.3) saturate(1.2); }
  50% { filter: hue-rotate(18deg) brightness(1.3) saturate(1.2); }
  100% { filter: hue-rotate(-18deg) brightness(1.3) saturate(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  [data-beam][data-active],
  [data-beam][data-active]::before,
  [data-beam][data-active]::after {
    animation: none;
  }
  [data-beam] {
    --beam-opacity-hud: 1;
  }
}