/* C4 hover flow particles — shape-first element languages */
#b2-ip-layer .c4p-layer{position:absolute;pointer-events:none;overflow:visible;z-index:31;transition:opacity .18s ease}
#b2-ip-layer .c4p-layer.c4p-fade{opacity:0}
#b2-ip-layer .c4p-dot{position:absolute;pointer-events:none;will-change:transform,opacity}
#b2-ip-layer .c4p-aura{position:absolute;inset:-8% -14%;border-radius:50%;pointer-events:none;opacity:0;animation:c4p-aura 1.7s ease-in-out infinite}

/* aurora per element */
#b2-ip-layer .c4p-fire .c4p-aura{background:radial-gradient(ellipse at 50% 62%,rgba(255,90,26,.38) 0%,rgba(255,150,60,.18) 38%,rgba(255,90,20,0) 72%);filter:blur(6px)}
#b2-ip-layer .c4p-ice .c4p-aura{background:radial-gradient(ellipse at 50% 40%,rgba(210,245,255,.36) 0%,rgba(150,215,240,.16) 38%,rgba(140,200,230,0) 72%);filter:blur(7px)}
#b2-ip-layer .c4p-wind .c4p-aura{background:radial-gradient(ellipse at 50% 55%,rgba(160,210,160,.30) 0%,rgba(150,200,150,.12) 40%,rgba(140,190,140,0) 72%);filter:blur(7px)}
#b2-ip-layer .c4p-thunder .c4p-aura{background:radial-gradient(ellipse at 50% 50%,rgba(200,170,255,.36) 0%,rgba(170,140,230,.16) 40%,rgba(150,120,200,0) 72%);filter:blur(6px)}

/* ---------- fire: flame licks + embers + smoke ---------- */
#b2-ip-layer .p-flame{background:radial-gradient(ellipse at 50% 75%,#fff3d6 0%,#ffd08a 22%,#ff7a2a 55%,rgba(200,40,0,0) 82%);
  filter:drop-shadow(0 0 6px rgba(255,120,40,.9));animation:p-flame var(--dur,900ms) ease-out forwards}
#b2-ip-layer .p-ember{border-radius:50%;background:#ffb257;box-shadow:0 0 8px #ff8a3c;animation:p-fire var(--dur,800ms) linear forwards}
#b2-ip-layer .p-smoke{border-radius:50%;background:radial-gradient(circle,rgba(120,90,80,.5),rgba(120,90,80,0) 70%);animation:p-smoke var(--dur,1400ms) linear forwards}
@keyframes p-flame{
  0%{opacity:0;transform:translate(-50%,0) rotate(-45deg) scale(.4)}
  14%{opacity:1;transform:translate(-50%,-6px) rotate(-45deg) scale(1)}
  55%{opacity:.95;transform:translate(calc(-50% + var(--dx,0px)*.5),calc(var(--dy,-120px)*.45)) rotate(-45deg) scale(.9)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,-120px)) rotate(-45deg) scale(.25)}
}
@keyframes p-fire{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  10%{opacity:1}
  80%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,-120px)) scale(.3)}
}
@keyframes p-smoke{
  0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  25%{opacity:.4}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(var(--dy,-120px)*1.1)) scale(1.8)}
}

/* ---------- ice: snowflakes + shards + mist ---------- */
#b2-ip-layer .p-flake{background:
  linear-gradient(0deg,transparent 44%,#eafaff 44%,#eafaff 56%,transparent 56%),
  linear-gradient(60deg,transparent 44%,#eafaff 44%,#eafaff 56%,transparent 56%),
  linear-gradient(120deg,transparent 44%,#eafaff 44%,#eafaff 56%,transparent 56%);
  filter:drop-shadow(0 0 5px #bfeaff);animation:p-snow var(--dur,1100ms) linear forwards}
#b2-ip-layer .p-ice{clip-path:polygon(50% 0%,64% 40%,100% 50%,64% 60%,50% 100%,36% 60%,0% 50%,36% 40%);
  background:linear-gradient(180deg,#ffffff,#bfeaff);filter:drop-shadow(0 0 6px #9fdcf0);animation:p-icefall var(--dur,1000ms) ease-in forwards}
#b2-ip-layer .p-mist{border-radius:50%;background:radial-gradient(circle,rgba(210,245,255,.5),rgba(160,215,240,0) 70%);animation:p-mist var(--dur,1500ms) linear forwards}
@keyframes p-snow{
  0%{opacity:0;transform:translate(-50%,0) rotate(0deg) scale(.4)}
  15%{opacity:1}
  70%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,120px)) rotate(220deg) scale(.8)}
}
@keyframes p-icefall{
  0%{opacity:0;transform:translate(-50%,0) rotate(0deg) scale(.5)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,120px)) rotate(140deg) scale(.9)}
}
@keyframes p-mist{
  0%{opacity:0;transform:translate(-50%,0)}
  25%{opacity:.35}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,120px)) scale(1.5)}
}

