@property --rla { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.rl { position: relative; }
.rl-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.rl-fx::before, .rl-fx::after { content: ''; position: absolute; pointer-events: none; }

.rl1 .rl-fx { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); }

.rl2 .rl-fx { box-shadow: inset 0 0 0 2px var(--rc), inset 0 -22px 20px -14px color-mix(in srgb, var(--rc) 45%, transparent); }

.rl3 .rl-fx { box-shadow: inset 0 0 0 2px var(--rc), inset 0 -26px 22px -14px color-mix(in srgb, var(--rc) 55%, transparent); }
.rl3 .rl-fx::before, .rl4 .rl-fx::before { inset: 3px; background:
  linear-gradient(var(--rc), var(--rc)) 0 0 / 10px 3px, linear-gradient(var(--rc), var(--rc)) 0 0 / 3px 10px,
  linear-gradient(var(--rc), var(--rc)) 100% 0 / 10px 3px, linear-gradient(var(--rc), var(--rc)) 100% 0 / 3px 10px,
  linear-gradient(var(--rc), var(--rc)) 0 100% / 10px 3px, linear-gradient(var(--rc), var(--rc)) 0 100% / 3px 10px,
  linear-gradient(var(--rc), var(--rc)) 100% 100% / 10px 3px, linear-gradient(var(--rc), var(--rc)) 100% 100% / 3px 10px;
  background-repeat: no-repeat; }

.rl4 .rl-fx, .rl5 .rl-fx, .rl6 .rl-fx { overflow: hidden; }
.rl4 .rl-fx { box-shadow: inset 0 0 0 2px var(--rc), inset 0 0 0 4px #120a22, inset 0 0 0 5px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 -30px 26px -14px color-mix(in srgb, var(--rc) 60%, transparent); }
.rl.rl4, .rl.rl5, .rl.rl6 { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--rc) 45%, transparent); }
.rl4 .rl-fx::after, .rl5 .rl-fx::after, .rl6 .rl-fx::after { top: -20%; bottom: -20%; left: 0; width: 28%; background: linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, .38) 30% 46%, transparent 46% 56%, rgba(255, 255, 255, .2) 56% 64%, transparent 64%); transform: translateX(-120%); animation: rl-shine 5s steps(20) infinite; }
.rl5 .rl-fx::after { animation-duration: 3.6s; }
.rl6 .rl-fx::after { animation-duration: 2.8s; }
@keyframes rl-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(420%); } }

