/* The round, lobbed in from the corner where the trebuchet stands. Two
   nested elements because X and Y need transforms of their own: the
   outer one carries X at a constant rate, the inner one carries Y
   through the sampled parabola below. */
.siege-shot{
  position:fixed;z-index:39;pointer-events:none;
  width:0;height:0;
  animation:shot-x .34s linear forwards;
}
.siege-shot i{
  position:absolute;display:block;
  left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#eafaff 11%,#9fe0ff 32%,rgba(70,175,255,.75) 66%,transparent);
  box-shadow:0 0 14px 3px rgba(90,180,255,.85), 0 0 30px 9px rgba(40,120,255,.5);
  animation:shot-y .34s linear forwards;
}
@keyframes shot-x{
  0%{opacity:0;transform:translateX(0);}
  8%{opacity:1;}
  100%{opacity:1;transform:translateX(var(--dx,0));}
}
/* A real parabola, sampled, rather than an ease pretending to be one:

     y(t) = dy*t - rise*4t(1-t)

   Every eased version started the vertical motion slowly, which is the
   opposite of what a throw does. X stays linear: nothing pushes the
   stone sideways once it is in the air. The hump is a height in pixels
   that is zero at both ends, so it arcs over the top wherever the target
   sits - the earlier form scaled dy itself, which meant "12% further
   DOWN" whenever the target was below the launch point, and the round
   dipped under it and climbed back. */
@keyframes shot-y{
  0%{transform:translateY(0) scale(0.700);}
  10%{transform:translateY(calc(var(--dy,0px) * 0.1 - var(--rise,0px) * 0.36)) scale(0.755);}
  20%{transform:translateY(calc(var(--dy,0px) * 0.2 - var(--rise,0px) * 0.64)) scale(0.810);}
  30%{transform:translateY(calc(var(--dy,0px) * 0.3 - var(--rise,0px) * 0.84)) scale(0.865);}
  40%{transform:translateY(calc(var(--dy,0px) * 0.4 - var(--rise,0px) * 0.96)) scale(0.920);}
  50%{transform:translateY(calc(var(--dy,0px) * 0.5 - var(--rise,0px) * 1)) scale(0.975);}
  60%{transform:translateY(calc(var(--dy,0px) * 0.6 - var(--rise,0px) * 0.96)) scale(1.030);}
  70%{transform:translateY(calc(var(--dy,0px) * 0.7 - var(--rise,0px) * 0.84)) scale(1.085);}
  80%{transform:translateY(calc(var(--dy,0px) * 0.8 - var(--rise,0px) * 0.64)) scale(1.140);}
  90%{transform:translateY(calc(var(--dy,0px) * 0.9 - var(--rise,0px) * 0.36)) scale(1.195);}
  100%{transform:translateY(var(--dy,0)) scale(1.250);}
}

/* One short segment per frame, from where the round was to where it is
   now. A single wedge re-aimed every frame can only point back the way
   the round came, so on a curve it cuts the corner and looks detached.
   Here the path itself is the flame, and each segment fades on its own
   clock, which is what tapers it. */
.flame-seg{
  position:fixed;left:0;top:0;z-index:38;pointer-events:none;
  height:12px;margin-top:-6px;transform-origin:0 50%;
}
.flame-seg i{
  display:block;width:100%;height:100%;border-radius:6px;
  background:linear-gradient(90deg,
    rgba(40,120,255,.5), rgba(110,200,255,.88) 55%, rgba(215,245,255,.98));
  filter:blur(2.6px);
  animation:flame-shrink .22s ease-out forwards;
}
/* The hot core, laid over the body: thinner, whiter, and gone sooner,
   so the centre of the trail burns out before its edges do. */
