/* ================= DM Tavern — the big effects pack =================
   Layers: chat dock 50, weather 40, darkness 57, countdown 59, modals 60, toasts 80, pets 145, trails 149,
   click effects 150, table effects 152-156, dice 158, dice labels 160, entrances and achievements 165. */

/* ---------- shared particle for the new click effects ---------- */
.fx .q { position: absolute; left: 0; top: 0; opacity: 0; transform: translate(-50%, -50%) scale(var(--s, 1)); animation: fxOut var(--t, .9s) ease-out var(--d, 0s) forwards; }
@keyframes fxOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * .5)) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(var(--s, 1)) rotate(var(--rot, 0deg)); }
}
.fx .ink-blot { position: absolute; width: 64px; height: 58px; margin: -29px -32px; background: radial-gradient(circle at 40% 40%, #1c1a2a, #06050a 70%); border-radius: 47% 53% 42% 58% / 55% 41% 59% 45%; transform: rotate(var(--r)); animation: inkSplat 1.9s ease-out forwards; }
@keyframes inkSplat { 0% { transform: rotate(var(--r)) scale(.15); opacity: 1; } 14% { transform: rotate(var(--r)) scale(1.15); } 24% { transform: rotate(var(--r)) scale(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--r)) scale(1.06); } }
.fx .ink-drop { width: 9px; height: 9px; border-radius: 50%; background: #0a0910; }
.fx .flake { color: #e6f4ff; font-size: 16px; text-shadow: 0 0 6px #9fd4ff; }
.fx .flake.small { font-size: 11px; }
.fx .heart { color: #ff6a9a; font-size: 18px; text-shadow: 0 0 8px rgba(255,90,150,.7); }
.fx .leaf2 { width: 16px; height: 16px; box-shadow: inset -1px -1px 2px rgba(0,0,0,.25); border-radius: 0 100% 0 100%; background: linear-gradient(135deg, hsl(calc(30deg + var(--h) * 1deg), 80%, 55%), hsl(calc(10deg + var(--h) * 1deg), 70%, 32%)); }
.fx .leaf2::after { content: ""; position: absolute; left: 15%; top: 50%; width: 70%; height: 1px; background: rgba(60,30,0,.45); transform: rotate(45deg); }
.fx .bubble { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid hsla(var(--h), 90%, 75%, .9); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), hsla(var(--h), 80%, 60%, .25) 40%, transparent 70%); }
.fx .candle-fx { position: absolute; left: -7px; top: -34px; width: 14px; height: 40px; animation: fadeOutLate 2.3s forwards; }
.candle-fx .wax { position: absolute; bottom: 0; left: 0; width: 14px; height: 26px; border-radius: 3px; background: linear-gradient(90deg, #e8dcc0, #fff6e0, #cbbd9a); }
.candle-fx .flame { position: absolute; left: 3px; bottom: 26px; width: 8px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff6c8, #ffb02e 50%, #ff5a1f); box-shadow: 0 0 12px 4px rgba(255,160,40,.6); animation: snuff 1.1s ease-in forwards; transform-origin: 50% 100%; }
@keyframes snuff { 0%, 60% { transform: scale(1) skewX(0); } 30% { transform: scale(1.1) skewX(6deg); } 100% { transform: scale(0); opacity: 0; } }
.candle-fx .smoke { position: absolute; left: 4px; bottom: 30px; width: 6px; height: 6px; border-radius: 50%; background: rgba(200,200,200,.5); filter: blur(2px); opacity: 0; animation: smokeUp 1.4s ease-out 1s forwards; }
.candle-fx .smoke.two { animation-delay: 1.2s; }
@keyframes smokeUp { 0% { opacity: .8; transform: none; } 100% { opacity: 0; transform: translate(10px, -60px) scale(4); } }
@keyframes fadeOutLate { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fx .coin-fx { position: absolute; left: 0; top: 0; }
.coin-fx .coin { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b03a 50%, #8a6414); border: 2px solid #ffe39a; color: #6a4a10; font-size: 15px; animation: coinFlip 1.1s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes coinFlip { 0% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-120px) rotateX(1080deg); } 100% { transform: translateY(0) rotateX(2160deg); } }
.coin-fx .coin-say { position: absolute; left: 0; top: 22px; transform: translateX(-50%); white-space: nowrap; font: 700 15px var(--display); color: #ffe39a; text-shadow: 0 2px 4px #000; opacity: 0; animation: fadeInOut 1s ease 1.1s forwards; }
@keyframes fadeInOut { 0% { opacity: 0; transform: translate(-50%, 6px); } 30%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.fx .missile { position: absolute; left: 0; top: 0; width: 26px; height: 6px; margin: -3px -13px; border-radius: 6px; background: linear-gradient(90deg, transparent, #c8a0ff 40%, #fff); box-shadow: 0 0 10px 3px rgba(170,120,255,.8); opacity: 0; animation: missileFly .45s ease-in var(--d) forwards; }
@keyframes missileFly { 0% { opacity: 1; transform: translate(var(--sx), var(--sy)) rotate(var(--ang)); } 100% { opacity: 1; transform: translate(0, 0) rotate(var(--ang)); } }
.fx .missile-hit { position: absolute; left: var(--x); top: var(--y); width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(170,120,255,.7) 40%, transparent 70%); opacity: 0; animation: blast .5s ease-out var(--d) forwards; }
.fx .sacred-col { position: absolute; left: -26px; bottom: 0; width: 52px; height: var(--h); background: linear-gradient(180deg, rgba(255,250,220,0), rgba(255,240,180,.85) 60%, #fff); filter: blur(2px); transform-origin: 50% 0; animation: sacredDrop 1.4s ease-out forwards; }
@keyframes sacredDrop { 0% { transform: scaleY(0); opacity: 1; } 25% { transform: scaleY(1); } 60% { opacity: 1; width: 52px; } 100% { opacity: 0; } }
.fx .sacred-base { position: absolute; width: 110px; height: 30px; margin: -15px -55px; border-radius: 50%; background: radial-gradient(ellipse, #fff, rgba(255,230,150,.6) 40%, transparent 70%); opacity: 0; animation: blast 1s ease-out .3s forwards; }
.fx .paw { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px; transform: rotate(var(--ang)); opacity: 0; animation: pawStep 2.2s ease var(--d) forwards; }
.paw i { position: absolute; width: 4px; height: 5px; border-radius: 50%; background: #6a4a2a; top: 0; }
.paw i:nth-child(1) { left: 0; top: 4px; } .paw i:nth-child(2) { left: 4px; } .paw i:nth-child(3) { left: 8px; } .paw i:nth-child(4) { left: 12px; top: 4px; }
.paw b { position: absolute; left: 3px; top: 8px; width: 10px; height: 8px; border-radius: 50% 50% 45% 45%; background: #6a4a2a; }
@keyframes pawStep { 0% { opacity: 0; } 10%, 60% { opacity: .9; } 100% { opacity: 0; } }
.fx .frost-ray { position: absolute; right: 0; top: -4px; width: var(--w); height: 8px; border-radius: 8px; background: linear-gradient(90deg, transparent, rgba(160,220,255,.4) 30%, #e6f6ff); box-shadow: 0 0 14px 4px rgba(140,210,255,.6); transform-origin: 100% 50%; animation: rayShoot 1s ease-out forwards; }
@keyframes rayShoot { 0% { transform: scaleX(0); opacity: 1; } 30% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.fx .frost-patch { position: absolute; width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: radial-gradient(circle, rgba(230,246,255,.8), rgba(160,215,255,.35) 50%, transparent 70%); opacity: 0; animation: blast 1.3s ease-out .3s forwards; }
.fx .thorn-whip { position: absolute; left: 0; top: -20px; width: 160px; height: 40px; transform: rotate(var(--rot)); transform-origin: 0 50%; }
.thorn-whip svg { width: 100%; height: 100%; animation: whip 1.2s ease-in-out forwards; transform-origin: 0 50%; }
@keyframes whip { 0% { transform: scaleX(0); } 35% { transform: scaleX(1) skewY(-6deg); } 55% { transform: scaleX(1.05) skewY(4deg); } 100% { transform: scaleX(0); opacity: .6; } }
.fx .wisp { position: absolute; left: -16px; top: -20px; width: 32px; height: 40px; animation: wispUp 2.6s ease-out forwards; }
@keyframes wispUp { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .95; transform: translate(0, -20px) scale(1); } 50% { transform: translate(calc(var(--x) * .5), -80px) scaleX(-1); } 70% { transform: translate(calc(var(--x) * .7), -100px) scaleX(1); } 100% { opacity: 0; transform: translate(var(--x), -160px) scale(1.1); } }
.fx .dagger-slash { position: absolute; width: 160px; height: 3px; margin: -1.5px 0 0 -80px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff 30%, #ffd0d0 70%, transparent); box-shadow: 0 0 8px rgba(255,80,80,.8); transform: rotate(var(--rot)) scaleX(0); animation: slashIn .3s ease-out var(--d, 0s) forwards; }
@keyframes slashIn { 0% { transform: rotate(var(--rot)) scaleX(0); opacity: 1; } 60% { transform: rotate(var(--rot)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--rot)) scaleX(1); opacity: 0; } }
.fx .slash-mark { position: absolute; width: 90px; height: 3px; margin: -1.5px 0 0 -45px; background: #6a0c08; border-radius: 3px; transform: rotate(var(--rot)); opacity: 0; animation: markFade 1.6s ease var(--d, 0s) forwards; }
@keyframes markFade { 0% { opacity: 0; } 20% { opacity: .85; } 70% { opacity: .85; } 100% { opacity: 0; } }
.fx .meteor { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, #ff7a1f 50%, #8a2010); box-shadow: 0 0 16px 6px rgba(255,120,30,.7), 30px -50px 30px 2px rgba(255,120,30,.3); opacity: 0; animation: meteorFall .5s ease-in var(--d) forwards; }
@keyframes meteorFall { 0% { opacity: 1; transform: translate(var(--sx), var(--sy)); } 99% { opacity: 1; transform: translate(var(--ex), var(--ey)); } 100% { opacity: 0; transform: translate(var(--ex), var(--ey)); } }
.fx .meteor-hit { position: absolute; left: var(--x); top: var(--y); width: 80px; height: 80px; margin: -40px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffb02e 30%, rgba(255,80,20,.5) 55%, transparent 70%); opacity: 0; animation: blast .7s ease-out var(--d) forwards; }
.fx .clock-fx { position: absolute; width: 90px; height: 90px; margin: -45px; border-radius: 50%; border: 3px solid rgba(230,220,190,.9); box-shadow: 0 0 20px rgba(230,220,190,.6), inset 0 0 20px rgba(230,220,190,.3); animation: clockRipple 1.7s ease-out forwards; }
.clock-fx i { position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; background: #f0e6c8; transform-origin: 50% 100%; border-radius: 2px; }
.clock-fx .h { height: 24px; animation: handBack 1.6s linear; } .clock-fx .m { height: 36px; width: 2px; animation: handBack .4s linear 4; }
@keyframes handBack { to { transform: rotate(-360deg); } }
@keyframes clockRipple { 0% { transform: scale(.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
body.time-stopped #app { filter: grayscale(1) contrast(1.1); transition: filter .15s; }
.fx .gcube { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 14px; background: linear-gradient(135deg, rgba(150,240,140,.45), rgba(60,160,70,.35)); border: 2px solid rgba(180,255,170,.6); box-shadow: inset 0 0 30px rgba(220,255,210,.4), 0 0 20px rgba(120,220,110,.3); animation: cubeSlide 3.2s ease-in-out forwards; }
.gcube .bones { position: absolute; left: 24px; top: 60px; width: 30px; height: 6px; background: #f0e8d8; border-radius: 4px; transform: rotate(-20deg); opacity: .7; }
.gcube .gulp { position: absolute; left: 54px; top: 54px; width: 12px; height: 12px; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 10px #ffd24a; opacity: 0; animation: gulp 3.2s forwards; }
@keyframes gulp { 0%, 38% { opacity: 0; } 42%, 70% { opacity: .9; transform: translate(0, 10px); } 100% { opacity: .9; transform: translate(0, 20px); } }
@keyframes cubeSlide { 0% { transform: translateX(var(--sx)) scale(1, 1); } 35% { transform: translateX(0) scale(1.05, .95); } 42% { transform: translateX(0) scale(.95, 1.06); } 50% { transform: translateX(0) scale(1.03, .97); } 62% { transform: translateX(0) scale(1); } 100% { transform: translateX(var(--ex)) scale(1); } }
.fx .gcube-spot { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 10px #ffd24a; animation: spotGone 3.2s forwards; }
@keyframes spotGone { 0%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes flap { to { transform: scaleY(.85); } }

/* ---------- names: effects, badges, streak flame ---------- */
.uname { display: inline; position: relative; }
/* a name effect wins over the shimmering Legend and Mythic name colours */
.pname .uname:not(.nfx-none) { -webkit-text-fill-color: currentColor; }
.pname .uname.nfx-sweep, .pname .uname.nfx-frost { -webkit-text-fill-color: transparent; }
.pname .uname.nfx-glitch span, .pname .uname.nfx-runes span, .pname .uname.nfx-float span, .pname .uname.nfx-ink span { -webkit-text-fill-color: currentColor; }
.ubadge { display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.12em; }
.ubadge svg, .ustreak svg { width: 100%; height: 100%; display: block; }
.ustreak { display: inline-flex; align-items: center; gap: 1px; margin-left: .35em; font: 700 .72em var(--body); color: #ffb060; vertical-align: .05em; }
.ustreak svg { width: .9em; height: 1.1em; }
.nfx-glow { text-shadow: 0 0 6px var(--c), 0 0 14px var(--c); }
.nfx-sweep { background: linear-gradient(100deg, currentColor 40%, #fff3c4 50%, currentColor 60%) 100% 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nameSweep 3.6s ease-in-out infinite; }
@keyframes nameSweep { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.nfx-candle { color: #ffd890; animation: candleName 2.4s infinite; }
@keyframes candleName { 0%, 100% { text-shadow: 0 0 4px rgba(255,170,60,.6); opacity: 1; } 20% { text-shadow: 0 0 8px rgba(255,170,60,.9); } 40% { opacity: .82; } 46% { opacity: 1; } 70% { text-shadow: 0 0 3px rgba(255,170,60,.4); } }
.nfx-runes span, .nfx-float span, .nfx-ink span, .nfx-glitch span { display: inline-block; position: relative; }
.nfx-runes span { animation: runeHide 7s infinite calc(var(--i) * .12s); }
.nfx-runes span::after { content: attr(data-r); position: absolute; left: 0; top: 0; color: #b89aff; text-shadow: 0 0 6px #8a5aff; opacity: 0; animation: runeShow 7s infinite calc(var(--i) * .12s); }
@keyframes runeHide { 0%, 70%, 86%, 100% { color: inherit; } 74%, 82% { color: transparent; } }
@keyframes runeShow { 0%, 70%, 86%, 100% { opacity: 0; } 74%, 82% { opacity: 1; } }
.nfx-ink span { animation: inkIn .5s ease-out calc(var(--i) * .07s) backwards; }
@keyframes inkIn { from { opacity: 0; filter: blur(3px); transform: translateY(2px) scale(1.3); color: #1a1430; } }
.nfx-frost { color: #dff2ff; background: linear-gradient(110deg, #dff2ff 30%, #ffffff 45%, #9fd4ff 55%, #dff2ff 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(150,210,255,.6)); animation: frostName 6s ease-in-out infinite; }
@keyframes frostName { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.nfx-float span { animation: bob 2.4s ease-in-out infinite calc(var(--i) * .14s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.nfx-drip { color: #a8e070; text-shadow: 0 1px 0 #3a6a1a; }
.nfx-drip::before, .nfx-drip::after { content: ""; position: absolute; top: 85%; width: 4px; height: 6px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: #8ad050; animation: drip 2.8s ease-in infinite; }
.nfx-drip::before { left: 25%; } .nfx-drip::after { left: 70%; animation-delay: 1.3s; }
@keyframes drip { 0% { transform: translateY(-4px) scaleY(.5); opacity: 0; } 20% { opacity: 1; transform: translateY(0) scaleY(1); } 60% { transform: translateY(0) scaleY(1.4); } 100% { transform: translateY(14px); opacity: 0; } }
.nfx-glitch span { animation: glitch 3.2s steps(1) infinite calc(var(--i) * .09s); }
@keyframes glitch { 0%, 88%, 100% { transform: none; color: inherit; text-shadow: none; } 90% { transform: translate(-1px, 1px); color: #0ff0d0; text-shadow: 2px 0 #ff3ad9; } 93% { transform: translate(1px, -1px); color: #ff3ad9; text-shadow: -2px 0 #0ff0d0; } 96% { transform: skewX(12deg); color: #b89aff; } }

/* ---------- shop and profile previews ---------- */
.name-sample { font: 700 18px var(--display); }
.emote-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 150px; }
.emote { display: inline-block; width: 26px; height: 26px; vertical-align: middle; }
.emote svg { width: 100%; height: 100%; display: block; }
.emote-row .emote { width: 30px; height: 30px; }
.emote.anim .em-l, .emote-row.anim .em-l { animation: clinkL 1.4s ease-in-out infinite; transform-origin: 9px 30px; }
.emote.anim .em-r, .emote-row.anim .em-r { animation: clinkR 1.4s ease-in-out infinite; transform-origin: 31px 30px; }
.emote.anim .em-spark, .emote-row.anim .em-spark { animation: sparkPop 1.4s infinite; }
@keyframes clinkL { 0%, 100% { transform: rotate(0); } 45% { transform: translateX(4px) rotate(18deg); } }
@keyframes clinkR { 0%, 100% { transform: rotate(0); } 45% { transform: translateX(-4px) rotate(-18deg); } }
@keyframes sparkPop { 0%, 40%, 70%, 100% { opacity: 0; } 48%, 60% { opacity: 1; } }
.emote.anim .em-dance, .emote-row.anim .em-dance { animation: dance .8s ease-in-out infinite alternate; transform-origin: 20px 36px; }
@keyframes dance { from { transform: rotate(-12deg); } to { transform: rotate(12deg) translateY(-2px); } }
.emote.anim .em-spin, .emote-row.anim .em-spin { animation: spin 1.6s linear infinite; transform-origin: 20px 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
.emote.anim .em-pulse, .emote-row.anim .em-pulse { animation: pulse 1s ease-in-out infinite; transform-origin: 20px 20px; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.emote.anim .em-float, .emote-row.anim .em-float { animation: floaty 1.6s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-3px); } }
.cursor-sample { display: grid; place-items: center; gap: 4px; width: 110px; height: 70px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.cursor-sample svg { width: 28px; height: 28px; }
.trail-sample { display: grid; place-items: center; width: 130px; height: 70px; border: 1px dashed var(--line-strong); border-radius: 8px; text-align: center; }
.pet-sample svg { width: 58px; height: 50px; animation: floaty 2s ease-in-out infinite; }
.msg-sample { padding: 8px 12px; font-size: 14px; max-width: 180px; }
.amb-sample { position: relative; overflow: hidden; }

/* ---------- chat styles (also used in the chat) ---------- */
.bub-plain { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.bub-parchment { background: linear-gradient(135deg, #e9dcbc, #d8c59a); color: #3a2a14; border-radius: 4px; box-shadow: inset 0 0 12px rgba(120,80,30,.35); }
.bub-scroll { background: linear-gradient(180deg, #efe2c2, #dcc79a); color: #3a2a14; border-radius: 2px; position: relative; box-shadow: -6px 0 0 -2px #b89a64, 6px 0 0 -2px #b89a64; }
.bub-stone { background: linear-gradient(135deg, #6a6a72, #44444c); color: #eceaf0; border-radius: 6px; border: 1px solid #2a2a30; text-shadow: 0 -1px 0 #000; box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
.bub-ice { background: linear-gradient(135deg, rgba(220,240,255,.95), rgba(160,210,245,.85)); color: #0a2a48; border-radius: 10px; border: 1px solid #fff; box-shadow: 0 0 10px rgba(150,210,255,.4); }
.bub-menu { background: #1e2a22; color: #f0f0e8; border: 4px solid #6a4a2a; border-radius: 4px; font-family: "MedievalSharp", var(--body); }
.bub-parchment .dim, .bub-scroll .dim, .bub-ice .dim { color: rgba(40,30,20,.6); }

/* ---------- card ambience ---------- */
.amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; border-radius: inherit; }
.amb-dust i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: rgba(255,240,200,.75); box-shadow: 0 0 4px rgba(255,230,170,.8); animation: dustDrift calc(9s + var(--i) * .4s) ease-in-out infinite alternate; }
@keyframes dustDrift { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: .9; } 100% { transform: translate(30px, -26px); opacity: .3; } }
.amb-rain i { position: absolute; left: var(--x); top: -10%; width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(transparent, rgba(190,220,255,.6)); animation: rainRun calc(1.6s + var(--i) * .13s) linear infinite calc(var(--i) * -.37s); }
@keyframes rainRun { 0% { transform: translateY(0); } 100% { transform: translateY(700px); } }
.amb-fog i { position: absolute; left: -50%; bottom: -10px; width: 200%; height: 90px; background: radial-gradient(ellipse at 30% 60%, rgba(220,220,230,.22), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(220,220,230,.18), transparent 60%); animation: fogDrift 18s linear infinite alternate; }
.amb-fog i + i { bottom: 20px; opacity: .7; animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes fogDrift { to { transform: translateX(25%); } }

/* ---------- the three new banners ---------- */
.sb-parallax, .sb-daynight, .sb-lair { position: relative; overflow: hidden; }
.sb-parallax svg, .sb-daynight svg, .sb-lair svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb-parallax .px1, .sb-parallax .px2, .sb-parallax .px3 { transition: transform .25s ease-out; }
.sb-parallax .px1 { transform: translateX(calc(var(--mx, 0) * -6px)); }
.sb-parallax .px2 { transform: translateX(calc(var(--mx, 0) * -14px)); }
.sb-parallax .px3 { transform: translateX(calc(var(--mx, 0) * -26px)); }
.sb-daynight .sky { fill: #7ab8e8; } .sb-daynight .orb { fill: #fff3b0; } .sb-daynight .hill1 { fill: #5a9a4a; } .sb-daynight .hill2 { fill: #3a7a34; } .sb-daynight .village { fill: #6a4a30; } .sb-daynight .stars { opacity: 0; } .sb-daynight .win { fill: #3a2a1a; }
.sb-daynight.ph-dusk .sky { fill: url(#none); fill: #d8805a; } .sb-daynight.ph-dusk .orb { fill: #ffb060; } .sb-daynight.ph-dusk .hill1 { fill: #6a4a5a; } .sb-daynight.ph-dusk .hill2 { fill: #4a3048; } .sb-daynight.ph-dusk .win { fill: #ffd27a; } .sb-daynight.ph-dusk .stars { opacity: .3; }
.sb-daynight.ph-night .sky { fill: #101830; } .sb-daynight.ph-night .orb { fill: #e8ecf8; } .sb-daynight.ph-night .hill1 { fill: #1c2a30; } .sb-daynight.ph-night .hill2 { fill: #121c20; } .sb-daynight.ph-night .village { fill: #0c1012; } .sb-daynight.ph-night .win { fill: #ffd27a; } .sb-daynight.ph-night .stars { opacity: 1; }
.sb-lair [data-lair-part] { cursor: pointer; }
.sb-lair .glow { transition: fill .4s; } .sb-lair.lit .glow { fill: #ffd27a; } .sb-lair.lit .lair-lantern rect:first-of-type { filter: drop-shadow(0 0 12px #ffb040); }
.sb-lair.lit .hoard circle { filter: brightness(1.35); }
.sb-lair.ring .bellb { animation: bellRing .9s ease-in-out; transform-origin: 530px 52px; }
@keyframes bellRing { 20% { transform: rotate(22deg); } 45% { transform: rotate(-16deg); } 70% { transform: rotate(8deg); } }
.sb-lair .lid { opacity: 0; } .sb-lair .eye { opacity: 0; } .sb-lair .zz { animation: zz 3s ease-in-out infinite; }
.sb-lair.wake .eye { animation: eyeOpen 2.6s forwards; } .sb-lair.wake .zz { animation: none; opacity: 0; }
.sb-lair.wake .lair-dragon { animation: stir 2.6s; transform-origin: 340px 160px; }
@keyframes eyeOpen { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stir { 20% { transform: translateY(-4px); } 40% { transform: none; } }
@keyframes zz { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-6px); } }
.lair-hint { position: absolute; left: 10px; bottom: 6px; font-size: 11px; color: rgba(230,210,170,.55); pointer-events: none; }
.mini-banner .lair-hint { display: none; }

/* ---------- cursor trails and pets ---------- */
#trail-layer { position: fixed; inset: 0; pointer-events: none; z-index: 149; }
.tr { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; animation: trailFade .9s ease-out forwards; }
@keyframes trailFade { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.tr-sparks { background: #ffe39a; box-shadow: 0 0 6px #ffc040; }
.tr-embers { background: #ff8a2e; box-shadow: 0 0 8px #ff5a1f; }
.tr-snow { width: auto; height: auto; background: none; color: #e6f4ff; font-size: 10px; }
.tr-fairy { background: hsl(calc(var(--h, 300) * 1deg), 90%, 75%); box-shadow: 0 0 8px #ff9ae8, 0 0 4px #9ae8ff; }
.tr-fairy:nth-child(odd) { background: #9ae8ff; }
.pet { position: fixed; left: 0; top: 0; z-index: 145; pointer-events: none; width: 48px; height: 42px; margin: -21px -24px; }
.pet .pet-body { width: 100%; height: 100%; transition: transform .2s; }
.pet svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.pet.follow:not(.idle) svg { animation: petBob .35s ease-in-out infinite alternate; }
.pet.idle svg { animation: floaty 2.4s ease-in-out infinite; }
@keyframes petBob { to { transform: translateY(-3px); } }
.pet.wander.walking svg { animation: petBob .25s ease-in-out infinite alternate; }
.pet.asleep svg { transform: rotate(8deg) scaleY(.9); opacity: .9; }
.pet.asleep .pet-say::before { content: "z z"; }
.pet-say { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font: 700 13px var(--display); color: #ffe39a; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.pet.cheer svg { animation: petJump .4s ease-out 4 alternate; }
@keyframes petJump { to { transform: translateY(-22px); } }
.pet.sad svg { animation: none; transform: scaleY(.85) translateY(4px); filter: grayscale(.5); }
.pet-drake .wing { animation: flap .3s ease-in-out infinite alternate; transform-origin: 20px 16px; }

/* ---------- entrances ---------- */
.entrance { position: fixed; left: 50%; top: 16%; z-index: 165; transform: translateX(-50%); pointer-events: none; transition: opacity .5s, transform .5s; text-align: center; }
.entrance.out { opacity: 0; transform: translate(-50%, -12px); }
.ent-who { display: grid; place-items: center; animation: entPop .6s cubic-bezier(.3,1.5,.5,1) both; }
.ent-line { margin-top: 10px; font: 700 22px var(--display); color: #ffe39a; text-shadow: 0 2px 8px #000, 0 0 16px rgba(255,180,60,.5); white-space: nowrap; animation: fadeUp .5s ease-out both; }
@keyframes entPop { from { opacity: 0; transform: scale(.3); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.ent-note { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid #c9a45c; border-radius: 30px; background: linear-gradient(180deg, #2a2016, #16110c); box-shadow: 0 0 24px rgba(201,164,92,.35); font: 700 17px var(--display); color: #ffe39a; animation: fadeUp .4s ease-out both; }
.ent-door { position: relative; width: 140px; height: 190px; margin: 0 auto; perspective: 500px; }
.ent-door .frame { position: absolute; inset: 0; border: 8px solid #4a2c14; border-bottom: 0; border-radius: 70px 70px 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,200,110,.85), rgba(120,70,20,.6) 70%); }
.ent-door .leaf { position: absolute; inset: 8px 8px 0; border-radius: 62px 62px 0 0; background: repeating-linear-gradient(90deg, #7a4a22 0 18px, #6a3e1a 18px 20px); transform-origin: 0 50%; animation: doorOpen 1.2s ease-in-out .2s forwards; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
@keyframes doorOpen { to { transform: rotateY(-105deg); } }
.ent-door .ent-who { position: absolute; left: 0; right: 0; top: 50px; animation-delay: .9s; }
.ent-door .ent-line { position: absolute; left: 50%; top: 200px; transform: translateX(-50%); animation-delay: 1s; }
.ent-circle { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.ent-circle svg { position: absolute; inset: 0; animation: spin 6s linear infinite, entPop .6s ease-out both; filter: drop-shadow(0 0 8px #6ab8ff); }
.ent-circle .ent-who { position: absolute; inset: 0; animation-delay: .5s; }
.ent-circle .ent-line { position: absolute; left: 50%; top: 210px; transform: translateX(-50%); animation-delay: .7s; }
.ent-circle::after { content: ""; position: absolute; inset: 40px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(160,210,255,.6) 40%, transparent 70%); opacity: 0; animation: blast .7s ease-out .4s; }
.ent-smoke { position: relative; width: 200px; height: 160px; margin: 0 auto; }
.ent-smoke i { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(200,200,210,.9), rgba(120,120,130,.5) 60%, transparent 70%); filter: blur(3px); animation: puff 2s ease-out calc(var(--i) * .03s) forwards; }
@keyframes puff { 0% { transform: scale(.2); opacity: 1; } 30% { transform: translate(calc(var(--x) * .6), calc(var(--y) * .6)) scale(1.6); opacity: .95; } 100% { transform: translate(var(--x), var(--y)) scale(2.6); opacity: 0; } }
.ent-smoke .ent-who { position: absolute; inset: 20px 0 auto; animation-delay: .5s; }
.ent-smoke .ent-line { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); animation-delay: .7s; }
.entrance.entr-fanfare { top: 0; width: min(760px, 100vw); }
.ent-fanfare { position: relative; overflow: hidden; border-radius: 0 0 14px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.7); border: 1px solid #c9a45c; border-top: 0; transform-origin: 50% 0; animation: unroll .9s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes unroll { from { transform: scaleY(0); } }
.ent-banner { height: 120px; }
.ent-fan-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: linear-gradient(transparent, rgba(0,0,0,.75)); text-align: left; }
.ent-fan-body .ent-line { margin: 0; }

/* ---------- milestones ---------- */
.ach-toast { position: fixed; left: 50%; bottom: 28px; z-index: 165; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; transform: translateX(-50%); border: 1px solid #c9a45c; border-radius: 12px; background: linear-gradient(180deg, #2a2016, #14100c); box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 30px rgba(201,164,92,.25); animation: achIn .5s cubic-bezier(.3,1.4,.5,1) both; transition: opacity .5s, transform .5s; max-width: calc(100vw - 32px); }
.ach-toast.out { opacity: 0; transform: translate(-50%, 16px); }
@keyframes achIn { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }
.ach-medal { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #4a3a1a, #1a140a); border: 2px solid #e8c070; }
.ach-medal svg { width: 26px; height: 26px; }
.ach-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ach-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.ach-chip { padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 20px; font-size: 12px; color: var(--gold-2); background: rgba(201,164,92,.08); }
.memorial { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.mem-candle { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, rgba(40,30,20,.6), rgba(20,16,12,.6)); }
.mem-candle { position: relative; padding-left: 34px; }
.mem-candle .wax { position: absolute; left: 14px; bottom: 12px; width: 10px; height: 22px; border-radius: 2px; background: linear-gradient(90deg, #e8dcc0, #fff6e0, #cbbd9a); }
.mem-candle .flame { position: absolute; left: 15px; bottom: 34px; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff6c8, #ffb02e 50%, #ff5a1f); box-shadow: 0 0 14px 4px rgba(255,160,40,.45); animation: candleFlick 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes candleFlick { 0%, 100% { transform: scale(1) skewX(0); } 30% { transform: scale(1.08, .94) skewX(4deg); } 60% { transform: scale(.95, 1.06) skewX(-3deg); } }
.fireworks { position: fixed; inset: 0; z-index: 152; pointer-events: none; }
.fw { position: absolute; width: 0; height: 0; }
.fw i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: hsl(var(--h), 100%, 65%); box-shadow: 0 0 8px hsl(var(--h), 100%, 60%); opacity: 0; animation: fwBurst 1.6s ease-out var(--d) forwards; }
@keyframes fwBurst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)) scale(.4); } }
.fw-text { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font: 800 clamp(22px, 4vw, 40px) var(--display); color: #ffe39a; text-shadow: 0 3px 12px #000, 0 0 24px rgba(255,180,60,.6); text-align: center; animation: fadeInOut 5.4s ease both; }

/* ---------- DM table effects ---------- */
.tfx { position: fixed; inset: 0; z-index: 152; pointer-events: none; transition: opacity .5s; }
.tfx.out { opacity: 0; }
.tfx-tint { animation: fadeIn .4s; }
.tint-red { background: radial-gradient(ellipse, rgba(200,20,10,.12), rgba(160,10,0,.4)); animation: alarm 1s ease-in-out infinite alternate; }
.tint-green { background: radial-gradient(ellipse, rgba(60,200,40,.1), rgba(40,140,20,.42)); }
.tint-blue { background: radial-gradient(ellipse, rgba(120,190,255,.1), rgba(60,120,220,.42)); }
.tint-purple { background: radial-gradient(ellipse, rgba(170,90,255,.1), rgba(110,40,200,.42)); }
@keyframes alarm { from { opacity: .55; } to { opacity: 1; } }
.tfx-lightning { background: #eef4ff; animation: lightning 1.2s forwards; }
@keyframes lightning { 0% { opacity: 0; } 5% { opacity: .9; } 10% { opacity: 0; } 18% { opacity: .7; } 24%, 100% { opacity: 0; } }
.tfx-fog i { position: absolute; inset: -20%; background: radial-gradient(ellipse at center, transparent 30%, rgba(200,205,215,.65) 70%); animation: fogIn 14s ease-in forwards; }
.tfx-fog i:nth-child(2) { animation-delay: 1.5s; filter: blur(10px); opacity: 0; }
.tfx-fog i:nth-child(3) { animation-delay: 3s; opacity: 0; transform: scale(1.3); }
@keyframes fogIn { 0% { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(.85); } }
.tfx-down i { position: absolute; width: 50vmin; height: 50vmin; background: radial-gradient(circle at 30% 30%, rgba(140,0,0,.85), rgba(90,0,0,.6) 30%, transparent 60%); border-radius: 43% 57% 51% 49% / 46% 39% 61% 54%; animation: splat .5s cubic-bezier(.3,1.5,.5,1) both; }
.tfx-down i:nth-child(1) { left: -18vmin; top: -18vmin; } .tfx-down i:nth-child(2) { right: -20vmin; top: -10vmin; animation-delay: .1s; } .tfx-down i:nth-child(3) { left: -16vmin; bottom: -20vmin; animation-delay: .2s; } .tfx-down i:nth-child(4) { right: -18vmin; bottom: -16vmin; animation-delay: .15s; }
@keyframes splat { from { transform: scale(.2); opacity: 0; } }
.tfx-down-text, .tfx-init-text { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 800 clamp(28px, 6vw, 64px) var(--display); white-space: nowrap; letter-spacing: .04em; }
.tfx-down-text { color: #ffd0c8; text-shadow: 0 0 20px #8a0000, 0 4px 0 #3a0000; animation: fadeUp .5s .3s both; }
.tfx-init { background: radial-gradient(ellipse, rgba(80,0,0,.2), rgba(0,0,0,.55)); }
.tfx-init-text { color: #ffe39a; text-shadow: 0 0 24px rgba(255,140,40,.8), 0 5px 0 #6a1a0a; animation: slam .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes slam { from { transform: translate(-50%, -50%) scale(3) rotate(-6deg); opacity: 0; } }
.tfx-level { display: grid; place-items: center; background: radial-gradient(circle, rgba(255,210,90,.18), rgba(0,0,0,.5) 70%); }
.tfx-level-burst { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax; background: repeating-conic-gradient(from 0deg, rgba(255,220,120,.18) 0 6deg, transparent 6deg 18deg); animation: spin 12s linear infinite, fadeIn .6s; }
.tfx-level-card { position: relative; min-width: 260px; padding: 20px 26px; border: 2px solid #e8c070; border-radius: 14px; background: linear-gradient(180deg, #2a2016, #120e0a); box-shadow: 0 0 60px rgba(255,200,80,.5); animation: entPop .6s cubic-bezier(.3,1.5,.5,1) both; }
.tfx-level-h { font: 800 30px var(--display); color: #ffe39a; text-align: center; margin-bottom: 10px; text-shadow: 0 0 16px rgba(255,180,60,.7); }
.tfx-level-row { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; border-top: 1px solid rgba(232,192,112,.2); font-size: 16px; }
.tfx-level-row span { color: #ffe39a; font-family: var(--display); }
.tfx-boss { display: grid; place-items: center; background: rgba(0,0,0,.6); }
.tfx-boss-card { position: relative; display: flex; align-items: center; gap: 24px; width: min(760px, 92vw); padding: 24px; border-top: 3px solid var(--bc); border-bottom: 3px solid var(--bc); background: linear-gradient(90deg, transparent, rgba(10,6,6,.95) 15%, rgba(10,6,6,.95) 85%, transparent); animation: bossIn .7s cubic-bezier(.2,1,.3,1) both; }
.boss-red { --bc: #c8281e; } .boss-purple { --bc: #9a5aff; } .boss-green { --bc: #6ac83a; } .boss-gold { --bc: #e8c070; }
@keyframes bossIn { from { transform: translateX(-120vw) skewX(-20deg); } }
.tfx-boss-card img, .tfx-boss-sil { width: 180px; height: 180px; flex: none; object-fit: cover; border-radius: 8px; border: 2px solid var(--bc); box-shadow: 0 0 30px var(--bc); animation: bossArt 1s .3s both; }
.tfx-boss-sil { display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 40%, #000), #000); }
.tfx-boss-sil svg { width: 96%; }
@keyframes bossArt { from { opacity: 0; transform: scale(1.3); } }
.tfx-boss-name { font: 800 clamp(28px, 5vw, 52px) var(--display); color: #fff; text-shadow: 0 0 20px var(--bc), 0 4px 0 #000; line-height: 1.05; animation: fadeUp .5s .5s both; }
.tfx-boss-title { margin-top: 6px; font: italic 600 18px var(--body); color: var(--bc); letter-spacing: .06em; animation: fadeUp .5s .8s both; }
.tfx-emote { display: grid; place-items: center; }
.tfx-emote-art { width: min(40vmin, 300px); height: min(40vmin, 300px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); animation: emoteBig 3s cubic-bezier(.3,1.4,.5,1) both; }
.tfx-emote-from { position: absolute; left: 50%; top: calc(50% + min(22vmin, 170px)); transform: translateX(-50%); font: 700 18px var(--display); color: #ffe39a; text-shadow: 0 2px 6px #000; }
@keyframes emoteBig { 0% { transform: scale(0) rotate(-20deg); } 20% { transform: scale(1.1) rotate(4deg); } 30%, 80% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.tfx-boom { background: radial-gradient(circle, #fff, #ffb02e 20%, rgba(255,60,20,.6) 45%, transparent 70%); animation: blast 1.2s ease-out forwards; }
.tfx-fade { background: #000; animation: fadeBlack 2.4s ease forwards; }
@keyframes fadeBlack { 0% { opacity: 0; } 40%, 70% { opacity: .92; } 100% { opacity: 0; } }

/* lasting effects */
.lasting { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.sw { position: absolute; inset: 0; overflow: hidden; }
.sw i { position: absolute; left: var(--x); top: -5%; }
.sw-rain i { width: 1.5px; height: 18px; background: linear-gradient(transparent, rgba(180,210,255,.7)); animation: swFall .7s linear infinite var(--d); }
.sw-snow i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.85); animation: swFall 7s linear infinite calc(var(--d) * 2.3); }
.sw-ash i { width: 4px; height: 4px; border-radius: 1px; background: rgba(120,110,100,.8); box-shadow: 0 0 3px rgba(255,120,40,.4); animation: swFall 9s linear infinite calc(var(--d) * 3); }
.sw-sand { background: linear-gradient(100deg, rgba(200,160,90,.18), rgba(180,140,70,.3)); }
.sw-sand i { left: -40%; top: calc(var(--i) * 10%); width: 60%; height: 30px; background: linear-gradient(90deg, transparent, rgba(220,180,110,.35), transparent); filter: blur(4px); animation: sandBlow 2.4s linear infinite var(--d); }
@keyframes swFall { to { transform: translate(-40px, 110vh); } }
@keyframes sandBlow { to { transform: translateX(240%); } }
.darkness { position: absolute; inset: 0; z-index: 17; background: radial-gradient(circle 110px at var(--px, 50%) var(--py, 50%), transparent 0, rgba(0,0,0,.6) 60%, #000 100%); }
.darkness.dm { opacity: .55; }
.darkness-note { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 20px; background: rgba(0,0,0,.8); border: 1px solid var(--line-strong); font-size: 12px; color: var(--muted); }
.lasting:has(.darkness:not(.dm)) { z-index: 57; }
.countdown { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 19; min-width: 170px; padding: 8px 18px; text-align: center; border: 1px solid #c9a45c; border-radius: 12px; background: rgba(16,12,10,.92); box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.lasting:has(.countdown) { z-index: 59; }
.cd-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.cd-time { font: 700 30px var(--display); color: #ffe39a; font-variant-numeric: tabular-nums; }
.countdown.urgent .cd-time { color: #ff6a5a; animation: pulse .5s ease-in-out infinite; }
.countdown.done .cd-time { color: var(--muted); font-size: 20px; }

/* ---------- natural 20 / natural 1 moments ---------- */
.mo { position: fixed; width: 0; height: 0; inset: auto; }
.mo-edge { box-shadow: inset 0 0 0 6px rgba(255,215,90,.9), inset 0 0 80px 30px rgba(255,200,60,.55); animation: edgeFlash 1.6s ease-out forwards; }
@keyframes edgeFlash { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .5; } 45% { opacity: 1; } 100% { opacity: 0; } }
.mo-stamp { position: absolute; left: calc(100% - 20px); width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d8302a, #8a0c08 70%); border: 3px solid #6a0806; box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,120,100,.35); font: 900 18px var(--display); color: #ffd8c8; letter-spacing: .06em; transform: rotate(-14deg); animation: stampDown .35s cubic-bezier(.5,0,.8,.4) both; }
@keyframes stampDown { from { transform: scale(3) rotate(-30deg); opacity: 0; } }
.mo-confetti i { position: absolute; bottom: -10px; width: 8px; height: 12px; background: hsl(var(--h), 90%, 60%); opacity: 0; animation: confetti 2.4s cubic-bezier(.2,.7,.4,1) var(--d) forwards; }
.mo-confetti i.l { left: 0; } .mo-confetti i.r { right: 0; }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)); } }
.d3.mo-burst .d3-anim { animation: dieBurst 1.2s ease-out; }
@keyframes dieBurst { 0% { filter: brightness(1); transform: scale(1); } 20% { filter: brightness(3) drop-shadow(0 0 20px #fff); transform: scale(1.4); opacity: .3; } 50% { transform: scale(.8); opacity: 1; filter: brightness(1.6); } 100% { transform: scale(1); } }
.mo-sparks i { position: absolute; left: 30px; top: 30px; width: 5px; height: 5px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 8px #ffd24a; animation: burst .9s ease-out forwards; }
.mo-spot { background: radial-gradient(circle 140px at var(--sx) var(--sy), transparent 0, transparent 60%, rgba(0,0,0,.82) 100%); animation: fadeIn .4s; }
.dice-throw.spotlit { z-index: 161; }
.dice-throw.spotlit .dt-label { box-shadow: 0 0 30px rgba(255,230,150,.6); }
.mo-crowd { overflow: hidden; }
.mo-crowd i { position: absolute; bottom: -8px; left: calc(var(--i) * 4.6%); width: 4.4%; height: var(--h); border-radius: 50% 50% 0 0; background: #0a0808; animation: crowdIn .5s ease-out both; }
.mo-crowd i::before { content: ""; position: absolute; left: 22%; top: -46%; width: 56%; height: 52%; border-radius: 50%; background: #0a0808; }
.mo-crowd.cheer i { animation: crowdIn .5s ease-out both, crowdJump .45s ease-in-out .5s 5 alternate var(--d); }
.mo-crowd.boo i { animation: crowdIn .5s ease-out both, crowdShake .3s ease-in-out .5s 6 alternate; }
@keyframes crowdIn { from { transform: translateY(100%); } }
@keyframes crowdJump { to { transform: translateY(-16px); } }
@keyframes crowdShake { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.crowd-say { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); font: 800 34px var(--display); color: #ffe39a; text-shadow: 0 3px 8px #000; animation: slam .5s .4s cubic-bezier(.3,1.6,.5,1) both; }
.tomato { position: absolute; left: 50%; bottom: 0; width: 18px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a6a, #c8180e 60%); opacity: 0; animation: tomato 1s cubic-bezier(.3,.1,.6,1) var(--d) forwards; }
@keyframes tomato { 0% { opacity: 1; transform: translate(var(--sx), 0); } 90% { opacity: 1; transform: translate(var(--ex), var(--ey)) scale(1); } 100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(2.4, .5); } }
.mo-roar .roar-head { position: absolute; left: 50%; bottom: -10px; width: min(70vw, 520px); transform: translateX(-50%); animation: roarRise 3.2s ease forwards; }
.mo-roar .roar-head svg { width: 100%; filter: drop-shadow(0 0 30px rgba(255,80,20,.6)); }
@keyframes roarRise { 0% { transform: translate(-50%, 100%); } 20%, 80% { transform: translate(-50%, 20%); } 100% { transform: translate(-50%, 100%); } }
.mo-roar .roar-fire { position: absolute; left: 0; right: 0; height: 120px; margin-top: -60px; background: linear-gradient(90deg, transparent, rgba(255,140,30,.85) 20%, rgba(255,220,120,.95) 50%, rgba(255,90,20,.85) 80%, transparent); filter: blur(6px); transform-origin: 50% 50%; opacity: 0; animation: fireSweep 1.6s ease-out .7s forwards; }
@keyframes fireSweep { 0% { opacity: 0; transform: scaleX(0) scaleY(.4); } 25% { opacity: 1; transform: scaleX(1) scaleY(1); } 100% { opacity: 0; transform: scaleX(1.2) scaleY(1.6); } }
.mo-tomb { display: block; }
.tomb { position: absolute; left: 0; top: -30px; width: 66px; height: 80px; padding-top: 10px; text-align: center; border-radius: 30px 30px 4px 4px; background: linear-gradient(180deg, #8a8a92, #55555c); border: 2px solid #3a3a40; box-shadow: 0 6px 10px rgba(0,0,0,.6); animation: tombRise .8s cubic-bezier(.3,1.3,.5,1) both; }
.tomb span { display: block; font: 800 15px var(--display); color: #2a2a30; }
.tomb b { display: block; font-size: 10px; color: #1e1e22; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
@keyframes tombRise { from { transform: translateY(40px) scaleY(0); opacity: 0; } }
.mo-sweat i { position: absolute; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: linear-gradient(#cfeaff, #6ab0f0); opacity: 0; animation: sweat 1.4s ease-in forwards; }
.mo-sweat i:nth-child(2) { left: 10px; animation-delay: .5s; } .mo-sweat i:nth-child(3) { left: -8px; animation-delay: .9s; }
@keyframes sweat { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }
.mo-crack svg path { fill: none; stroke: rgba(230,240,255,.9); stroke-width: 2; filter: drop-shadow(0 0 2px #000); stroke-dasharray: 800; stroke-dashoffset: 800; animation: crackDraw .5s ease-out forwards; }
@keyframes crackDraw { to { stroke-dashoffset: 0; } }
.mo-kraken { right: auto; inset: auto auto 0 auto; bottom: 0; width: 60px; transform-origin: 50% 100%; animation: krakenReach 3.2s ease forwards; }
.mo-kraken svg { width: 100%; height: 100%; }
@keyframes krakenReach { 0% { transform: scaleY(0); } 30%, 40% { transform: scaleY(1); } 70% { transform: translateY(70%); } 100% { transform: translateY(110%); } }

/* ---------- dice extras ---------- */
.d3-trail { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--d3-glow); box-shadow: 0 0 12px var(--d3-glow); opacity: .8; animation: trailDot .65s ease-out forwards; pointer-events: none; }
@keyframes trailDot { to { opacity: 0; transform: var(--t, none) scale(.2); } }
.d3.streak .d3-anim { filter: drop-shadow(0 0 4px #ff7a1f) drop-shadow(0 0 10px #ff4a10); animation: streakBurn 1s ease-in-out infinite alternate; }
@keyframes streakBurn { to { filter: drop-shadow(0 0 7px #ffb02e) drop-shadow(0 0 16px #ff4a10); } }
.dt-total-pop { position: absolute; left: 50%; transform: translate(-50%, -50%); font: 800 60px var(--display); color: #fff3d6; text-shadow: 0 0 20px rgba(255,200,90,.8), 0 4px 0 rgba(0,0,0,.6); pointer-events: none; animation: totalPop 1.4s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes totalPop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -70%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(.9); opacity: 0; } }
.dt-dc { font: 600 13px var(--body); color: #ffe39a; padding: 2px 10px; border-radius: 12px; background: rgba(0,0,0,.6); }
.dt-verdict { font: 800 24px var(--display); animation: slam .4s cubic-bezier(.3,1.6,.5,1) both; text-shadow: 0 2px 6px #000; }
.dt-verdict.ok { color: #9af08a; } .dt-verdict.no { color: #ff8a7a; }
#dice-tray { position: fixed; left: 50%; bottom: 14px; z-index: 157; width: min(560px, calc(100vw - 24px)); height: 124px; transform: translate(-50%, 160%); transition: transform .5s cubic-bezier(.3,1.2,.5,1); pointer-events: none; border-radius: 16px; background: linear-gradient(180deg, #5a3a1e, #3a2410); box-shadow: 0 10px 30px rgba(0,0,0,.7), inset 0 0 0 6px #6a4422, inset 0 0 0 8px #2a180a; }
#dice-tray i { position: absolute; inset: 12px; border-radius: 10px; background: radial-gradient(ellipse, #2a5a3a, #163a22); box-shadow: inset 0 4px 14px rgba(0,0,0,.6); }
#dice-tray.show { transform: translate(-50%, 0); }

/* ---------- table chat and the dock ---------- */
.camp-dock { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: 18px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dock-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(180deg, #2a2224, #18141a); color: var(--ink); font: 600 14px var(--body); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.dock-btn:hover, .dock-btn.on { border-color: var(--gold); color: var(--gold-2); }
.dock-btn svg { width: 18px; height: 18px; }
.dock-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--crimson-2, #d9412f); color: #fff; font-size: 12px; display: grid; place-items: center; }
body:has(.dice-fab) .camp-dock { bottom: 78px; }
body:has(.camp-dock) #toasts { bottom: 150px; }
.chat-panel { order: -1; width: min(380px, calc(100vw - 36px)); height: min(520px, calc(100vh - 160px)); display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(180deg, #1f1b1d, #141113); box-shadow: 0 20px 60px rgba(0,0,0,.75); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-head label { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 0; background: none; border: 0; }
.msg .msg-body { min-width: 0; padding: 7px 11px; border-radius: inherit; }
.msg.bub-plain, .msg.bub-parchment, .msg.bub-scroll, .msg.bub-stone, .msg.bub-ice, .msg.bub-menu { padding: 0; }
.msg { background: none !important; box-shadow: none !important; border: 0 !important; }
.msg.bub-plain .msg-body { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.msg.bub-parchment .msg-body { background: linear-gradient(135deg, #e9dcbc, #d8c59a); color: #3a2a14; border-radius: 4px; box-shadow: inset 0 0 12px rgba(120,80,30,.35); }
.msg.bub-scroll .msg-body { background: linear-gradient(180deg, #efe2c2, #dcc79a); color: #3a2a14; border-radius: 2px; box-shadow: -6px 0 0 -2px #b89a64, 6px 0 0 -2px #b89a64; margin: 0 6px; }
.msg.bub-stone .msg-body { background: linear-gradient(135deg, #6a6a72, #44444c); color: #eceaf0; border-radius: 6px; border: 1px solid #2a2a30; }
.msg.bub-ice .msg-body { background: linear-gradient(135deg, rgba(220,240,255,.95), rgba(160,210,245,.85)); color: #0a2a48; border-radius: 10px; border: 1px solid #fff; }
.msg.bub-menu .msg-body { background: #1e2a22; color: #f0f0e8; border: 3px solid #6a4a2a; border-radius: 4px; font-family: "MedievalSharp", var(--body); }
.msg-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; }
.msg-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.msg-text .emote { width: 28px; height: 28px; }
.msg.mine { flex-direction: row-reverse; }
.msg.raven-in .msg-body { animation: unfold .6s ease-out .9s both; transform-origin: 100% 100%; }
@keyframes unfold { from { opacity: 0; transform: scale(.2) rotate(-8deg); } }
.raven-fly { position: absolute; right: -10px; top: -10px; width: 44px; height: 34px; pointer-events: none; animation: ravenIn 1.6s ease-out forwards; }
.raven-fly svg { width: 100%; height: 100%; }
@keyframes ravenIn { 0% { transform: translate(240px, 200px) scale(1.4); opacity: 1; } 55% { transform: translate(0, 0) scale(1); opacity: 1; } 75% { transform: translate(-10px, -20px); opacity: 1; } 100% { transform: translate(-80px, -120px) scale(.6); opacity: 0; } }
.raven-demo { position: fixed; right: 30px; bottom: 120px; z-index: 165; width: 300px; padding: 14px; border-radius: 12px; background: #1a1618; border: 1px solid var(--line-strong); }
.emote-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 10px; border-top: 1px solid var(--line); max-height: 92px; overflow-y: auto; }
.emote-bar button.emote { width: 30px; height: 30px; padding: 2px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.emote-bar button.emote:hover { background: rgba(201,164,92,.15); }
.emote-locked { padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--dim); margin: 2px; }
.screen-toggle { margin-left: auto; display: flex; gap: 4px; align-items: center; color: var(--gold-2); }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.chat-form .input { flex: 1; min-width: 0; }

/* roll reactions */
.react-bar { display: flex; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 6px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; opacity: .65; }
.react:hover, .react.on { opacity: 1; border-color: var(--gold); color: var(--gold-2); }
.react svg { width: 15px; height: 15px; }
.react-float { position: fixed; z-index: 162; width: 34px; height: 34px; margin-left: -17px; pointer-events: none; animation: reactUp 1.6s ease-out forwards; }
.react-float svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
@keyframes reactUp { 0% { opacity: 0; transform: translateY(0) scale(.4); } 20% { opacity: 1; transform: translateY(-20px) scale(1.2); } 100% { opacity: 0; transform: translateY(-90px) scale(1); } }

/* DM panel and target number */
.modal.modal-wide { max-width: 760px; }
.tfx-list { display: flex; flex-direction: column; gap: 2px; }
.tfx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.tfx-row > div:first-child { flex: 1 1 220px; min-width: 0; }
.tfx-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.tfx-ctl .input.sm { width: auto; max-width: 170px; padding: 5px 8px; font-size: 13px; }
.tfx-row.locked { opacity: .7; }
.lvl-list { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.lvl-list .lvl-n { width: 54px !important; margin-left: 4px; }
.dc-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dc-form .input { width: 80px; }
.dc-big { margin: 0; font: 800 44px var(--display); color: var(--gold-2); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .nfx-runes span, .nfx-runes span::after, .nfx-float span, .nfx-glitch span, .nfx-sweep, .nfx-frost, .nfx-candle, .nfx-drip::before, .nfx-drip::after,
  .amb i, .emote.anim *, .emote-row.anim *, .pet svg, .sw i { animation: none !important; }
}

/* ---------- the dragon (fly-by, boss intro) and the roaring head ---------- */
.dragon-art .dw { transform-box: view-box; }
.dragon-art .dw-near { transform-origin: 158px 66px; animation: wingBeat .62s ease-in-out infinite; }
.dragon-art .dw-far { transform-origin: 166px 64px; animation: wingBeat .62s ease-in-out infinite -.08s; }
@keyframes wingBeat { 0%, 100% { transform: rotate(-4deg) scaleY(1); } 50% { transform: rotate(10deg) scaleY(-.55); } }
.tfx-boss-sil .dragon-art .dw { animation-duration: 1.4s; }
.fx .flyby { position: absolute; left: 0; top: -200px; width: 280px; height: 131px; animation: flyBy 2.6s cubic-bezier(.4,.1,.6,.9) forwards; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.flyby svg { width: 100%; height: 100%; overflow: visible; }
@keyframes flyBy { 0% { transform: translateX(var(--sx)) translateY(-40px) rotate(4deg); } 45% { transform: translateX(calc(var(--sx) * .1)) translateY(36px) rotate(-3deg); } 100% { transform: translateX(var(--ex)) translateY(-130px) rotate(-12deg); } }
.mo-roar .roar-head { width: min(64vw, 440px); }
.roar-head .jaw { transform-box: view-box; transform-origin: 150px 118px; animation: jawOpen 3.2s ease forwards; }
@keyframes jawOpen { 0%, 22% { transform: rotate(0); } 34%, 74% { transform: rotate(24deg); } 90%, 100% { transform: rotate(4deg); } }

/* ---------- arrow volley ---------- */
.fx .arrow2 { position: absolute; left: -58px; top: -2px; width: 58px; height: 4px; transform-origin: 58px 2px; will-change: transform; }
.arrow2 .shaft { position: absolute; inset: 0; transform-origin: 100% 50%; background: linear-gradient(90deg, #6a4a2a, #8a6440 50%, #6a4a2a); border-radius: 2px; }
.arrow2 .shaft::before { content: ""; position: absolute; left: -2px; top: -4px; width: 14px; height: 12px; background: linear-gradient(90deg, #e8e0d0, #c03a2a); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%, 30% 50%); }
.arrow2 .shaft::after { content: ""; position: absolute; right: -7px; top: -3.5px; border-left: 10px solid #b8c0cc; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; filter: drop-shadow(0 0 1px #000); }
.arrow2.stuck .shaft::after { opacity: 0; }
.arrow2.stuck .shaft { animation: quiver .5s ease-out; }
@keyframes quiver { 0% { transform: rotate(5deg); } 25% { transform: rotate(-4deg); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(-1deg); } 100% { transform: none; } }
.fx .arrow-dust { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 10px; margin: -5px -13px; border-radius: 50%; background: radial-gradient(ellipse, rgba(200,180,150,.7), transparent 70%); animation: dustPuff .6s ease-out forwards; }
@keyframes dustPuff { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8, 1.2) translateY(-4px); opacity: 0; } }
.fx .arrow-shadow { position: absolute; left: 0; top: var(--ey); width: 30px; height: 5px; margin: -2.5px 0 0 -15px; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(1.5px); opacity: 0; animation: arrowShadow var(--t) linear var(--d) forwards; }
@keyframes arrowShadow { 0% { opacity: 0; transform: translateX(var(--sx)) scale(.4); } 30% { opacity: .5; } 100% { opacity: .7; transform: translateX(var(--ex)) scale(1); } }

/* ---------- Thunderwave ---------- */
.fx .tw-mote { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #e6f2ff; box-shadow: 0 0 8px #8ac4ff; opacity: 0; animation: twGather .3s ease-in var(--d) forwards; }
@keyframes twGather { 0% { opacity: 0; transform: translate(var(--x), var(--y)); } 30% { opacity: 1; } 100% { opacity: 1; transform: translate(0, 0) scale(.4); } }
.fx .tw-charge { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(200,230,255,.9), rgba(120,170,255,.3) 50%, transparent 70%); animation: twCharge .32s ease-in forwards; }
@keyframes twCharge { 0% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(.4); opacity: 1; } }
.fx .tw-core { position: absolute; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(200,230,255,.9) 25%, rgba(110,160,255,.45) 50%, transparent 70%); opacity: 0; animation: twCore .6s ease-out .3s forwards; }
@keyframes twCore { 0% { opacity: 1; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.8); } }
.fx .tw-shock { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 8px solid rgba(235,245,255,.95); box-shadow: 0 0 24px 6px rgba(140,190,255,.8), inset 0 0 18px rgba(140,190,255,.8); opacity: 0; animation: twShock .75s cubic-bezier(.1,.7,.3,1) .3s forwards; }
@keyframes twShock { 0% { opacity: 1; transform: scale(.3); border-width: 10px; } 70% { opacity: .7; } 100% { opacity: 0; transform: scale(10); border-width: 1px; } }
.fx .tw-bend { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; -webkit-backdrop-filter: blur(2px) brightness(1.35) contrast(1.15); backdrop-filter: blur(2px) brightness(1.35) contrast(1.15);
  -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%); opacity: 0; animation: twBend .8s cubic-bezier(.1,.7,.3,1) .32s forwards; }
@keyframes twBend { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(9.5); } }
.fx .tw-arc { position: absolute; width: 80px; height: 80px; margin: -40px; border-radius: 50%; border: 3px solid transparent; border-left-color: rgba(200,225,255,.85); border-right-color: rgba(200,225,255,.85); transform: rotate(var(--rot)); opacity: 0; animation: twArc .8s ease-out var(--d) forwards; }
@keyframes twArc { 0% { opacity: .9; transform: rotate(var(--rot)) scale(.6); } 100% { opacity: 0; transform: rotate(var(--rot)) scale(5.5); } }
.fx .tw-debris { position: absolute; width: 7px; height: 5px; margin: -2.5px -3.5px; background: linear-gradient(135deg, #b8aa98, #5a4e42); clip-path: polygon(10% 0, 100% 25%, 80% 100%, 0 70%); opacity: 0; animation: twDebris .9s cubic-bezier(.2,.7,.5,1) var(--d) forwards; }
@keyframes twDebris { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(var(--s)); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(var(--s)); } }
.fx .tw-dust { position: absolute; width: 90px; height: 90px; margin: -45px; border-radius: 50%; background: radial-gradient(circle, transparent 40%, rgba(190,180,165,.35) 60%, transparent 72%); opacity: 0; filter: blur(3px); animation: twDust 1.2s ease-out .34s forwards; }
@keyframes twDust { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(4.2); } }