@property --echo-angle{syntax:'<angle>';initial-value:180deg;inherits:false}
.game-card.has-echo-frame{--echo-inner:3px;--echo-outer:1px;--echo-radius:12px;--echo-blur:4px;padding:0;border:0;border-radius:var(--echo-radius);background:#08121b;overflow:visible;isolation:isolate;box-shadow:0 1px 2px 1px #000c,0 4px 13px #0006}
.has-echo-frame .card-border{inset:0;border:0;border-radius:inherit}
.has-echo-frame::before,.has-echo-frame::after{content:'';position:absolute;inset:calc(-1 * var(--echo-outer));padding:calc(var(--echo-inner) + var(--echo-outer));border-radius:calc(var(--echo-radius) + var(--echo-outer));background:linear-gradient(var(--echo-angle),var(--echo-one) 25%,var(--echo-two) 75%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;--echo-angle:180deg}
.has-echo-frame::before{z-index:-1;filter:blur(var(--echo-blur));opacity:.45}
.has-echo-frame::after{z-index:5}
.echo-frame-live::before,.echo-frame-live::after{animation:echo-frame-turn var(--echo-period) linear var(--echo-delay) infinite}
@keyframes echo-frame-turn{from{--echo-angle:180deg}to{--echo-angle:540deg}}
.motion-paused .has-echo-frame::before,.motion-paused .has-echo-frame::after{animation:none;--echo-angle:180deg}