.flame-seg--hot{height:4px;margin-top:-2px;z-index:39;}
.flame-seg--hot i{
  background:linear-gradient(90deg, rgba(160,225,255,.55), #f4fdff);
  filter:blur(1.1px);
  animation-duration:.14s;
}
.flame-seg--big{height:23px;margin-top:-11.5px;}
.flame-seg--big i{animation-duration:.3s;}
.flame-seg--big.flame-seg--hot{height:8px;margin-top:-4px;}
.flame-seg--big.flame-seg--hot i{animation-duration:.19s;}
@keyframes flame-shrink{
  0%{opacity:.95;transform:scaleY(1);}
  55%{opacity:.62;}
  100%{opacity:0;transform:scaleY(.16);}
}
/* The glow around the head, which is the one part that does belong
   pinned to the round. */
.flame-head{
  position:fixed;left:0;top:0;z-index:37;pointer-events:none;opacity:0;
  width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(180,232,255,.55), rgba(60,140,255,.3) 48%, transparent 72%);
  filter:blur(7px);
  transition:opacity .2s ease-out;
}
.flame-head--big{width:104px;height:104px;margin:-52px 0 0 -52px;}

/* What the flame leaves behind. The wedge alone is a clean streak that
   vanishes the instant the round passes; these say something was burning.
   Both are dropped at the round's live position and then abandoned, so
   they fall behind on their own. */
.trail-smoke{
  position:fixed;z-index:36;pointer-events:none;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(130,185,240,.5), rgba(58,95,155,.3) 52%, transparent 74%);
  animation:trail-smoke 1.15s ease-out forwards;
}
@keyframes trail-smoke{
  0%{opacity:.9;transform:translate(0,0) scale(.45);}
  100%{opacity:0;transform:translate(var(--sx,0px), var(--sy,-28px)) scale(3.4);}
}
.trail-spark{
  position:fixed;z-index:40;pointer-events:none;
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#e8f8ff;
  box-shadow:0 0 7px 2px rgba(90,180,255,.9);
  animation:trail-spark .62s ease-out forwards;
}
@keyframes trail-spark{
  0%{opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:translate(var(--sx,0px), var(--sy,0px)) scale(.3);}
}

/* The round going off where it lands - with the marker gone, this is the
   whole click feedback. Same construction as the shield blast, a size
   down. The perfect ring that used to sit behind it is gone: it was the
   shape doing most of the work to make this read as a lamp. */
.shot-bloom{
  position:fixed;z-index:41;pointer-events:none;
  width:52px;height:52px;margin:-26px 0 0 -26px;
  background:radial-gradient(circle,#ffffff 7%,rgba(214,248,255,.95) 22%,
    rgba(120,190,255,.55) 46%,rgba(70,140,255,.2) 66%,transparent 78%);
  clip-path:polygon(106.8% 50.0%, 77.5% 61.4%, 89.8% 89.8%, 58.6% 70.8%, 50.0% 101.5%, 40.3% 73.4%, 14.3% 85.7%, 28.8% 58.8%, 4.9% 50.0%, 26.4% 40.2%, 17.8% 17.8%, 40.2% 26.3%, 50.0% 7.6%, 58.6% 29.2%, 87.7% 12.3%, 73.4% 40.3%);
  animation:bloom-out .44s cubic-bezier(.05,.85,.3,1) forwards;
}
.bloom-lobe{
  position:fixed;z-index:41;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(236,252,255,.9) 8%,
    rgba(140,220,255,.6) 33%, rgba(80,165,255,.26) 57%, transparent 74%);
  opacity:0;
  animation:blast-lobe .5s cubic-bezier(.1,.8,.3,1) forwards;
}
.bloom-ray{
  position:fixed;z-index:42;pointer-events:none;
  height:5px;margin-top:-2.5px;transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(240,253,255,.92),
    rgba(125,205,255,.55) 42%, rgba(90,170,255,0));
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  filter:blur(1px);
  opacity:0;
  animation:blast-ray .3s ease-out forwards;
}
@keyframes bloom-out{
  0%{opacity:0;transform:scale(.18) rotate(-14deg);}
  9%{opacity:1;transform:scale(1) rotate(-4deg);}
  100%{opacity:0;transform:scale(2.6) rotate(12deg);}
}