/* ============ DM Tavern — second wave of frames and click effects, the Mythic tier, Crowns ============ */
@property --sand { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

/* ---------- shared frame pieces ---------- */
.av > .fb { position: absolute; inset: 0; place-self: stretch; pointer-events: none; z-index: 1; }
.av > .fb b, .av > .fb s { position: absolute; display: block; text-decoration: none; }
/* frames drawn as a masked ring */
.av:is(.fr-hourglass, .fr-glass, .fr-wyrmcoil, .fr-eclipse, .fr-rift, .fr-nat20)::before, .av.fr-glass::after {
  inset: -5px; padding: 3px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.av.sm:is(.fr-hourglass, .fr-glass, .fr-wyrmcoil, .fr-eclipse, .fr-rift, .fr-nat20)::before, .av.sm.fr-glass::after { inset: -3px; padding: 2px; }
.av.lg:is(.fr-hourglass, .fr-glass, .fr-wyrmcoil, .fr-eclipse, .fr-rift, .fr-nat20)::before, .av.lg.fr-glass::after { inset: -6px; padding: 4px; }
.av.xl:is(.fr-hourglass, .fr-glass, .fr-wyrmcoil, .fr-eclipse, .fr-rift, .fr-nat20)::before, .av.xl.fr-glass::after { inset: -9px; padding: 5px; }

/* Hourglass: sand drains around the ring, then it flips */
.fr-hourglass::before { background: conic-gradient(#e3c07a var(--sand), rgba(227,192,122,.12) 0); animation: sandDrain 8s ease-in-out infinite; }
.av.fr-hourglass::after { content: "⧗"; inset: auto 0 -.95em; border-radius: 0; text-align: center; font: .55em/1 serif; color: #e3c07a; text-shadow: 0 0 4px rgba(227,192,122,.6); animation: glassFlip 8s ease-in-out infinite; }
@keyframes sandDrain { 0% { --sand: 360deg; transform: rotate(0); } 80% { --sand: 0deg; transform: rotate(0); } 90% { --sand: 0deg; transform: rotate(180deg); } 100% { --sand: 360deg; transform: rotate(180deg); } }
@keyframes glassFlip { 0%, 80% { transform: rotate(0); } 90%, 100% { transform: rotate(180deg); } }

/* Thornwreath: briar ring with spikes, a rose blooms now and then */
.fr-thorns::before { inset: -3px; border: 2px solid #4a5e2a; box-shadow: 0 0 0 1px #1b2410, inset 0 0 0 1px #1b2410; }
.fr-thorns::after { inset: -8px; background: repeating-conic-gradient(from 4deg, #6a8a3a 0 4deg, transparent 4deg 22deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 66%, #000 68%, #000 92%, transparent 94%); mask: radial-gradient(circle closest-side, transparent 66%, #000 68%, #000 92%, transparent 94%); animation: spin 60s linear infinite; }
.fb.rose { inset: auto; top: -12%; right: -12%; width: 36%; height: 36%; border-radius: 50%;
  background: radial-gradient(circle, #ff9aa8 0 12%, #d0283f 14% 32%, #9a1228 34% 52%, #6a0a1c 54% 64%, transparent 66%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); animation: bloom 7s ease-in-out infinite; }
@keyframes bloom { 0%, 12% { transform: scale(0) rotate(-120deg); } 28%, 82% { transform: scale(1) rotate(0); } 96%, 100% { transform: scale(0) rotate(60deg); } }

/* Stained glass: coloured panes with light passing through */
.fr-glass::before { background: conic-gradient(#b3261e 0 50deg, #111 50deg 54deg, #1f5fb0 54deg 110deg, #111 110deg 114deg, #d0a83a 114deg 170deg, #111 170deg 174deg,
  #2f8a4a 174deg 230deg, #111 230deg 234deg, #7a3faa 234deg 290deg, #111 290deg 294deg, #c2601b 294deg 356deg, #111 356deg); }
.fr-glass::after { background: conic-gradient(from var(--ang), transparent 0 72%, rgba(255,250,230,.8) 82%, transparent 92%); mix-blend-mode: screen; animation: angSpin 4.5s linear infinite; }

/* Spellbook pages: loose pages flutter around you */
.fr-pages::before { inset: -3px; border: 1px solid rgba(232,215,170,.75); box-shadow: 0 0 6px rgba(232,215,170,.25); }
.fb.fpage { inset: -18%; animation: spin calc(7s + var(--i) * 2.5s) linear calc(var(--i) * -2s) infinite; }
.fb.fpage:nth-of-type(2) { animation-direction: reverse; }
.fb.fpage s { left: 50%; top: 0; width: 20%; height: 26%; margin-left: -10%; border-radius: 1px 3px 3px 1px; background: linear-gradient(90deg, #e2d4b0, #f7efd8 50%, #d8c79a);
  box-shadow: 0 1px 2px rgba(0,0,0,.5); animation: flutter 1.3s ease-in-out calc(var(--i) * -.4s) infinite; }
.fb.fpage s::before { content: ""; position: absolute; inset: 22% 18%; background: repeating-linear-gradient(#8a7a5a 0 1px, transparent 1px 3px); opacity: .55; }
@keyframes flutter { 50% { transform: rotateY(65deg) rotate(12deg); } }

/* Coinpurse: gold coins orbit and flip */
.fr-coins::before { inset: -3px; border: 2px solid #c9a43a; box-shadow: 0 0 0 1px #5a4214, 0 0 8px rgba(255,210,90,.3); }
.fb.coins { inset: -20%; animation: spin 9s linear infinite; }
.fb.coins b { inset: 0; transform: rotate(var(--a)); }
.fb.coins b::before { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 18%; margin-left: -9%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b03a 45%, #8a6414); box-shadow: 0 0 4px rgba(255,210,90,.6); animation: coinFlip 1.6s ease-in-out calc(var(--i) * -.3s) infinite; }
@keyframes coinFlip { 50% { transform: scaleX(.15); } }

/* Candlelit: three candles flicker and drip */
.fr-candles::before { inset: -3px; border: 1px solid rgba(255,190,110,.55); animation: candleGlow 2.4s ease-in-out infinite; }
@keyframes candleGlow { 50% { box-shadow: 0 0 12px 2px rgba(255,170,80,.35); } }
.fb.candle { transform: rotate(var(--a)); }
.fb.candle s { left: 50%; top: -30%; width: 12%; height: 24%; margin-left: -6%; border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #d8ccb0, #f5ecd6 50%, #c9bc9a);
  transform: rotate(calc(-1 * var(--a))); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.fb.candle s::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 120%; height: 80%; margin-left: -60%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 70%, #fff6c8, #ffb02e 45%, rgba(255,90,20,0) 72%); transform-origin: 50% 100%; animation: flame .9s ease-in-out calc(var(--i) * -.3s) infinite alternate; }
.fb.candle s::after { content: ""; position: absolute; left: 12%; top: 0; width: 28%; height: 10%; background: #f5ecd6; border-radius: 0 0 50% 50%; animation: drip 4s ease-in calc(var(--i) * -1.3s) infinite; }
@keyframes flame { from { transform: scale(.9, 1) rotate(-5deg); } to { transform: scale(1.05, 1.18) rotate(5deg); } }
@keyframes drip { 0% { height: 10%; opacity: 1; } 80% { height: 70%; opacity: 1; } 100% { height: 70%; opacity: 0; } }

/* Wyrmcoil: a dragon circles you with its tail in its mouth */
.fr-wyrmcoil::before { background: repeating-conic-gradient(rgba(0,0,0,.35) 0 3deg, transparent 3deg 9deg), conic-gradient(transparent 0 5deg, #24401f 9deg, #3f7a34 55%, #6fae3f 90%, #a6e05a 100%);
  animation: spin 10s linear infinite; }
.fb.wyrm { animation: spin 10s linear infinite; }
.fb.wyrm::before { content: ""; position: absolute; left: 40%; top: -20%; width: 32%; height: 22%; background: linear-gradient(180deg, #b6ec6a, #3f7a34);
  clip-path: polygon(0 18%, 55% 0, 100% 42%, 100% 58%, 55% 100%, 0 82%); }
.fb.wyrm::after { content: ""; position: absolute; left: 60%; top: -15%; width: 7%; height: 7%; border-radius: 50%; background: #ffd24a; box-shadow: 0 0 4px 1px #ffb02e; }

/* Bloodmoon eclipse: a dark disc slides across a red corona */
.fr-eclipse::before { background: radial-gradient(circle closest-side, #070000 0 92%, transparent 100%) no-repeat, conic-gradient(#ff4a3d, #8a0a0a, #ff7a4a, #6a0606, #ff4a3d);
  background-size: 60% 100%, 100% 100%; animation: eclipse 6s ease-in-out infinite; }
.fr-eclipse::after { inset: -11px; background: radial-gradient(circle closest-side, transparent 62%, rgba(255,40,30,.5) 74%, transparent 100%); animation: voidPulse 3s ease-in-out infinite; }
@keyframes eclipse { from { background-position: -150% 0, 0 0; } to { background-position: 250% 0, 0 0; } }

/* Mimic: a chest rim that sometimes shows teeth and blinks */
.av.fr-mimic::before { inset: -4px; border: 3px solid #5a3a1e; box-shadow: 0 0 0 1px #c9a45c, inset 0 0 0 1px #c9a45c, 0 3px 6px rgba(0,0,0,.6); }
.fr-mimic::after { inset: -4px; background: repeating-conic-gradient(transparent 0 42deg, #d8b46a 42deg 48deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 82%); mask: radial-gradient(circle closest-side, transparent 80%, #000 82%); }
.fb.teeth { inset: 1%; border-radius: 50%; background: repeating-conic-gradient(#f3ead8 0 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 74%, #000 77%); mask: radial-gradient(circle closest-side, transparent 74%, #000 77%); opacity: 0; animation: chomp 5s ease-in-out infinite; }
@keyframes chomp { 0%, 60% { opacity: 0; transform: scale(1.15); } 68%, 86% { opacity: 1; transform: scale(1); } 76% { transform: scale(.94); } 94%, 100% { opacity: 0; transform: scale(1.15); } }
.fb.mimic-eye { inset: auto; left: -8%; top: -8%; width: 26%; height: 26%; border-radius: 50%; z-index: 2;
  background: radial-gradient(ellipse 18% 45% at 50% 50%, #111 0 90%, transparent 100%), radial-gradient(circle, #ffe070, #c97a10); box-shadow: 0 0 6px rgba(255,200,60,.6), 0 0 0 1px #3a2210;
  animation: mimicEye 5s ease-in-out infinite; }
@keyframes mimicEye { 0%, 58% { transform: scaleY(0); } 64%, 74%, 80%, 88% { transform: scaleY(1); } 77% { transform: scaleY(.1); } 94%, 100% { transform: scaleY(0); } }

/* Beholder's gaze: eyestalks that follow your mouse */
.fr-beholder::before { inset: -3px; border: 2px solid #6a3a5a; box-shadow: 0 0 0 1px #2a0f22, 0 0 10px rgba(170,60,140,.35); }
.fb.eyes b { inset: 0; transform: rotate(var(--a)); }
.fb.eyes b::before { content: ""; position: absolute; left: 50%; top: -15%; width: 5%; height: 17%; margin-left: -2.5%; background: #7a4a6a; border-radius: 2px; }
.fb.eyes s { left: 50%; top: -36%; width: 23%; height: 23%; margin-left: -11.5%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e8dcd0 60%, #b8a090);
  box-shadow: 0 0 0 1px #4a2240; rotate: calc(-1 * var(--a)); animation: stalkBob 3s ease-in-out infinite; }
.fb.eyes b:nth-child(even) s { animation-delay: -1.5s; }
.fb.eyes s::after { content: ""; position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; border-radius: 50%; background: radial-gradient(circle, #111 0 34%, #c9302a 38% 70%, #6a0a10 72%);
  transform: translate(calc(var(--ex, 0) * 40%), calc(var(--ey, 0) * 40%)); transition: transform .12s; }
@keyframes stalkBob { 50% { translate: 0 -10%; } }

/* Planar rift (Mythic): the ring tears open into another world */
.fr-rift::before { background: conic-gradient(from var(--ang), #0ff0d0, #3a0a5a, #ff3ad9, #000, #0ff0d0); animation: angSpin 1.6s linear infinite; }
.fr-rift::after { inset: -11px; background: radial-gradient(circle closest-side, transparent 60%, rgba(60,240,210,.38) 70%, rgba(255,60,220,.22) 84%, transparent 100%); animation: riftPulse 2.4s ease-in-out infinite; }
@keyframes riftPulse { 50% { transform: scale(1.1) rotate(25deg); filter: hue-rotate(70deg); } }
.fb.tear { inset: auto; right: -24%; top: 18%; width: 36%; height: 64%; z-index: 2; background: conic-gradient(from var(--ang), #0ff0d0, #ff3ad9, #1a0030, #fff, #0ff0d0);
  clip-path: polygon(50% 0, 64% 22%, 54% 36%, 72% 52%, 56% 66%, 66% 84%, 50% 100%, 34% 80%, 46% 64%, 28% 48%, 44% 34%, 34% 16%); animation: angSpin 1.2s linear infinite, tearPulse 2.4s ease-in-out infinite; }
@keyframes tearPulse { 0%, 100% { transform: scale(.75, .85); opacity: .75; } 50% { transform: scale(1.1, 1.15); opacity: 1; } }

/* Nat 20 (Mythic): a ring of tiny d20s that all land on 20 */
.fr-nat20::before { background: conic-gradient(#c9a45c, #fff3c4, #c9a45c, #7a5a2a, #c9a45c); }
.fb.dice { inset: -24%; animation: spin 30s linear infinite; }
.fb.dice b { inset: 0; transform: rotate(var(--a)); }
.fb.dice s { left: 50%; top: 0; width: 21%; height: 21%; margin-left: -10.5%; display: grid; place-items: center; background: linear-gradient(160deg, #e04a3a, #8a1410);
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); animation: dieRoll 5s ease-out infinite; }
.fb.dice s::after { content: "7"; font: 800 .38em/1 var(--body); color: #fff; animation: dieNum 5s steps(1) infinite; }
.fb.dice b:nth-child(odd) s::after { animation-name: dieNum2; }
@keyframes dieRoll { 0% { transform: rotate(0); } 55% { transform: rotate(720deg); background: linear-gradient(160deg, #e04a3a, #8a1410); }
  60%, 92% { transform: rotate(720deg) scale(1.15); background: linear-gradient(160deg, #fff3b0, #d4a63a); } 100% { transform: rotate(720deg); background: linear-gradient(160deg, #e04a3a, #8a1410); } }
@keyframes dieNum { 0% { content: "7"; } 10% { content: "13"; } 20% { content: "4"; } 30% { content: "17"; } 40% { content: "9"; } 50% { content: "12"; } 57% { content: "20"; color: #5a1a08; } 93% { content: "20"; color: #fff; } }
@keyframes dieNum2 { 0% { content: "3"; } 10% { content: "15"; } 20% { content: "11"; } 30% { content: "6"; } 40% { content: "19"; } 50% { content: "2"; } 57% { content: "20"; color: #5a1a08; } 93% { content: "20"; color: #fff; } }

/* ---------- new click effects ---------- */
.fx-at { position: absolute; left: 0; width: 0; height: 0; }
/* Fireball */
.fx .fb-bead { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, #ffb02e 50%, #ff4a1f);
  box-shadow: 0 0 12px 4px rgba(255,120,30,.7); animation: bead .4s cubic-bezier(.4,0,.8,.6) forwards; }
@keyframes bead { from { transform: translateY(0) scale(.6); } 95% { opacity: 1; } to { transform: translateY(-130px) scale(1); opacity: 0; } }
.fx .dragon-core.late { opacity: 0; animation: blast .9s ease-out .38s forwards; }
/* Counterspell */
.fx .cs-ring { position: absolute; left: 0; top: 0; width: 140px; height: 140px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(160,200,255,.9);
  box-shadow: 0 0 16px rgba(120,170,255,.7), inset 0 0 16px rgba(120,170,255,.4); color: #d8e8ff; font-size: 12px; letter-spacing: 3px; display: grid; place-items: center; text-align: center; padding: 16px; line-height: 1.6;
  animation: csRing .7s ease-in forwards; }
@keyframes csRing { 0% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } 30% { opacity: 1; } 85% { transform: translate(-50%, -50%) scale(.25) rotate(160deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.2) rotate(180deg); opacity: 0; } }
.fx .shard { position: absolute; left: 0; top: 0; width: 10px; height: 14px; margin: -7px -5px; background: linear-gradient(160deg, #fff, #9fc4ff); clip-path: polygon(50% 0, 100% 100%, 0 70%); opacity: 0; animation: shard .7s ease-out .6s forwards; }
@keyframes shard { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
/* Healing word */
.fx .heal-glow { position: absolute; left: 0; top: 0; width: 160px; height: 160px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(170,255,190,.6), rgba(80,200,120,.2) 45%, transparent 70%); animation: blast 1.2s ease-out forwards; }
.fx .leaf { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #8fe08a, #2f8a3a); opacity: 0; animation: leafRise 1.6s ease-out var(--d) forwards; }
@keyframes leafRise { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)); } 15% { opacity: 1; } 50% { transform: translate(calc(-50% + var(--x) * .6), -80px) rotate(calc(var(--r) + 120deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -150px) rotate(calc(var(--r) + 240deg)); } }
.fx .plus-p { position: absolute; left: 0; top: 0; color: #b8ffc8; font: 700 18px var(--body); text-shadow: 0 0 6px #4fd06a; opacity: 0; animation: plusUp 1.2s ease-out var(--d) forwards; }
@keyframes plusUp { 0% { opacity: 0; transform: translate(calc(-50% + var(--x)), -10px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -90px) scale(1.1); } }
/* Critical hit */
.fx .slash { position: absolute; left: 0; top: 0; width: 220px; height: 4px; margin: -2px 0 0 -110px; border-radius: 4px; background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  box-shadow: 0 0 12px 3px rgba(255,60,40,.8); transform: rotate(var(--rot, -35deg)) scaleX(0); animation: slash .35s ease-out forwards; }
.fx .slash.two { --rot: 35deg; animation-delay: .12s; }
@keyframes slash { 0% { transform: rotate(var(--rot, -35deg)) scaleX(0); opacity: 1; } 50% { transform: rotate(var(--rot, -35deg)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--rot, -35deg)) scaleX(1.1); opacity: 0; } }
.fx .crit-text { position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 40px var(--display); letter-spacing: .06em; color: #ffe39a; text-shadow: 0 0 12px rgba(255,180,40,.9), 0 3px 0 #7a1a10;
  opacity: 0; animation: critText 1.3s cubic-bezier(.2,1.6,.4,1) .15s forwards; }
@keyframes critText { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 20% { opacity: 1; transform: translate(-50%, -90%) scale(1.15) rotate(-4deg); }
  70% { opacity: 1; transform: translate(-50%, -110%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1) rotate(-4deg); } }
body.shake #app { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 1px); } }
/* Bardic inspiration */
.fx .note { position: absolute; left: 0; top: 0; color: #ffe39a; font-size: 20px; text-shadow: 0 0 8px rgba(255,200,80,.7); opacity: 0; animation: noteFloat 1.4s ease-out var(--d) forwards; }
@keyframes noteFloat { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(20deg) scale(1.1); } }
.fx .d6 { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px; padding: 4px; border-radius: 5px; background: #f5ecd6; box-shadow: 0 2px 0 #b8a888, 0 0 10px rgba(255,220,140,.6);
  display: grid; grid-template-columns: 1fr 1fr; opacity: 0; animation: d6 1.4s cubic-bezier(.3,.7,.4,1) forwards; }
.fx .d6 i { width: 4px; height: 4px; border-radius: 50%; background: #3a1a12; justify-self: center; align-self: center; }
@keyframes d6 { 0% { transform: scale(.4); opacity: 0; } 15% { opacity: 1; } 40% { transform: translate(40px, -70px) rotate(260deg); } 60% { transform: translate(60px, -20px) rotate(400deg); }
  72% { transform: translate(66px, -38px) rotate(430deg); } 85% { transform: translate(70px, -20px) rotate(450deg); opacity: 1; } 100% { transform: translate(72px, -20px) rotate(450deg); opacity: 0; } }
/* Polymorph */
.fx .puff { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(235,230,240,.9), rgba(200,195,210,.4) 60%, transparent 72%); opacity: 0; animation: puff .7s ease-out var(--d) forwards; }
@keyframes puff { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.8); } }
.fx .sheep { position: absolute; left: 0; top: 0; width: 80px; height: 64px; transform: translate(-50%, -55%) scale(0); animation: sheep 1.5s ease-in-out .15s forwards; }
.fx .sheep svg, .fx .frog svg, .fx .familiar svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes sheep { 0% { transform: translate(-50%, -55%) scale(0); } 12% { transform: translate(-50%, -55%) scale(1.1); } 18%, 40%, 60%, 80% { transform: translate(-50%, -55%) scale(1); }
  30%, 50%, 70% { transform: translate(-50%, -72%) scale(1); } 90%, 100% { transform: translate(-50%, -55%) scale(0); } }
/* Misty step */
.fx .mist { position: absolute; left: 0; top: 0; width: 40px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, rgba(220,228,240,.85), rgba(190,200,220,.3) 60%, transparent 72%); filter: blur(2px); opacity: 0; animation: mist 1s ease-out var(--d) forwards; }
@keyframes mist { 0% { opacity: .9; transform: translate(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 0px))) scale(.5); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.6); } }
/* Eldritch blast */
.fx .eb-core { position: absolute; left: 0; top: 0; width: 70px; height: 70px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #f3d8ff, rgba(160,60,255,.7) 35%, transparent 70%); animation: blast .6s ease-out forwards; }
.fx .beam { position: absolute; left: 0; top: 0; width: var(--l); height: 6px; margin-top: -3px; border-radius: 6px; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, #c07aff 30%, #7a2aff 80%, transparent);
  box-shadow: 0 0 12px 2px rgba(160,60,255,.75); opacity: 0; animation: beam .55s ease-out var(--d) forwards; }
@keyframes beam { 0% { opacity: 1; transform: rotate(var(--r)) scaleX(0); } 40% { opacity: 1; transform: rotate(var(--r)) scaleX(1); } 100% { opacity: 0; transform: rotate(var(--r)) translateX(30px) scaleX(1); } }
/* Gold rain */
.fx .coin { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #e0b03a 45%, #8a6414); box-shadow: 0 0 4px rgba(255,210,90,.7);
  opacity: 0; animation: coinRain 1.5s cubic-bezier(.2,.6,.6,1) var(--d) forwards, coinSpin var(--s) linear infinite; }
@keyframes coinRain { 0% { opacity: 1; translate: 0 0; } 35% { translate: calc(var(--x) * .6) var(--up); } 85% { opacity: 1; } 100% { opacity: 0; translate: var(--x) 140px; } }
@keyframes coinSpin { 50% { scale: .2 1; } }
/* Summon familiar */
.fx .familiar { position: absolute; left: 0; top: 0; width: 64px; height: 40px; margin: -20px -32px; }
.fx .familiar.raven, .fx .familiar.owl { animation: flyLoop 2s ease-in-out forwards; }
@keyframes flyLoop { 0% { transform: scale(.3); opacity: 0; } 10% { opacity: 1; } 30% { transform: translate(110px, -80px) rotate(10deg); } 55% { transform: translate(0, -150px) scale(1.1) rotate(-5deg); }
  80% { transform: translate(-100px, -70px) rotate(-12deg); } 92% { opacity: 1; } 100% { transform: scale(.3); opacity: 0; } }
.fx .bird-svg .wing { transform-box: fill-box; animation: flap .2s ease-in-out infinite alternate; }
.fx .bird-svg .w1 { transform-origin: 100% 100%; } .fx .bird-svg .w2 { transform-origin: 0 100%; }
@keyframes flap { to { transform: scaleY(-.5); } }
.fx .familiar.cat { width: 56px; height: 50px; margin: -25px -28px; animation: catPop 2s ease-out forwards; }
@keyframes catPop { 0% { transform: translateY(10px) scale(0); } 15% { transform: translateY(-50px) scale(1.1); } 25%, 82% { transform: translateY(-40px) scale(1); } 100% { transform: translateY(-40px) scale(0); } }
.fx .cat-svg .tail { transform-box: fill-box; transform-origin: 0 100%; animation: tail .5s ease-in-out infinite alternate; }
@keyframes tail { to { transform: rotate(18deg); } }
.fx .feather { position: absolute; left: 0; top: 0; width: 5px; height: 14px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: #2a2628; opacity: 0; animation: feather 1.4s ease-in var(--d) forwards; }
.fx .familiar.owl ~ .feather { background: #9a7a5a; }
@keyframes feather { 0% { opacity: .9; transform: translate(var(--x), -60px) rotate(var(--r)); } 100% { opacity: 0; transform: translate(calc(var(--x) + 20px), 30px) rotate(calc(var(--r) + 200deg)); } }
/* Wild magic surge */
.fx .butterfly { position: absolute; left: 0; top: 0; width: 16px; height: 12px; margin: -6px -8px; opacity: 0; filter: hue-rotate(var(--h)); animation: bfly 1.8s ease-out var(--d) forwards; }
.fx .butterfly::before, .fx .butterfly::after { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: radial-gradient(circle at 50% 40%, #ffd24a, #ff6a3d 70%); animation: wing .15s ease-in-out infinite alternate; }
.fx .butterfly::before { left: 0; transform-origin: 100% 50%; border-radius: 60% 40% 50% 50%; } .fx .butterfly::after { right: 0; transform-origin: 0 50%; border-radius: 40% 60% 50% 50%; }
@keyframes wing { to { transform: scaleX(.25); } }
@keyframes bfly { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 50% { transform: translate(calc(var(--x) * .5), calc(var(--y) * .6)) rotate(-10deg); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(15deg); } }
.fx .frog { position: absolute; left: 0; top: 0; width: 60px; height: 45px; margin: -22px -30px; animation: frogHop 2s ease-in-out forwards; }
@keyframes frogHop { 0% { transform: scale(0); } 10% { transform: scale(1); } 25% { transform: translate(40px, -60px); } 40% { transform: translate(80px, 0); } 55% { transform: translate(120px, -50px); } 70% { transform: translate(160px, 0); } 100% { transform: translate(170px, 0) scale(0); } }
.fx .prism-p { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h) 90% 65%); box-shadow: 0 0 8px hsl(var(--h) 90% 60%); }
.fx .flower { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px; border-radius: 50%; opacity: 0; filter: hue-rotate(var(--h));
  background: radial-gradient(circle, #ffe680 0 22%, transparent 24%), conic-gradient(#ff7ab0 0 40deg, transparent 40deg 72deg, #ff7ab0 72deg 112deg, transparent 112deg 144deg, #ff7ab0 144deg 184deg, transparent 184deg 216deg, #ff7ab0 216deg 256deg, transparent 256deg 288deg, #ff7ab0 288deg 328deg, transparent 328deg);
  animation: flower 1.8s ease-out var(--d) forwards; }
@keyframes flower { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(-90deg); } 30% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.1); } 80% { opacity: 1; transform: translate(var(--x), var(--y)); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.8); } }
.fx .up-p { width: 6px; height: 6px; border-radius: 50%; background: #c7b2ff; box-shadow: 0 0 6px #9a7aff; animation-duration: 1.4s; }
.fx .surge-label { position: absolute; left: 0; top: 30px; white-space: nowrap; font: italic 600 14px var(--prose); color: #ffe39a; text-shadow: 0 1px 3px #000, 0 0 8px rgba(200,120,255,.6); opacity: 0; animation: surgeLabel 2s ease-out forwards; }
@keyframes surgeLabel { 0% { opacity: 0; transform: translate(-50%, 6px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
/* Ancient tome */
.fx .tome { position: absolute; left: 0; top: 0; width: 70px; height: 50px; margin: -25px -35px; perspective: 300px; animation: tomeIn 2.4s ease-out forwards; }
@keyframes tomeIn { 0% { transform: scale(0) translateY(20px); opacity: 0; } 12%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; transform: scale(.9) translateY(10px); } }
.fx .tome i { position: absolute; top: 0; width: 50%; height: 100%; }
.fx .tome .cover { background: linear-gradient(90deg, #e8d7ac, #f7ecd0); border: 3px solid #6a1a14; box-shadow: 0 0 16px rgba(255,210,120,.7); }
.fx .tome .cover.l { left: 0; border-radius: 4px 0 0 4px; border-right-width: 1px; }
.fx .tome .cover.r { left: 50%; border-radius: 0 4px 4px 0; border-left-width: 1px; transform-origin: 0 50%; animation: coverOpen .45s ease-out .2s backwards; }
@keyframes coverOpen { from { transform: rotateY(-180deg); background: #6a1a14; } }
.fx .tome .leaf { left: 50%; transform-origin: 0 50%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #f7ecd0, #e8d7ac); opacity: 0; animation: leafFlip .5s ease-in-out forwards; }
.fx .tome .l1 { animation-delay: .7s; } .fx .tome .l2 { animation-delay: .9s; } .fx .tome .l3 { animation-delay: 1.1s; }
@keyframes leafFlip { 0% { opacity: 1; transform: rotateY(0); } 99% { opacity: 1; transform: rotateY(-180deg); } 100% { opacity: 0; transform: rotateY(-180deg); } }
.fx .tome-rays { position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,230,160,.35) 0 6deg, transparent 6deg 24deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 20%, transparent 100%); mask: radial-gradient(circle closest-side, #000 20%, transparent 100%); opacity: 0; animation: rays 2s ease-out .5s forwards; }
@keyframes rays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(40deg); } }
.fx .sigil { position: absolute; left: 0; top: 0; font-size: 34px; line-height: 1; color: #ffe39a; text-shadow: 0 0 12px #ffb02e, 0 0 24px rgba(255,200,80,.6); opacity: 0; animation: sigilRise 1.5s ease-out 1s forwards; }
@keyframes sigilRise { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 100px)) scale(1.4) rotate(180deg); } }
.fx .tome-mote { width: 4px; height: 4px; border-radius: 50%; background: #ffe39a; box-shadow: 0 0 6px #ffb02e; animation-duration: 1.3s; }

/* ---------- Mythic tier ---------- */
.lock-tag.mythic { color: #ffe6b0; border: 1px solid rgba(255,170,90,.6); background: linear-gradient(90deg, rgba(255,110,60,.25), rgba(200,60,200,.25)); }
.tier.mythic { border-color: rgba(255,150,90,.6); background: radial-gradient(ellipse at 50% 0%, rgba(255,110,60,.18), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(170,60,200,.18), transparent 60%), var(--surface) !important; }
.tier.mythic .tier-name { background: linear-gradient(90deg, #ffb070, #fff0c8, #e08aff, #ffb070); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 5s linear infinite; }
.compare .my { background: rgba(255,120,60,.08); color: #ffe0b8; font-weight: 600; }
.mythic-name { background-image: linear-gradient(90deg, #ffb070, #fff0c8, #e08aff, #7ae8ff, #ffb070) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent; animation: shimmer 4s linear infinite; }

/* ---------- Crowns (points) ---------- */
.crown-ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; flex: none; }
.crowns { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #ffd98a; white-space: nowrap; }
.crown-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(201,164,92,.45); background: rgba(201,164,92,.08); color: #ffd98a; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; }
.crown-pill:hover { border-color: var(--gold-2); }
.shop-wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; margin-bottom: 8px; }
@media (max-width: 760px) { .shop-wallet { grid-template-columns: minmax(0, 1fr); } }
.wallet-card { padding: 18px; border-radius: 10px; border: 1px solid rgba(201,164,92,.35); background: radial-gradient(ellipse at 0% 0%, rgba(201,164,92,.14), transparent 60%), var(--surface); }
.wallet-bal { font-family: var(--display); font-size: 34px; color: #ffd98a; display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.wallet-card .row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.pack { position: relative; padding: 14px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pack .amt { font-size: 22px; font-weight: 700; color: #ffd98a; display: flex; align-items: center; gap: 6px; }
.pack .bonus { font-size: 12px; color: var(--ok); }
.pack .best { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--gold); color: #1a1408; white-space: nowrap; }
.crown-ledger { list-style: none; margin: 10px 0 0; padding: 0; max-height: 220px; overflow: auto; }
.crown-ledger li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.crown-ledger li b { color: var(--ink); font-weight: 600; } .crown-ledger .plus-amt { color: var(--ok); } .crown-ledger .minus-amt { color: #e8a090; }
.si-foot .gift-btn { margin-left: auto; }
.gift-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 4px; }
.gift-who label { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-size: 14px; }
.gift-who input { position: absolute; opacity: 0; pointer-events: none; }
.gift-who label:has(input:checked) { border-color: var(--gold-2); background: rgba(201,164,92,.1); }
.gift-who label.has { opacity: .45; cursor: not-allowed; }
.gift-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pay-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-choice label { flex: 1; min-width: 140px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-size: 14px; }
.pay-choice label:has(input:checked) { border-color: var(--gold-2); background: rgba(201,164,92,.1); }
.pay-choice label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.pay-choice input { margin-right: 6px; }
.mythic-perk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 10px; border-radius: 8px; font-size: 13.5px; border: 1px solid rgba(255,150,90,.4);
  background: linear-gradient(90deg, rgba(255,110,60,.1), rgba(170,60,200,.1)); color: #ffe0b8; }
/* big animated frames on the top-right avatar mustn't widen the page */
.nav { overflow-x: clip; }

/* ---------- scenic banners ---------- */
.mini-banner .scene .castle { display: block; }
.bscene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bscene.sea .ship { animation: shipBob 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes shipBob { 50% { transform: translateY(1.5px) rotate(1.5deg); } }
.bscene.sea .glint rect { animation: glint 2.4s ease-in-out calc(var(--i) * -.27s) infinite; }
@keyframes glint { 0%, 100% { opacity: .85; } 50% { opacity: .2; } }
.bscene.sea .beam { animation: beam 4s ease-in-out infinite; transform-box: view-box; transform-origin: 59.5px 59px; }
@keyframes beam { 0%, 100% { opacity: .05; transform: rotate(-4deg); } 50% { opacity: .2; transform: rotate(4deg); } }
.bscene.sea .waves { animation: waves 7s ease-in-out infinite alternate; }
@keyframes waves { to { transform: translateX(-24px); } }
.bscene.forest .ff circle { animation: firefly 3.2s ease-in-out calc(var(--i) * -.6s) infinite; filter: drop-shadow(0 0 3px #d8ff6a); }
@keyframes firefly { 0%, 100% { opacity: .1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(4px, -5px); } }
.bscene.forest .mist { animation: waves 12s ease-in-out infinite alternate; }
.bscene.castle .win rect { animation: candleWin 3s ease-in-out calc(var(--i, 0) * -.8s) infinite; }
@keyframes candleWin { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 60% { opacity: .9; } }
.bscene.castle .bats { animation: bats 14s linear infinite; }
@keyframes bats { from { transform: translate(-260px, 20px); } to { transform: translate(460px, -30px); } }

/* ---------- pixel-art banners (pixel-banners.js) ---------- */
.bscene.pxc { overflow: hidden; background: #08081a; }
.bscene.pxc .px-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 62%; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; user-select: none; }
.bscene.pxc .px-win { animation: pxWin 5s steps(1) infinite; }
@keyframes pxWin { 0%, 100% { opacity: 1; } 31% { opacity: .78; } 34% { opacity: 1; } 62% { opacity: .86; } 66% { opacity: 1; } 83% { opacity: .7; } 85% { opacity: .95; } }
.bscene.pxc .px-torch { animation: pxTorch .9s steps(1) infinite; }
@keyframes pxTorch { 0%, 100% { opacity: 1; } 25% { opacity: .65; } 50% { opacity: .9; } 75% { opacity: .55; } }
.bscene.pxc .px-flagA { animation: pxFlagA 1.1s steps(1) infinite; }
.bscene.pxc .px-flagB { animation: pxFlagB 1.1s steps(1) infinite; }
@keyframes pxFlagA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pxFlagB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.bscene.pxc .px-star { animation: pxStar 3.6s steps(1) infinite; }
@keyframes pxStar { 0%, 100% { opacity: 1; } 20% { opacity: .35; } 45% { opacity: .85; } 70% { opacity: .2; } }
.bscene.pxc .px-cloud { animation: pxCloud 48s steps(24) infinite alternate; }
@keyframes pxCloud { from { transform: translateX(-3%); } to { transform: translateX(5%); } }
.bscene.pxc .px-fog { animation: pxFog 30s steps(20) infinite alternate; opacity: .9; }
@keyframes pxFog { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.bscene.pxc .px-bat { animation: pxBat 16s steps(64) infinite; }
@keyframes pxBat { 0% { transform: translate(-40%, 8%); } 60% { transform: translate(70%, -14%); } 60.01%, 100% { transform: translate(140%, -14%); } }
@media (prefers-reduced-motion: reduce) { .bscene.pxc .px-l { animation: none !important; } .bscene.pxc .px-flagB { opacity: 0; } }

/* shared animations for the pixel scenes (pixel-scenes.js); timings come from each layer's inline --d */
.bscene.pxc .px-fa { animation: pxFlagA var(--d, 1.1s) steps(1) infinite; }
.bscene.pxc .px-fb { animation: pxFlagB var(--d, 1.1s) steps(1) infinite; }
.bscene.pxc .px-pulse { animation: pxPulse var(--d, 3s) ease-in-out infinite; }
@keyframes pxPulse { 0%, 100% { opacity: 1; } 50% { opacity: var(--lo, .5); } }
.bscene.pxc .px-drift { animation: pxDrift var(--d, 40s) steps(var(--st, 16)) infinite alternate; }
@keyframes pxDrift { from { transform: translateX(calc(var(--dx, 3%) * -1)); } to { transform: translateX(var(--dx, 3%)); } }
.bscene.pxc .px-move { animation: pxMove var(--d, 30s) steps(var(--st, 120)) infinite; }
@keyframes pxMove { from { transform: translateX(var(--from, -50%)); } to { transform: translateX(var(--to, 50%)); } }
.bscene.pxc .px-bob { animation: pxBob var(--d, 2.4s) steps(1) infinite; }
@keyframes pxBob { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(1.18%); } }
.bscene.pxc .px-blink { animation: pxBlink 9s steps(1) infinite; }
@keyframes pxBlink { 0%, 62% { opacity: 0; } 63%, 78% { opacity: 1; } 79%, 100% { opacity: 0; } }
.bscene.pxc .px-flash { animation: pxFlash 7s steps(1) infinite; }
@keyframes pxFlash { 0%, 70% { opacity: 0; } 71% { opacity: 1; } 72% { opacity: 0; } 73% { opacity: .8; } 75%, 100% { opacity: 0; } }
.bscene.pxc .px-rise { animation: pxRise 6s steps(40) infinite; }
@keyframes pxRise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-47%); opacity: .2; } }
/* where each pixel scene is centred when a narrow card crops it */
.bscene.px-hoard .px-l { object-position: 52% 70%; }
.bscene.px-stormtower .px-l { object-position: 34% 40%; }
.bscene.px-tavern .px-l { object-position: 50% 60%; }
.bscene.px-harbor .px-l { object-position: 44% 55%; }
.bscene.px-sunken .px-l { object-position: 50% 45%; }
.bscene.px-skyisles .px-l { object-position: 40% 50%; }