/* Mononster — Legendary signature moves (see signatures.js). */
.sig { position: fixed; inset: 0; z-index: 150; overflow: hidden; pointer-events: auto; cursor: pointer; contain: strict; -webkit-user-select: none; user-select: none; touch-action: manipulation; --c1: #ffc533; --c2: #fff; }
.sig-stage, .sig-bg, .sig-fx, .sig-top, .sig-cv { position: absolute; inset: 0; }
.sig-cv { width: 100%; height: 100%; pointer-events: none; }
.sig-fx > *, .sig-top > * { position: absolute; pointer-events: none; will-change: transform, opacity; }
.sig-clock { position: absolute; width: 1px; height: 1px; left: 0; top: 0; opacity: 0; pointer-events: none; }

/* Backdrops (static gradients; only their opacity animates) */
.sig-bg { background: radial-gradient(ellipse at 50% 42%, #0d2430ee, #020a0ff5 72%); }
.sig-bg-owl { background: radial-gradient(ellipse at 50% 40%, #231445f0, #07031af7 70%); }
.sig-bg-healer { background: radial-gradient(ellipse at 50% 40%, #0d3a26ee, #020d08f7 72%); }
.sig-bg-anubis { background: radial-gradient(ellipse at 50% 38%, #3a2808ee, #0a0602f7 70%), #0a0602; }
.sig-bg-resurrect { background: radial-gradient(ellipse at 50% 40%, #0b3020ee, #020c07f7 72%); }
.sig-bg-mirror { background: radial-gradient(ellipse at 50% 42%, #0c3346ee, #020b12f7 72%); }
.sig-bg-no { background: radial-gradient(ellipse at 50% 42%, #10285cee, #02061af7 72%); }
.sig-bg-royal { background: radial-gradient(ellipse at 50% 42%, #4a0d0ef0, #120203f7 72%); }
.sig-bg-bakame { background: radial-gradient(ellipse at 50% 38%, #11505cee, #031418f7 72%); }

/* The card */
.sig-card { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 3px #ffe39a, 0 0 0 6px #8a5a12, 0 0 34px 6px var(--c1), 0 18px 40px #000c; }
.sig-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sig-sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 28%; background: linear-gradient(90deg, #fff0, #ffffff55 50%, #fff0); }
.sig-card.mirror { border-radius: 50%; box-shadow: inset 0 0 30px #4fe3ffaa, 0 0 30px 4px #4fe3ff88; }

/* Title */
.sig-title { left: 0; right: 0; display: grid; justify-items: center; gap: 2px; text-align: center; }
.sig-kicker { font: 800 clamp(11px, 2.8vw, 15px)/1 var(--body, Montserrat, sans-serif); letter-spacing: .32em; padding-left: .32em; color: var(--c1); text-shadow: 0 1px 0 #000, 0 0 10px #000; }
.sig-name { font: 700 clamp(34px, 11vw, 72px)/1.05 var(--display, Recharge, Montserrat, sans-serif); color: #fff; letter-spacing: .02em; padding: 0 .1em; -webkit-text-stroke: 2px #3a2400; paint-order: stroke fill; text-shadow: 0 3px 0 #3a2400, 0 0 22px var(--c1), 0 0 4px var(--c1); }
.sig-reduced .sig-title { transform: translateY(-50%); }

/* Generic FX */
.sig-flash { border-radius: 0; }
.sig-flash.gold { background: radial-gradient(circle, #ffe9a8 0, #ffcf5a88 25%, #ffcf5a00 60%); }
.sig-flash.white { background: radial-gradient(circle, #ffffff 0, #ffffffaa 20%, #ffffff00 60%); }
.sig-flash.red { background: radial-gradient(circle, #ff5a3c66 0, #ff3b2f33 30%, #ff3b2f00 65%); }
.sig-flare { border-radius: 50%; }
.sig-flare.gold { background: radial-gradient(circle, #fffbe0 0, #ffd76acc 18%, #ffb83a55 40%, #ffb83a00 68%); }
.sig-flare.sun { background: radial-gradient(ellipse at 50% 0, #ffe08acc 0, #ffc95a55 30%, #ffc95a00 70%); }
.sig-shock { border-radius: 50%; border: 6px solid #fff; box-shadow: 0 0 18px #fff, inset 0 0 18px #fff; }
.sig-shock.gold { border-color: #ffd77a; box-shadow: 0 0 18px #ffcf5a, inset 0 0 14px #ffcf5a; }
.sig-shock.blue { border-color: #8fd8ff; box-shadow: 0 0 22px #4fb8ff, inset 0 0 16px #4fb8ff; }
.sig-shock.white { border-width: 3px; }
.sig-rays { border-radius: 50%; }
.sig-rays.green { background: repeating-conic-gradient(from 0deg, #a8ffcc55 0 6deg, #a8ffcc00 6deg 20deg); -webkit-mask: radial-gradient(circle, #000 20%, #0000 70%); mask: radial-gradient(circle, #000 20%, #0000 70%); }
.sig-rays.sky { background: repeating-conic-gradient(from 0deg, #fff7c522 0 9deg, #fff7c500 9deg 26deg); -webkit-mask: radial-gradient(circle, #000 10%, #0000 65%); mask: radial-gradient(circle, #000 10%, #0000 65%); }
.sig-orb { border-radius: 50%; }
.sig-orb.fire { background: radial-gradient(circle, #fff 0 14%, #ffd36b 26%, #ff8a2a 46%, #ff5a1a55 62%, #ff5a1a00 72%); }
.sig-orb.mirror { background: radial-gradient(circle, #fff 0 14%, #bff6ff 26%, #4fe3ff 44%, #ffc95a55 60%, #ffc95a00 72%); }
.sig-orb.red { background: radial-gradient(circle, #fff 0 12%, #ff9aa5 24%, #ff3b4f 44%, #c0103055 60%, #c0103000 72%); }

/* Black Owl */
.sig-night { left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(#05020ccc, #05020c00 75%); }
.sig-moon { border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fbf6ff, #d9ccff 55%, #a58cf0); box-shadow: 0 0 40px 12px #b88cff66, 0 0 120px 30px #b88cff33; }
.sig-eye { border-radius: 50%; background: radial-gradient(ellipse, #fff 0 10%, #c9ffd9 22%, #6dff9e 45%, #1fbf5a88 70%, #1fbf5a00 100%); box-shadow: 0 0 30px 8px #6dff9e88; }
.sig-wing svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sig-wing .p { fill: url(#sigwp); stroke: #c9a6ff; stroke-width: 1.5; }
.sig-wing .c { fill: url(#sigwc); stroke: #d8c2ff; stroke-width: 1; stroke-opacity: .6; }
.sig-wing .s { fill: #6a52c0; stroke: #e6d8ff; stroke-width: 1; stroke-opacity: .7; }
.sig-sweep { background: radial-gradient(ellipse closest-side, #e9dcff88, #b88cff44 45%, #b88cff00); }

/* The Healer */
.sig-column { top: 0; background: linear-gradient(90deg, #ffe9a800, #ffe9a855 25%, #fffbe0cc 50%, #ffe9a855 75%, #ffe9a800); -webkit-mask: linear-gradient(#0000, #000 12%, #000 80%, #0000); mask: linear-gradient(#0000, #000 12%, #000 80%, #0000); }
.sig-column.core { background: linear-gradient(90deg, #fff0, #ffffffee 50%, #fff0); }
.sig-groundring { border-radius: 50%; border: 4px solid #ffe59a; box-shadow: 0 0 22px #ffd76a, inset 0 0 16px #7dffb0; }

/* Anubis */
.sig-floor { display: grid; place-items: center; }
.sig-sigil { width: 100%; height: 100%; }
.sig-sigil svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sig-sigil svg * { fill: none; stroke: #ffcf5a; stroke-width: 1.6; }
.sig-sigil svg .w { stroke-width: 3.2; stroke: #ffe39a; }
.sig-sigil svg .f { fill: #ffcf5a; stroke: none; }
.sig-victim { border-radius: 8px; background: repeating-linear-gradient(45deg, #2a1d4a 0 8px, #1d1435 8px 16px); box-shadow: 0 0 0 2px #ffcf5a, 0 0 18px #000; }

/* Resurrection */
.sig-tree svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sig-tree path { fill: none; stroke-linecap: round; stroke-dasharray: 1 1.5; stroke-dashoffset: 1.2; }
.sig-tree .halo path { stroke: #5dffa0; stroke-opacity: .28; stroke-width: 11; }
.sig-tree .core path { stroke: #d9ffe8; stroke-width: 3; }
.sig-tree circle { fill: #e9fff2; transform-box: fill-box; transform-origin: center; opacity: 0; }

/* Reflection */
.sig-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sig-ring .band { fill: none; stroke: url(#sigrg); stroke-width: 11; }
.sig-ring .inner { fill: #4fe3ff14; stroke: #fff4b8; stroke-width: 1.5; stroke-opacity: .8; }
.sig-ring .spk { fill: #ffd77a; stroke: #8a5a12; stroke-width: 1; }
.sig-ring .gem { fill: #1fb6ff; stroke: #ffe08a; stroke-width: 2.5; }

/* NO */
.sig-stamp { left: 0; top: 0; padding: .04em .22em; border: clamp(5px, 1.6vw, 10px) solid #ff3b4f; border-radius: 18px; color: #ff3b4f; font: 700 clamp(64px, min(34vw, 26vh), 230px)/1 var(--display, Recharge, Montserrat, sans-serif); letter-spacing: .04em; background: #ffffff10; text-shadow: 0 0 2px #fff, 0 0 26px #ff3b4f; box-shadow: 0 0 26px #ff3b4f99, inset 0 0 26px #ff3b4f66; white-space: nowrap; }
.sig-stamp span { display: block; }

/* BIZIMA */
.sig-banner { background:
    linear-gradient(135deg, #ffcc4d 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(225deg, #ffcc4d 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(#a3141c, #6e0b10);
  border-left: 3px solid #ffcc4d; border-right: 3px solid #ffcc4d;
  -webkit-mask: linear-gradient(#000 calc(100% - 26px), #0000 calc(100% - 26px)), conic-gradient(from 135deg at 50% calc(100% - 26px), #000 90deg, #0000 0);
  mask: linear-gradient(#000 calc(100% - 26px), #0000 calc(100% - 26px)), conic-gradient(from 135deg at 50% calc(100% - 26px), #000 90deg, #0000 0);
  box-shadow: 0 6px 20px #0008; }
.sig-drum svg, .sig-crown svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Bakame */
.sig-die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; gap: 4%; border-radius: 20%; background: linear-gradient(145deg, #fff, #dfe9ec); box-shadow: inset 0 -4px 0 #b7c7cc, 0 6px 14px #0008; }
.sig-die i { display: block; width: 100%; height: 100%; min-width: 4px; min-height: 4px; border-radius: 50%; }
.sig-die i.on { background: #13303a; }
.sig-idea svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sig-idea .lines path { stroke: #fff6b0; stroke-width: 5; stroke-linecap: round; }
.sig-idea .star { fill: #ffe45c; stroke: #fff; stroke-width: 3; }
.sig-orbit::before { content: ''; position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, #b8ffd0 35%, #3fe08a 60%, #3fe08a00 75%); box-shadow: 0 0 16px #3fe08a; }
.sig-orbit { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .sig-sheen { display: none; }
}