/* ================= DM Tavern — the dragon, Storm call, Eldritch blast, Fireball ================= */

/* ---------- Dragon roar ---------- */
.roar3-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,120,40,.28), transparent 60%); opacity: 0; animation: roar3Glow 4.6s ease forwards; }
@keyframes roar3Glow { 0%, 30% { opacity: 0; } 38% { opacity: 1; } 44% { opacity: .6; } 50% { opacity: 1; } 56% { opacity: .7; } 64% { opacity: 1; } 78% { opacity: .5; } 100% { opacity: 0; } }
.roar3-head { overflow: hidden; }
.roar3-head .rh3 { width: 100%; height: 100%; transform: translateY(100%); }
.roar3-head svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 34px rgba(255,80,20,.5)); }
.roar3-head.flip .rh3 svg { transform: scaleX(-1); }
.dragon-head g { transform-box: view-box; }
.dragon-head .dh-pose { transform-origin: 100px 300px; }
.dragon-head .dh-head { transform-origin: 150px 160px; }
.dragon-head .jaw { transform-origin: 160px 152px; }
.dragon-head .dh-lid { transform-box: fill-box; transform-origin: 50% 0; }
.dragon-head .dh-eye { filter: drop-shadow(0 0 5px #ffc030); }
.dragon-head .dh-pupil { transform-box: fill-box; transform-origin: center; animation: dhPupil 4s ease-in-out infinite; }
@keyframes dhPupil { 0%, 30% { transform: scaleX(1); } 40%, 70% { transform: scaleX(.6); } 100% { transform: scaleX(1); } }
.roar3-smoke { width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: radial-gradient(circle, rgba(64,54,50,.6), transparent 70%); filter: blur(4px); }
.roar3-puff { width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: radial-gradient(circle, rgba(200,195,190,.55), transparent 70%); filter: blur(2px); }
.roar3-rings { width: 0; height: 0; }
.roar3-rings .rr { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 4px solid rgba(255,210,140,.75); opacity: 0; animation: roarRing .95s ease-out forwards; }
.roar3-rings .rr.bend { border: 0; -webkit-backdrop-filter: blur(3px) brightness(1.3); backdrop-filter: blur(3px) brightness(1.3);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 60%, #000 66%, transparent 76%); mask: radial-gradient(circle, transparent 50%, #000 60%, #000 66%, transparent 76%); animation: roarRing 1.1s ease-out forwards; }
.db-burst.late { animation-delay: .35s; opacity: 0; width: 220px; height: 220px; margin: -130px 0 0 -110px; }

/* ---------- Storm call ---------- */
.sc-sky { overflow: hidden; }
.sc-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(10,14,30,.25), rgba(8,12,26,.55)); animation: scDim 2.9s ease forwards; }
@keyframes scDim { 0% { opacity: 0; } 18%, 82% { opacity: 1; } 100% { opacity: 0; } }
.sc-clouds { position: absolute; left: 0; right: 0; top: 0; height: 200px; animation: scClouds 2.9s ease forwards; }
@keyframes scClouds { 0% { transform: translateY(-100%); } 20%, 80% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
.sc-cloud { position: absolute; top: -60px; width: 30%; height: 220px; margin-left: -5%; border-radius: 50%; transform: scale(var(--s));
  background: radial-gradient(ellipse at 40% 35%, rgba(130,140,170,.55), transparent 40%), radial-gradient(ellipse at 50% 60%, #3e4558, #1e2230 55%, transparent 70%); filter: blur(2px); }
body.flash-white .sc-cloud { filter: blur(2px) brightness(2.2); }
.sc-rain { position: absolute; inset: 0; animation: scDim 2.9s ease forwards; }
.sc-drop { position: absolute; top: -30px; width: 1.5px; height: 24px; background: linear-gradient(transparent, rgba(190,210,255,.7)); transform: rotate(12deg); animation: scDrop var(--t) linear var(--d) infinite; }
@keyframes scDrop { to { transform: translate(-70px, 110vh) rotate(12deg); } }
.sc-bolt, .sc-arcs, .eb2-beam { position: absolute; }
.sc-bolt svg, .sc-arcs svg, .eb2-beam svg { position: absolute; left: 0; top: 0; overflow: visible; }
.sc-bolt path, .sc-arcs path, .eb2-beam path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sc-bolt .bg { stroke: rgba(140,180,255,.6); stroke-width: 14; filter: blur(5px); } .sc-bolt .bg.thin { stroke-width: 7; }
.sc-bolt .bm { stroke: #bcd6ff; stroke-width: 4.5; } .sc-bolt .bm.thin { stroke-width: 2.2; }
.sc-bolt .bc { stroke: #fff; stroke-width: 2; } .sc-bolt .bc.thin { stroke-width: 1; }
.sc-bolt { animation: scBolt .75s linear forwards; }
@keyframes scBolt { 0% { opacity: 1; } 8% { opacity: .15; } 16% { opacity: 1; } 28% { opacity: .35; } 40% { opacity: 1; } 70% { opacity: .6; } 100% { opacity: 0; } }
.sc-arcs .bg { stroke: rgba(140,180,255,.5); stroke-width: 6; filter: blur(3px); } .sc-arcs .bm { stroke: #cfe2ff; stroke-width: 2; } .sc-arcs .bc { stroke: #fff; stroke-width: .9; }
.sc-arcs { animation: scArcs .9s steps(6) forwards; }
@keyframes scArcs { 0% { opacity: 1; } 20% { opacity: .2; } 40% { opacity: 1; } 60% { opacity: .3; } 80% { opacity: .9; } 100% { opacity: 0; } }
.fx .sc-hit { width: 0; height: 0; }
.sc-hit > * { position: absolute; left: 0; top: 0; }
.sc-flash { width: 180px; height: 180px; margin: -90px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(180,210,255,.6) 30%, transparent 68%); animation: rxBlast .5s ease-out forwards; }
.sc-ring { width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 3px solid #cfe2ff; box-shadow: 0 0 12px #8ab8ff; animation: rxRing .5s ease-out forwards; }
.sc-scorch { width: 80px; height: 26px; margin: -13px 0 0 -40px; border-radius: 50%; background: radial-gradient(ellipse, #0c0e14 0 34%, rgba(140,180,255,.7) 46%, rgba(30,40,70,.5) 60%, transparent 72%); animation: rxCool 2.4s ease-out forwards; }
.sc-spark { width: 3px; height: 10px; margin: -5px -1.5px; border-radius: 2px; background: #eaf2ff; box-shadow: 0 0 6px 2px rgba(150,190,255,.9); }

/* ---------- Eldritch blast ---------- */
.eb2-sigil { width: 84px; height: 84px; margin: -42px; filter: drop-shadow(0 0 6px #a070ff) drop-shadow(0 0 14px #6a2aff); animation: eb2Sigil 1.5s ease-out forwards; }
@keyframes eb2Sigil { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 22% { transform: scale(1.1) rotate(20deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 75% { opacity: 1; transform: rotate(40deg); } 100% { transform: scale(1.3) rotate(80deg); opacity: 0; } }
.eb2-beam .bg { stroke: rgba(150,80,255,.55); stroke-width: 16; filter: blur(5px); } .eb2-beam .bg.thin { stroke-width: 6; }
.eb2-beam .bm { stroke: #b06cff; stroke-width: 5; } .eb2-beam .bm.thin { stroke-width: 1.8; }
.eb2-beam .bc { stroke: #e2ffd8; stroke-width: 2; } .eb2-beam .bc.thin { stroke-width: .8; }
.eb2-beam .eb2-wisp { stroke: rgba(140,255,150,.6); stroke-width: 1.4; }
.eb2-beam.fade { transition: opacity .25s; opacity: 0; }
.fx .eb2-hit { width: 0; height: 0; }
.eb2-hit > * { position: absolute; left: 0; top: 0; }
.eb2-void { width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: radial-gradient(circle, #05000a 0 28%, rgba(110,30,190,.85) 48%, rgba(120,255,140,.25) 60%, transparent 70%); animation: eb2Void .9s ease-out forwards; }
@keyframes eb2Void { 0% { transform: scale(.2); opacity: 1; } 30% { transform: scale(1.15); } 100% { transform: scale(1.5); opacity: 0; } }
.eb2-ring { width: 26px; height: 26px; margin: -13px; border-radius: 50%; border: 2.5px solid #c08aff; box-shadow: 0 0 10px #8a4aff; animation: rxRing .5s ease-out forwards; }
.eb2-ring.two { border-color: #9aff8a; box-shadow: 0 0 10px #4aff6a; animation-delay: .08s; opacity: 0; }
.eb2-spark { width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #e6d4ff; box-shadow: 0 0 6px 2px rgba(170,110,255,.9); }
.eb2-spark.green { background: #dcffd4; box-shadow: 0 0 6px 2px rgba(110,255,130,.8); }
.eb2-tendril { width: 8px; height: 40px; margin: -40px 0 0 -4px; transform-origin: 50% 100%; transform: rotate(var(--r)) scaleY(0); filter: drop-shadow(0 0 4px #8a4aff); animation: eb2Tendril .9s ease-out forwards; }
@keyframes eb2Tendril { 0% { transform: rotate(var(--r)) scaleY(0); opacity: 1; } 35% { transform: rotate(calc(var(--r) + 12deg)) scaleY(1); } 65% { transform: rotate(calc(var(--r) - 10deg)) scaleY(.9); opacity: 1; } 100% { transform: rotate(var(--r)) scaleY(.4); opacity: 0; } }

/* ---------- Fireball ---------- */
.fb3-bead { width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #ffe08a 45%, #ff7a1f 70%, transparent 74%); box-shadow: 0 0 16px 6px rgba(255,140,40,.8); }
.fb3-trail { width: calc(18px - var(--g) * 2.5px); height: calc(18px - var(--g) * 2.5px); margin: calc(-9px + var(--g) * 1.25px); border-radius: 50%; background: radial-gradient(circle, #ffd27a, rgba(255,110,30,.6) 60%, transparent 72%); filter: blur(calc(var(--g) * .6px)); }
.fb3-suck { width: 150px; height: 150px; margin: -75px; border-radius: 50%; background: radial-gradient(circle, transparent 40%, rgba(255,150,60,.5) 58%, transparent 72%); animation: fb3Suck .14s ease-in forwards; }
@keyframes fb3Suck { from { transform: scale(1.4); opacity: 0; } to { transform: scale(.1); opacity: 1; } }
.fx .fb3-boom { width: 0; height: 0; }
.fb3-boom > * { position: absolute; left: 0; top: 0; }
.fb3-flash { width: 280px; height: 280px; margin: -140px; border-radius: 50%; background: radial-gradient(circle, #fff, #fff2b0 25%, rgba(255,170,60,.5) 45%, transparent 68%); animation: rxBlast .45s ease-out forwards; }
.fb3-core { width: 210px; height: 210px; margin: -105px; border-radius: 50%; background: radial-gradient(circle, #fff6d0 0 14%, #ffc23a 32%, #ff6a1f 52%, rgba(160,30,10,.7) 66%, transparent 72%); mix-blend-mode: screen; animation: fb3Core 1.3s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes fb3Core { 0% { transform: scale(.1); opacity: 1; filter: brightness(1.6); } 25% { transform: scale(1.1); opacity: 1; } 55% { transform: scale(1.2) translateY(-14px); opacity: .9; filter: brightness(1); } 100% { transform: scale(1.35) translateY(-40px); opacity: 0; filter: brightness(.4) saturate(.3); } }
.fb3-shock { width: 44px; height: 44px; margin: -22px; border-radius: 50%; border: 5px solid rgba(255,220,160,.9); box-shadow: 0 0 16px rgba(255,140,40,.8); animation: fb3Shock .7s ease-out forwards; }
@keyframes fb3Shock { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(9); opacity: 0; border-width: 1px; } }
.fb3-bend { width: 60px; height: 60px; margin: -30px; border-radius: 50%; -webkit-backdrop-filter: blur(3px) brightness(1.25); backdrop-filter: blur(3px) brightness(1.25);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 60%, #000 66%, transparent 74%); mask: radial-gradient(circle, transparent 52%, #000 60%, #000 66%, transparent 74%); animation: twBend .85s cubic-bezier(.1,.7,.3,1) forwards; }
.fb3-scorch { width: 170px; height: 58px; margin: -29px 0 0 -85px; animation-duration: 3s; }
.fb3-smoke { width: 50px; height: 50px; margin: -25px; background: radial-gradient(circle, rgba(56,48,44,.65), transparent 70%); }
.fx .rx.sc-bolt svg, .fx .rx.sc-arcs svg, .fx .rx.eb2-beam svg { width: auto; height: auto; }