/* WORLD ORDER v031 — effects package A: canvas particle layer, layered Clash beams, shockwave and hit stop, hexagonal
   Shield field, real glass shatter. Loaded after israel-v030.css; presentation only (ui/fx-canvas.js, ui/duel-fx.js). */

/* ---------------------------------------------------------------- the particle canvas sits under the DOM effects */
#duel-fx-canvas{position:absolute;inset:0;z-index:29;pointer-events:none}

/* ---------------------------------------------------------------- Clash beams: halo + noisy energy + white core + muzzle */
#duel-fx .fx-column{background:none;outline:0;filter:none;border-radius:0;overflow:visible;box-shadow:none;transform-origin:50% 50%}
#duel-fx .fx-column>i{position:absolute;display:block;pointer-events:none}
#duel-fx .fx-column .bm-halo{inset:-12px -34px;border-radius:40%;filter:blur(14px);opacity:1;mix-blend-mode:screen;
  background:linear-gradient(var(--dir),transparent,color-mix(in srgb,var(--tone) 80%,transparent) 28%,var(--tone) 100%)}
#duel-fx .fx-column .bm-energy{inset:0 -5px;opacity:.95;mix-blend-mode:screen;filter:url(#wo-fx-noise);animation:bm-flow .42s linear infinite;
  background:repeating-linear-gradient(var(--dir),color-mix(in srgb,var(--tone) 70%,#fff) 0 5px,var(--tone) 5px 12px,color-mix(in srgb,var(--tone) 35%,transparent) 12px 22px);
  -webkit-mask:linear-gradient(var(--dir),transparent,#000 22%,#000),linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(var(--dir),transparent,#000 22%,#000),linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-composite:intersect}
#duel-fx .fx-column .bm-core{inset:0 43%;border-radius:4px;background:linear-gradient(var(--dir),transparent,#fff 26%,#fffdf2);box-shadow:0 0 6px #fff,0 0 16px var(--tone),0 0 34px var(--tone)}
#duel-fx .fx-column .bm-muzzle{left:50%;top:0;width:max(48px,220%);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#fffdf5 0 16%,color-mix(in srgb,var(--tone) 80%,#fff) 32%,color-mix(in srgb,var(--tone) 50%,transparent) 54%,transparent 72%)}
#duel-fx .fx-column[data-dir="up"] .bm-muzzle{top:100%}
@keyframes bm-flow{to{background-position:0 var(--flow)}}

/* ---------------------------------------------------------------- impact on the band: air distortion ring and a row flash */
#duel-fx .fx-shockwave{position:absolute;z-index:3;width:360px;height:360px;border-radius:50%;pointer-events:none;
  -webkit-backdrop-filter:blur(5px) brightness(1.6) contrast(1.2) saturate(1.4);backdrop-filter:blur(5px) brightness(1.6) contrast(1.2) saturate(1.4);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 62%,#000 74%,transparent 84%);mask:radial-gradient(circle,transparent 52%,#000 62%,#000 74%,transparent 84%);
  background:radial-gradient(circle,transparent 58%,color-mix(in srgb,var(--tone) 40%,transparent) 66%,rgba(255,252,240,.85) 69%,color-mix(in srgb,var(--tone) 35%,transparent) 73%,transparent 82%)}
#duel-fx .fx-row-flash{position:absolute;z-index:2;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tone) 30%,rgba(255,250,235,.34)) 50%,transparent)}

/* ---------------------------------------------------------------- Shield field: hexagonal energy mesh, flickering cells, scan */
.shield-aura::before,.shield-aura::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.shield-aura::before{opacity:calc(.32 + var(--sh) * .08);mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='55.4256'%3E%3Cpath d='M24.00 0.00L32.00 4.62L32.00 13.86L24.00 18.48L16.00 13.86L16.00 4.62ZM40.00 27.71L48.00 32.33L48.00 41.57L40.00 46.19L32.00 41.57L32.00 32.33Z' fill='%23eaf8ff' fill-opacity='.28'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.7128'%3E%3Cpath d='M8.00 0.00L16.00 4.62L16.00 13.86L8.00 18.48L0.00 13.86L0.00 4.62ZM16.00 13.86L24.00 18.48L24.00 27.71L16.00 32.33L8.00 27.71L8.00 18.48ZM0.00 13.86L8.00 18.48L8.00 27.71L0.00 32.33L-8.00 27.71L-8.00 18.48Z' fill='none' stroke='%23d6f1ff' stroke-opacity='.42' stroke-width='.8'/%3E%3C/svg%3E");
  background-size:48px 55.4256px,16px 27.7128px;background-position:0 0,0 0;
  -webkit-mask:radial-gradient(120% 90% at 50% 45%,#000 30%,rgba(0,0,0,.55) 70%,#000 100%);mask:radial-gradient(120% 90% at 50% 45%,#000 30%,rgba(0,0,0,.55) 70%,#000 100%);
  animation:shield-cells 2.6s steps(6,end) infinite}
.shield-aura::after{background:linear-gradient(0deg,transparent 0,rgba(190,235,255,.22) 45%,rgba(255,255,255,.4) 50%,rgba(190,235,255,.22) 55%,transparent 100%) 0 0/100% 38% no-repeat;animation:shield-scan 3.4s cubic-bezier(.4,0,.6,1) infinite;mix-blend-mode:screen}
@keyframes shield-cells{from{background-position:0 0,0 0}to{background-position:96px 83.1384px,0 0}}
@keyframes shield-scan{0%{background-position:0 130%;opacity:0}12%{opacity:1}60%{opacity:.9}100%{background-position:0 -40%;opacity:0}}
html.wo-reduced-motion .shield-aura::before,html.wo-reduced-motion .shield-aura::after{animation:none}
html.wo-reduced-motion .shield-aura::after{display:none}

/* ---------------------------------------------------------------- shatter: SVG glass pieces instead of clipped boxes */
#duel-fx svg.fx-shield-shard{position:absolute;overflow:visible;pointer-events:none;background:none;box-shadow:none;border-radius:0;will-change:transform,opacity,filter}
/* v031: the band flash and burst get a hotter core and a lens streak in the front's tone */
#duel-fx .fx-clash-flash{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tone) 60%,#fff) 14%,#fffef8 50%,color-mix(in srgb,var(--tone) 60%,#fff) 86%,transparent);box-shadow:0 0 26px 8px color-mix(in srgb,var(--tone) 80%,transparent),0 0 80px 22px color-mix(in srgb,var(--tone) 45%,transparent)}
#duel-fx .fx-clash-burst{width:340px;height:340px;background:radial-gradient(circle,#fffdf5 0 5%,color-mix(in srgb,var(--tone) 70%,#fff) 11%,color-mix(in srgb,var(--tone) 85%,transparent) 22%,color-mix(in srgb,var(--tone) 35%,transparent) 36%,transparent 58%),radial-gradient(ellipse 50% 6% at 50% 50%,#fffef8 0 30%,color-mix(in srgb,var(--tone) 80%,transparent) 60%,transparent 100%)}