.rl5 .rl-fx { box-shadow: inset 0 0 0 3px var(--rc), inset 0 0 0 5px #120a22, inset 0 0 0 6px var(--rc), inset 0 -36px 30px -14px color-mix(in srgb, var(--rc) 65%, transparent); }
.rl.rl5 { animation: rl-pulse 2.4s steps(6) infinite; }
.rl5 .rl-fx::before { left: 0; right: 0; top: 0; height: 200%; background:
  radial-gradient(circle at 12% 10%, var(--rc) 0 1.5px, transparent 2px), radial-gradient(circle at 38% 30%, #ffd27a 0 1px, transparent 1.5px),
  radial-gradient(circle at 70% 18%, var(--rc) 0 1.5px, transparent 2px), radial-gradient(circle at 88% 42%, #ffffff 0 1px, transparent 1.5px),
  radial-gradient(circle at 22% 62%, var(--rc) 0 1.5px, transparent 2px), radial-gradient(circle at 56% 78%, #ffd27a 0 1px, transparent 1.5px),
  radial-gradient(circle at 80% 90%, var(--rc) 0 1.5px, transparent 2px);
  background-size: 100% 50%; animation: rl-rise 3s steps(24) infinite; opacity: .8; }
@keyframes rl-rise { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes rl-pulse { 0%, 100% { box-shadow: 0 0 8px 1px color-mix(in srgb, var(--rc) 40%, transparent); } 50% { box-shadow: 0 0 16px 3px color-mix(in srgb, var(--rc) 70%, transparent); } }

.rl6 .rl-fx { box-shadow: inset 0 0 0 3px var(--rc), inset 0 0 0 5px #ffffff, inset 0 0 0 6px var(--rc), inset 0 -40px 32px -14px color-mix(in srgb, var(--rc) 70%, transparent); }
.rl.rl6 { animation: rl-pulse 2s steps(6) infinite; }
.rl6 .rl-fx::before { inset: 0; background:
  linear-gradient(#fff, #fff) 18% 22% / 2px 8px, linear-gradient(#fff, #fff) calc(18% - 3px) calc(22% + 3px) / 8px 2px,
  linear-gradient(var(--rc), var(--rc)) 82% 30% / 2px 8px, linear-gradient(var(--rc), var(--rc)) calc(82% + 3px) calc(30% + 3px) / 8px 2px,
  linear-gradient(#fff, #fff) 70% 70% / 2px 6px, linear-gradient(#fff, #fff) calc(70% + 2px) calc(70% + 2px) / 6px 2px;
  background-repeat: no-repeat; animation: rl-twinkle 1.6s steps(4) infinite; }
@keyframes rl-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.rl7 .rl-fx, .rl8 .rl-fx, .rl9 .rl-fx { overflow: hidden; }
.rl7 .rl-fx::before, .rl8 .rl-fx::before, .rl9 .rl-fx::before { inset: 0; padding: 4px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: rl-spin 3s steps(24) infinite; }
@keyframes rl-spin { to { --rla: 360deg; } }
.rl7 .rl-fx::before { background: conic-gradient(from var(--rla), #ff6fc8, #f2c23a, #8dff9a, #6fd6ff, #b98cff, #ff6fc8); }
.rl.rl7 { box-shadow: 0 0 14px 3px rgba(255, 111, 200, .45), 0 0 4px 1px rgba(111, 214, 255, .6); animation: rl-prism 3s steps(12) infinite; }
@keyframes rl-prism { 0%, 100% { box-shadow: 0 0 14px 3px rgba(255, 111, 200, .5); } 33% { box-shadow: 0 0 14px 3px rgba(242, 194, 58, .5); } 66% { box-shadow: 0 0 14px 3px rgba(111, 214, 255, .5); } }
.rl7 .rl-fx::after, .rl8 .rl-fx::after { top: -20%; bottom: -20%; left: 0; width: 30%; background: linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, .5) 30% 48%, transparent 48%); transform: translateX(-120%); animation: rl-shine 2.6s steps(20) infinite; }

.rl8 .rl-fx::before { background: conic-gradient(from var(--rla), #ffd25a, #ffffff, #4aa8f0, #ffffff, #ffd25a, #8fd0ff, #ffd25a); animation-duration: 5s; }
.rl.rl8 { box-shadow: 0 0 18px 5px rgba(255, 210, 90, .5), 0 0 6px 2px rgba(143, 208, 255, .8); }

.rl9 .rl-fx::before { background: conic-gradient(from var(--rla), #000000 0 26%, #2a0f4a 30%, #c08bff 33%, #2a0f4a 36%, #000000 40% 64%, #141c5c 68%, #4a5adf 71%, #141c5c 74%, #000000 78%); animation-direction: reverse; animation-duration: 2.2s; }
.rl.rl9 { box-shadow: 0 0 0 3px #000000, 0 0 0 4px #2a0f4a, 0 0 18px 6px rgba(0, 0, 0, .95), 0 0 30px 10px rgba(42, 15, 74, .55); }
.rl9 .rl-fx::after { inset: -30%; border-radius: 50%; background: radial-gradient(circle, transparent 0 40%, rgba(138, 60, 255, .35) 44%, transparent 48%, transparent 60%, rgba(20, 28, 92, .5) 64%, transparent 68%); animation: rl-pull 2s steps(16) infinite; }
@keyframes rl-pull { from { transform: scale(1.4); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.3); opacity: 0; } }

.rl7:hover, .rl8:hover, .rl9:hover { z-index: 2; }

@media (prefers-reduced-motion: reduce) { .rl, .rl .rl-fx::before, .rl .rl-fx::after { animation: none !important; } }

.rl.rl9 { box-shadow: 0 0 0 3px #000000, 0 0 0 5px #4a1a8a, 0 0 22px 8px rgba(138, 60, 255, .55), 0 0 44px 16px rgba(20, 28, 92, .6); animation: rl-voidaura 2.2s steps(8) infinite; }
@keyframes rl-voidaura { 0%, 100% { box-shadow: 0 0 0 3px #000000, 0 0 0 5px #4a1a8a, 0 0 18px 6px rgba(138, 60, 255, .45), 0 0 40px 14px rgba(20, 28, 92, .55); } 50% { box-shadow: 0 0 0 3px #000000, 0 0 0 5px #8a3cff, 0 0 30px 12px rgba(138, 60, 255, .75), 0 0 60px 22px rgba(42, 15, 74, .8); } }
.rl9 .rl-fx::before { padding: 5px; background: conic-gradient(from var(--rla), #000000 0 20%, #4a1a8a 24%, #f0e0ff 26%, #8a3cff 28%, #000000 34% 54%, #141c5c 58%, #c8d4ff 60%, #3a4adf 62%, #000000 68%); animation-duration: 1.6s; }
.rl9 .rl-fx::after { background: radial-gradient(circle, transparent 0 38%, rgba(192, 139, 255, .8) 41%, transparent 45% 58%, rgba(74, 90, 223, .75) 61%, transparent 65%); animation-duration: 1.4s; }
.rl-fx2 { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.rl-fx2::before, .rl-fx2::after { content: ''; position: absolute; pointer-events: none; }
.rl9 .rl-fx2::before { inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(138, 60, 255, .32) 0 10deg, transparent 10deg 30deg, rgba(58, 74, 223, .26) 30deg 38deg, transparent 38deg 60deg); -webkit-mask: radial-gradient(circle, transparent 0 14%, #000 34%, transparent 70%); mask: radial-gradient(circle, transparent 0 14%, #000 34%, transparent 70%); mix-blend-mode: screen; animation: rl-swirl 4s steps(48) infinite reverse; }
@keyframes rl-swirl { to { transform: rotate(360deg); } }
.rl9 .rl-fx2::after { inset: 0; box-shadow: inset 0 0 0 2px #f0e0ff, inset 0 0 18px 4px #8a3cff, 0 0 0 1px #c08bff; opacity: 0; animation: rl-zap 3.1s steps(1) infinite; }
@keyframes rl-zap { 0%, 78% { opacity: 0; } 80% { opacity: 1; } 82% { opacity: 0; } 85% { opacity: .8; } 87%, 100% { opacity: 0; } }
.rl9 .card-art > *, .rl9 .rss-art > *, .rl9 .rvb-art > *, .insp-stage.rl9 > canvas { animation: rl-glitch 3.1s steps(1) infinite; }
@keyframes rl-glitch { 0%, 79% { transform: none; filter: none; } 80% { transform: translate(-2px, 0) skewX(-6deg); filter: drop-shadow(3px 0 0 #8a3cff) drop-shadow(-3px 0 0 #3a4adf); } 82% { transform: translate(2px, 0) skewX(4deg); } 84% { transform: scale(.94); filter: drop-shadow(0 0 4px #8a3cff); } 87%, 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .rl-fx2::before, .rl-fx2::after, .rl9 .card-art > *, .rl9 .rss-art > *, .rl9 .rvb-art > * { animation: none !important; } }
.rl10 .rl-fx { overflow: hidden; }
.rl10 .rl-fx::before { inset: 0; padding: 5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); background: conic-gradient(from var(--rla), #ffffff 0 3%, #a3a8b2 3% 10%, #4fc46a 10% 20%, #4b7bff 20% 30%, #9a55ff 30% 40%, #ffffff 40% 43%, #f5a524 43% 50%, #eb3b3b 50% 60%, #6fd6ff 60% 70%, #ff6fc8 70% 80%, #ffd25a 80% 90%, #8a3cff 90% 100%); animation: rl-spin 1.8s steps(30) infinite; }
.rl.rl10 { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(255, 255, 255, .45); animation: rl-infaura 4s steps(10) infinite; }
@keyframes rl-infaura {
  0%, 100% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(163, 168, 178, .55), 0 0 54px 20px rgba(138, 60, 255, .35); }
  10% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(79, 196, 106, .6), 0 0 54px 20px rgba(163, 168, 178, .35); }
  20% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(75, 123, 255, .6), 0 0 54px 20px rgba(79, 196, 106, .35); }
  30% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(154, 85, 255, .6), 0 0 54px 20px rgba(75, 123, 255, .35); }
  40% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(245, 165, 36, .6), 0 0 54px 20px rgba(154, 85, 255, .35); }
  50% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(235, 59, 59, .6), 0 0 54px 20px rgba(245, 165, 36, .35); }
  60% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(111, 214, 255, .6), 0 0 54px 20px rgba(235, 59, 59, .35); }
  70% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(255, 111, 200, .6), 0 0 54px 20px rgba(111, 214, 255, .35); }
  80% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(255, 210, 90, .6), 0 0 54px 20px rgba(255, 111, 200, .35); }
  90% { box-shadow: 0 0 0 3px #05030a, 0 0 0 5px #ffffff, 0 0 0 7px #05030a, 0 0 26px 10px rgba(138, 60, 255, .6), 0 0 54px 20px rgba(255, 210, 90, .35); }
}
.rl10 .rl-fx::after { inset: -30%; border-radius: 0; background: radial-gradient(closest-side, transparent 0 34%, rgba(255, 255, 255, .7) 36%, transparent 39% 52%, rgba(255, 111, 200, .55) 54%, transparent 57% 70%, rgba(111, 214, 255, .5) 72%, transparent 75%); animation: rl-push 1.6s steps(16) infinite; }
@keyframes rl-push { from { transform: scale(.3) rotate(0deg); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1.5) rotate(45deg); opacity: 0; } }
.rl10 .rl-fx2::before { inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .34) 0 6deg, transparent 6deg 18deg, rgba(79, 196, 106, .26) 18deg 24deg, transparent 24deg 36deg, rgba(255, 111, 200, .26) 36deg 42deg, transparent 42deg 54deg, rgba(75, 123, 255, .26) 54deg 60deg, transparent 60deg 72deg); -webkit-mask: radial-gradient(circle, transparent 0 12%, #000 30%, transparent 72%); mask: radial-gradient(circle, transparent 0 12%, #000 30%, transparent 72%); mix-blend-mode: screen; animation: rl-swirl 6s steps(72) infinite; }
.rl10 .rl-fx2::after { inset: 0; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 2px #ffffff; opacity: 0; animation: rl-ascend 6.4s steps(1) infinite; }
@keyframes rl-ascend { 0%, 90% { opacity: 0; } 91% { opacity: .85; } 92.5% { opacity: .45; } 94% { opacity: .2; } 95.5%, 100% { opacity: 0; } }
.rl10:hover { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .rl10 .rl-fx::before, .rl10 .rl-fx::after, .rl.rl10, .rl10 .rl-fx2::before, .rl10 .rl-fx2::after { animation: none !important; } }

html body .rl.rl0 { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, #1a1530), #16122a); }
html body .rl.rl1 { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, #1a1036), color-mix(in srgb, var(--rc) 8%, #120a22)); }
html body .rl.rl2 { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 26%, #1a1036), color-mix(in srgb, var(--rc) 10%, #120a22)); }
html body .rl.rl3 { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, #1a1036), color-mix(in srgb, var(--rc) 12%, #120a22)); }
html body .rl.rl4 { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 40%, #1a1036), color-mix(in srgb, var(--rc) 14%, #120a22) 75%); }
html body .rl.rl5 { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 44%, #1a1036), color-mix(in srgb, var(--rc) 16%, #120a22) 75%); }
html body .rl.rl6 { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--rc) 46%, #102036), color-mix(in srgb, var(--rc) 16%, #0a1222) 75%); }
html body .rl.rl7 { background: linear-gradient(135deg, color-mix(in srgb, #ff6fc8 34%, #1a1036), color-mix(in srgb, #f2c23a 26%, #1a1036) 35%, color-mix(in srgb, #6fd6ff 30%, #1a1036) 70%, color-mix(in srgb, #b98cff 34%, #1a1036)); }
html body .rl.rl10 { background: radial-gradient(ellipse at 50% 40%, #1c1430, #05030a 75%); }
html[data-ui=arcade] body .card.rl { border-image: none; outline: 3px solid #0e0c18; outline-offset: 0; }
html[data-ui=arcade] body .card.rl0 .rl-fx, html[data-ui=arcade] body .card.rl0 { box-shadow: inset 0 0 0 2px #5c5674; }