#effect-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible;--lime:#c2f970}
#effect-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#effect-route{fill:none;stroke:var(--lime);stroke-width:.045;stroke-dasharray:1.4 1.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 calc(var(--cell)*.09) var(--lime));opacity:0}
#effect-glows rect{fill:none;stroke:var(--lime);stroke-width:.07;opacity:0;filter:drop-shadow(0 0 calc(var(--cell)*.08) var(--lime))}
#effect-ring{fill:none;stroke:var(--lime);stroke-width:.04;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
#effect-layer.loop #effect-route{opacity:.88;animation:loop-dashes 1s linear infinite}
#effect-layer.loop #effect-glows rect{opacity:.94;animation:effect-pulse .25s ease-in-out infinite alternate}
#effect-layer.take #effect-glows rect{animation:take-glow 1.1s ease-out both}
#effect-layer.loop #effect-ring,#effect-layer.take #effect-ring{animation:effect-ring .8s cubic-bezier(.22,1,.36,1) both}
#effect-layer.fading #effect-route,#effect-layer.fading #effect-glows{opacity:0;transition:opacity .3s ease-out}
#play-area.effect-active #toast{top:var(--effect-toast-top);left:50%;transform:translate(-50%,-50%);font-size:clamp(18px,calc(var(--effect-cell)*.7),25px);white-space:nowrap;z-index:4}
#play-area.effect-active #toast.show{background:#c2f970;color:#172013;border-radius:5px;padding:4px 10px}
.tile.take-rotating .arrow{animation:take-turn .4s cubic-bezier(.34,1.56,.64,1) both,take-color 1.3s ease-out both}
@keyframes effect-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4.667)}}
@keyframes effect-pulse{from{stroke-width:.06;opacity:.7}to{stroke-width:.11;opacity:1}}
@keyframes take-glow{0%,65%{opacity:.95}100%{opacity:0}}
@keyframes loop-dashes{to{stroke-dashoffset:-2.6}}
@keyframes take-turn{from{transform:rotate(var(--take-from))}to{transform:rotate(var(--take-to))}}
@keyframes take-color{0%,30.8%{color:#c2f970}100%{color:#e8f3ef}}
@media(prefers-reduced-motion:reduce){
 #effect-layer.loop #effect-route,#effect-layer.loop #effect-glows rect{animation:none}
 #effect-layer.loop #effect-ring,#effect-layer.take #effect-ring{animation:effect-ring-still .8s ease-out both}
 .tile.take-rotating .arrow{animation:take-color 1.3s ease-out both;transform:rotate(var(--take-to))!important}
}
@keyframes effect-ring-still{0%{opacity:.9}100%{opacity:0}}