@property --rgb { syntax: '<color>'; inherits: true; initial-value: #ff3b5c; }
@property --rgb2 { syntax: '<color>'; inherits: true; initial-value: #2fd2ff; }
@property --rga { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes inf-rgb {
  0%, 100% { --rgb: #ff3b5c; --rgb2: #2fd2ff; }
  17% { --rgb: #ffa21e; --rgb2: #8f5bff; }
  33% { --rgb: #f2ff3a; --rgb2: #ff3bd2; }
  50% { --rgb: #2dff8a; --rgb2: #ff3b5c; }
  67% { --rgb: #2fd2ff; --rgb2: #ffa21e; }
  83% { --rgb: #8f5bff; --rgb2: #2dff8a; }
}
@keyframes inf-rga { to { --rga: 360deg; } }
@keyframes inf-hue { to { filter: saturate(1.9) brightness(1.08) hue-rotate(360deg); } }
@keyframes inf-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 12% { opacity: 1; transform: scale(1) rotate(45deg); } 26% { opacity: 0; transform: scale(.5) rotate(90deg); } }
@keyframes inf-text { to { background-position: 200% 0; } }

.inf-rgb, .rt10, .rtag.rt10, .rl10, .r10, .cc.inf, [style*="#fff4ea" i], [style*="rgb(255, 244, 234)"] { --rc: var(--rgb) !important; --rc2: var(--rgb2) !important; animation: inf-rgb 3s linear infinite; }
[style*="color: rgb(255, 244, 234)"], [style*="color:#fff4ea" i], [style*="color: #fff4ea" i] { color: var(--rgb) !important; text-shadow: 0 0 6px color-mix(in srgb, var(--rgb) 70%, transparent); }
[style*="background: rgb(255, 244, 234)"], [style*="background-color: rgb(255, 244, 234)"] { background: var(--rgb) !important; color: #0b0618 !important; }
.rtag.rt10 { color: #0b0618; background: linear-gradient(90deg, #ff3b5c, #ffa21e, #f2ff3a, #2dff8a, #2fd2ff, #8f5bff, #ff3bd2, #ff3b5c) 0 0 / 200% 100%; animation: inf-rgb 3s linear infinite, inf-text 2.4s linear infinite; box-shadow: 0 0 10px 1px var(--rgb); }

.ck .cc.inf {
  background: conic-gradient(from var(--rga), #ff3b5c, #ffa21e, #f2ff3a, #2dff8a, #2fd2ff, #8f5bff, #ff3bd2, #ff3b5c);
  box-shadow: 0 0 0 2px #ffffff, 0 0 12px 2px var(--rgb), 0 0 30px 8px color-mix(in srgb, var(--rgb2) 45%, transparent), 0 6px 0 0 rgba(0, 0, 0, .45);
  animation: inf-rgb 3s linear infinite, inf-rga 2.4s linear infinite;
  z-index: 1;
}
.ck .cc.inf .cc-in {
  background: radial-gradient(75% 55% at 50% 40%, color-mix(in srgb, var(--rgb) 42%, transparent), transparent 72%), radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--rgb2) 35%, transparent), transparent 70%), linear-gradient(180deg, #0d0820, #020106);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6), inset 0 0 18px 2px color-mix(in srgb, var(--rgb) 40%, transparent);
}
.ck .cc.inf .cc-in::before { opacity: .38; background: repeating-linear-gradient(60deg, transparent 0 6px, color-mix(in srgb, var(--rgb) 60%, transparent) 6px 7px), repeating-linear-gradient(-60deg, transparent 0 6px, color-mix(in srgb, var(--rgb2) 55%, transparent) 6px 7px); }
.ck .cc.inf .cc-sheen { mix-blend-mode: screen; background: linear-gradient(115deg, transparent 22%, rgba(255, 59, 92, .55) 32%, rgba(255, 162, 30, .55) 38%, rgba(242, 255, 58, .5) 44%, rgba(45, 255, 138, .5) 50%, rgba(47, 210, 255, .55) 56%, rgba(143, 91, 255, .55) 62%, transparent 72%); background-size: 300% 300%; animation: cab-sheen 2.2s linear infinite; }
.ck .cc.inf::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none; z-index: 3;
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 12% 10% / 14px 14px no-repeat,
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 88% 22% / 14px 14px no-repeat,
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 18% 78% / 14px 14px no-repeat,
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 84% 90% / 14px 14px no-repeat;
  filter: drop-shadow(0 0 3px var(--rgb)) drop-shadow(0 0 6px var(--rgb2));
  animation: inf-twinkle 1.8s ease-in-out infinite;
}
.ck .cc.inf .cc-head { color: var(--rgb); text-shadow: 0 0 6px var(--rgb); font-weight: 700; }
.ck .cc.inf .cc-pip { background: var(--rgb); box-shadow: 0 0 0 1px #fff, 0 0 8px 2px var(--rgb); border-radius: 50%; }
.ck .cc.inf .cc-name { color: #fff; text-shadow: 0 0 6px var(--rgb), 0 1px 0 #000; }
.ck .cc.inf .cc-skin { color: transparent; background: linear-gradient(90deg, #ff3b5c, #ffa21e, #f2ff3a, #2dff8a, #2fd2ff, #8f5bff, #ff3bd2, #ff3b5c) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: inf-text 2.4s linear infinite; }
.ck .cc.inf .cc-art { filter: drop-shadow(2px 0 0 var(--rgb)) drop-shadow(-2px 0 0 var(--rgb)) drop-shadow(0 2px 0 var(--rgb2)) drop-shadow(0 -2px 0 var(--rgb2)) drop-shadow(0 0 8px var(--rgb)); }
.ck .cc.inf .cc-art canvas { animation: inf-hue 4s linear infinite; filter: saturate(1.9) brightness(1.08); }
.ck .cc.inf .cc-val { color: #fff; box-shadow: inset 0 0 0 1px var(--rgb), 0 0 8px var(--rgb); }
.pcr .rs-best .cc.inf { box-shadow: 0 0 0 2px #fff, 0 0 26px 6px var(--rgb), 0 0 70px 18px color-mix(in srgb, var(--rgb2) 55%, transparent), 0 14px 0 rgba(0, 0, 0, .4); }
.pcr .rs-best:has(.cc.inf) .rays.big { background: repeating-conic-gradient(from var(--rga) at 50% 50%, #ff3b5c 0 5deg, transparent 5deg 15deg, #f2ff3a 15deg 20deg, transparent 20deg 30deg, #2dff8a 30deg 35deg, transparent 35deg 45deg, #2fd2ff 45deg 50deg, transparent 50deg 60deg, #8f5bff 60deg 65deg, transparent 65deg 75deg, #ff3bd2 75deg 80deg, transparent 80deg 90deg); opacity: .55; animation: inf-rga 6s linear infinite; }

.rl.rl10, .card.r10, .rvb .rvb-tile.r10 {
  background: radial-gradient(75% 60% at 50% 42%, color-mix(in srgb, var(--rgb) 38%, #0d0820), #050310 78%) !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--rgb), 0 0 0 7px #050310, 0 0 18px 6px var(--rgb), 0 0 44px 14px color-mix(in srgb, var(--rgb2) 40%, transparent) !important;
  animation: inf-rgb 3s linear infinite, inf-rga 3s linear infinite !important;
}
.rl10 .rl-fx::before { background: conic-gradient(from var(--rga), #ff3b5c, #ffa21e, #f2ff3a, #2dff8a, #2fd2ff, #8f5bff, #ff3bd2, #ff3b5c) !important; animation: inf-rga 2.4s linear infinite !important; }
.rl10 .rl-fx::after { background: radial-gradient(closest-side, transparent 0 34%, color-mix(in srgb, var(--rgb) 70%, transparent) 36%, transparent 39% 52%, color-mix(in srgb, var(--rgb2) 60%, transparent) 54%, transparent 57%) !important; }
.rl10 .rl-fx2::before { background: repeating-conic-gradient(from var(--rga), color-mix(in srgb, var(--rgb) 45%, transparent) 0 6deg, transparent 6deg 20deg, color-mix(in srgb, var(--rgb2) 40%, transparent) 20deg 26deg, transparent 26deg 40deg) !important; }
.rl10 .rl-fx2::after { background: color-mix(in srgb, var(--rgb) 70%, #fff) !important; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--rgb2) !important; }
.card.r10::after { background: linear-gradient(90deg, #ff3b5c, #ffa21e, #f2ff3a, #2dff8a, #2fd2ff, #8f5bff, #ff3bd2) !important; }
.card.r10 .card-prism { --pg: linear-gradient(90deg, #ff3b5c, #ffa21e 16%, #f2ff3a 32%, #2dff8a 48%, #2fd2ff 64%, #8f5bff 80%, #ff3bd2); --pd: 1.6s; }
.card.r10 .card-art, .rvb .rvb-tile.r10 .rvb-art, .rl10 .rss-art { background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--rgb) 30%, transparent), transparent 70%) !important; }
.card.r10 .card-art > *, .rvb .rvb-tile.r10 .rvb-art > *, .rl10 .rss-art > * { filter: drop-shadow(2px 0 0 var(--rgb)) drop-shadow(-2px 0 0 var(--rgb)) drop-shadow(0 2px 0 var(--rgb2)) drop-shadow(0 -2px 0 var(--rgb2)) drop-shadow(0 0 8px var(--rgb)); }
.rvb .rvb-tile.r10 .rvb-rar, .rss .rl10 .rvb-rar { background: linear-gradient(90deg, #ff3b5c, #ffa21e, #f2ff3a, #2dff8a, #2fd2ff, #8f5bff, #ff3bd2, #ff3b5c) 0 0 / 200% 100% !important; color: #0b0618 !important; box-shadow: 0 0 0 2px #fff, 0 0 10px var(--rgb) !important; animation: inf-text 2.4s linear infinite; }
.insp-stage.rl10 { box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px var(--rgb), 0 0 0 8px #050310, 0 0 30px 10px var(--rgb), 0 0 80px 20px color-mix(in srgb, var(--rgb2) 45%, transparent) !important; }
.insp-stage.rl10 > canvas { filter: drop-shadow(0 0 10px var(--rgb)) drop-shadow(0 0 22px color-mix(in srgb, var(--rgb2) 70%, transparent)); }
.insp-rays.r10 { animation: inf-rgb 3s linear infinite; }
.insp-rays.r10::before { background: repeating-conic-gradient(#ff3b5c 0 4deg, transparent 4deg 12deg, #ffa21e 12deg 16deg, transparent 16deg 24deg, #f2ff3a 24deg 28deg, transparent 28deg 36deg, #2dff8a 36deg 40deg, transparent 40deg 48deg, #2fd2ff 48deg 52deg, transparent 52deg 60deg, #8f5bff 60deg 64deg, transparent 64deg 72deg, #ff3bd2 72deg 76deg, transparent 76deg 84deg) !important; opacity: .6; animation-duration: 9s !important; }

@media (prefers-reduced-motion: reduce) {
  .inf-rgb, .rt10, .rl10, .r10, .cc.inf, .ck .cc.inf::after, .ck .cc.inf .cc-art canvas, .ck .cc.inf .cc-sheen, .rtag.rt10, .ck .cc.inf .cc-skin, [style*="#fff4ea" i], [style*="rgb(255, 244, 234)"] { animation: none !important; }
}