/* Event-driven effects live in a clipped layer; numbers never cover the hand/HUD. */
.battle-fx-layer { position:fixed; inset:0; z-index:1440; pointer-events:none; overflow:hidden; }
.battle-fx-layer * { pointer-events:none; }
.battle-fx-layer #fx-canvas { position:absolute; inset:0; }
.battle-number { font-family:var(--font-ui); font-size:64px; font-weight:850; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; -webkit-text-stroke:1.5px #18101a; text-shadow:0 4px 0 #050911,0 0 22px #faac6f; animation-name:duel-damage-number; }
.battle-number.massive { font-size:88px; }
.effect-status { max-width:min(290px,80vw); font:750 16px/1.5 var(--font-ui); padding:8px 14px; border-width:2px; background:#071322; white-space:normal; text-align:center; letter-spacing:0; text-shadow:none; animation-name:duel-status-label; }
.impact-ring { width:160px; height:160px; border-width:3px; }
.impact-slash { width:210px; height:210px; }
.summon-sigil { width:220px; height:220px; }
.summon-sigil.legendary { width:320px; height:320px; }
.summon-sigil>b { position:absolute; left:20%; right:20%; bottom:40%; height:220px; background:linear-gradient(0deg,var(--fx-color),transparent 85%); clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); opacity:.28; transform-origin:50% 100%; animation:summon-pillar .9s ease-out both; }
.attack-ghost { width:145px; height:203px; border-width:2px; box-shadow:0 0 22px var(--fx-color),0 0 65px color-mix(in srgb,var(--fx-color) 35%,transparent); }
.battle-impact { position:fixed; width:220px; aspect-ratio:1; transform:translate(-50%,-50%); z-index:1435; --impact-turn:0deg; }
.battle-impact.heavy { width:290px; }
.battle-impact>i,.battle-impact>b { position:absolute; display:block; }
.impact-core { inset:24%; border-radius:50%; background:radial-gradient(#fff9dc 0 4%,var(--fx-color) 12%,transparent 65%); animation:duel-impact-core .65s ease-out both; }
.impact-arc { inset:10%; border:4px solid var(--fx-color); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; box-shadow:0 0 14px var(--fx-color); animation:duel-impact-arc .72s ease-out both; }
.impact-arc.second { inset:24%; border-color:#fff2ce transparent transparent #fff2ce; --impact-turn:160deg; animation-delay:.045s; }
.battle-impact>span { display:block; text-align:center; color:var(--fx-color); font:120px/220px Georgia,serif; text-shadow:0 0 16px var(--fx-color); animation:duel-impact-symbol .75s ease-out both; }
.battle-impact.heavy>span { line-height:290px; font-size:160px; }
.battle-impact>b { left:48%; top:8%; width:4%; height:36%; background:linear-gradient(0deg,transparent,var(--fx-color),#fff7df); border-radius:60%; transform-origin:50% 116%; rotate:calc(var(--ray)*60deg); animation:duel-impact-ray .65s ease-out both; }
.battle-impact[data-element=fire] .impact-arc { border-radius:15% 80% 20% 85%; }
.battle-impact[data-element=water] .impact-arc { border-radius:5%; rotate:45deg; box-shadow:0 0 18px #a7e9ff; }
.battle-impact[data-element=nature]>b { border-radius:100% 0 100% 0; width:8%; }
.battle-impact[data-element=storm]>b { width:9%; clip-path:polygon(40% 0,100% 0,58% 40%,90% 40%,0 100%,30% 50%,0 50%); border-radius:0; }
.battle-impact[data-element=moon] .impact-core { background:none; border:11px solid var(--fx-color); border-bottom-color:transparent; border-left-color:transparent; }
.battle-impact[data-element=astral] .impact-arc { border-radius:12%; rotate:45deg; }
.duel-play .skip-battle-effect { font:700 15px/1.5 var(--font-ui); min-height:44px; }
.cinematic-title :is(small,strong),.cinematic-actor-copy :is(strong,span),.cinematic-hit :is(small,b) { font-family:var(--font-ui); }
.cinematic-title small { font-size:14px; letter-spacing:2px; }
.cinematic-hit small { font-size:14px; letter-spacing:2px; }
@keyframes duel-impact-core { 0%{opacity:0;scale:.25} 18%{opacity:.72;scale:1.1} 100%{opacity:0;scale:1.7} }
@keyframes duel-impact-arc { 0%{opacity:0;transform:scale(.2) rotate(var(--impact-turn))} 15%{opacity:.9} 100%{opacity:0;transform:scale(1.5) rotate(calc(var(--impact-turn) + 80deg))} }
@keyframes duel-impact-ray { 0%{opacity:0;scale:.2} 20%{opacity:.85} 100%{opacity:0;scale:1.4;translate:0 -30px} }
@keyframes duel-impact-symbol { 0%{opacity:0;scale:.4} 20%{opacity:.8;scale:1.08} 100%{opacity:0;scale:1.3} }
@keyframes summon-pillar { 0%{opacity:0;scale:1 .1} 30%{opacity:.3;scale:1 1} 100%{opacity:0;scale:.6 1.1} }
@keyframes duel-damage-number { 0%{opacity:0;transform:translate(-50%,-50%) scale(.5)} 20%{opacity:1;transform:translate(-50%,-50%) scale(1.12)} 75%{opacity:1;transform:translate(-50%,-70%) scale(1)} 100%{opacity:0;transform:translate(-50%,-105%) scale(.95)} }
@keyframes duel-status-label { 0%{opacity:0;transform:translate(-50%,20%) scale(.8)} 15%{opacity:1;transform:translate(-50%,-50%) scale(1)} 75%{opacity:1;transform:translate(-50%,-80%)} 100%{opacity:0;transform:translate(-50%,-110%)} }
@media(max-width:600px) {
  .battle-number { font-size:48px; }
  .battle-number.massive { font-size:66px; }
  .effect-status { font-size:15px; padding:7px 12px; }
  .battle-impact { width:155px; }
  .battle-impact.heavy { width:200px; }
  .battle-impact>span { font-size:88px; line-height:155px; }
  .battle-impact.heavy>span { font-size:112px; line-height:200px; }
  .impact-slash { width:160px; height:160px; }
  .impact-ring { width:120px; height:120px; }
  .summon-sigil { width:165px; height:165px; }
  .summon-sigil.legendary { width:230px; height:230px; }
  .attack-ghost { width:106px; height:148px; }
  .cinematic-title small,.cinematic-hit small { font-size:13px; letter-spacing:1px; }
}
@media(prefers-reduced-motion:reduce) {
  .battle-impact,.summon-sigil>b { display:none; }
  .impact-ring { transform:translate(-50%,-50%); opacity:.35; }
  .battle-number { font-size:44px; }
  .battle-number.massive { font-size:58px; }
}