/* ---------- wind: paper shreds + leaves + wisps ---------- */
#b2-ip-layer .p-paper{background:#f2fbe9;box-shadow:0 0 4px rgba(160,210,160,.8);animation:p-windpaper var(--dur,1000ms) linear forwards}
#b2-ip-layer .p-leaf{background:linear-gradient(140deg,#cfe8c3,#9fd8a8);animation:p-windpaper var(--dur,1100ms) linear forwards}
#b2-ip-layer .p-wisp{border-radius:50%;background:radial-gradient(circle,rgba(200,235,200,.45),rgba(160,210,160,0) 70%);animation:p-mist var(--dur,1300ms) linear forwards}
@keyframes p-windpaper{
  0%{opacity:0;transform:translate(-50%,0) rotate(0deg) scale(.6)}
  12%{opacity:1}
  45%{transform:translate(calc(-50% + var(--dx,0px)),calc(var(--dy,-120px)*.5)) rotate(calc(var(--spin,180deg)*.5)) scale(.95)}
  76%{opacity:.9}
  100%{opacity:0;transform:translate(calc(-50% - var(--dx,0px)),var(--dy,-120px)) rotate(var(--spin,360deg)) scale(.5)}
}

/* ---------- thunder: bolts + nodes + spark lines ---------- */
#b2-ip-layer .p-bolt{clip-path:polygon(52% 0%,78% 0%,58% 38%,82% 38%,30% 100%,44% 54%,22% 54%);
  background:linear-gradient(180deg,#ffffff,#d6c2ff 60%,#a98fd0);filter:drop-shadow(0 0 7px #b79ee8) drop-shadow(0 0 14px rgba(170,140,230,.8));
  animation:p-bolt var(--dur,720ms) steps(4,end) forwards}
#b2-ip-layer .p-node{border-radius:50%;background:#fff;box-shadow:0 0 8px #b79ee8,0 0 16px rgba(170,140,230,.8);animation:p-thunder var(--dur,760ms) steps(3,end) forwards}
#b2-ip-layer .p-sparkline{background:linear-gradient(180deg,transparent,#fff 35%,#d6c2ff 65%,transparent);filter:drop-shadow(0 0 6px #b79ee8);animation:p-arc var(--dur,480ms) steps(2,end) forwards}
@keyframes p-bolt{
  0%{opacity:0;transform:translate(-50%,0) scale(.5) skewX(-12deg)}
  10%{opacity:1;transform:translate(-50%,-6px) scale(1) skewX(-12deg)}
  30%{opacity:.25}
  45%{opacity:1;transform:translate(calc(-50% + var(--dx,0px)*.4),calc(var(--dy,-120px)*.4)) scale(1.05) skewX(-12deg)}
  62%{opacity:.3}
  80%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,-120px)) scale(.5) skewX(-12deg)}
}
@keyframes p-thunder{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  10%{opacity:1}
  20%{opacity:.15}
  32%{opacity:1;transform:translate(calc(-50% + var(--dx,0px)*.3),calc(var(--dy,-120px)*.3)) scale(1.1)}
  44%{opacity:.2}
  58%{opacity:1;transform:translate(calc(-50% + var(--dx,0px)*.6),calc(var(--dy,-120px)*.6)) scale(.95)}
  74%{opacity:.3}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,-120px)) scale(.4)}
}
@keyframes p-arc{
  0%{opacity:0}
  12%{opacity:1}
  24%{opacity:0}
  40%{opacity:.95}
  52%{opacity:0}
  100%{opacity:0}
}

@keyframes c4p-aura{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* sword body reacts per element */
#b2-ip-layer .b2-card:nth-child(1).is-selected .b2-sword-img{filter:brightness(1.12) saturate(1.3) drop-shadow(0 0 10px rgba(255,100,30,.65))}
#b2-ip-layer .b2-card:nth-child(2).is-selected .b2-sword-img{filter:brightness(1.12) saturate(1.0) drop-shadow(0 0 10px rgba(160,225,245,.65))}
#b2-ip-layer .b2-card:nth-child(3).is-selected .b2-sword-img{filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 10px rgba(160,215,160,.6))}
#b2-ip-layer .b2-card:nth-child(4).is-selected .b2-sword-img{filter:brightness(1.12) saturate(1.2) drop-shadow(0 0 10px rgba(195,165,255,.65))}

@media (prefers-reduced-motion: reduce){
  #b2-ip-layer .c4p-layer{display:none}
  #b2-ip-layer .c4p-aura{animation:none}
}

/* hide fire heat aura (orange glow blob next to the sword) */
#b2-ip-layer .c4p-fire .c4p-aura{display:none}
#b2-ip-layer .b2-card:nth-child(1).is-selected .b2-sword-img{filter:brightness(1.08) saturate(1.22) drop-shadow(0 0 6px rgba(255,120,40,.28))}