/* Effects never escape the board or intercept gameplay/controls. */
.sweet-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:8;contain:layout paint;isolation:isolate}
.sweet-effects i{position:absolute;display:block;pointer-events:none;font-style:normal}
.candy-motion{width:100%;height:100%;display:grid;place-items:center;transform-origin:50% 56%;will-change:transform}
.candy-motion.candy-held{transition:none!important;filter:brightness(1.07)}
.candy.clearing{animation:none;z-index:6}
.fx-crumb{width:7px;height:10px;border:1px solid #fff5b8;border-radius:2px 5px 3px 2px;box-shadow:inset 0 -3px #89564744,0 1px 3px #50325344}
.fx-delivery{width:30px;height:18px;border-radius:0 0 15px 15px;border:3px solid #fff3bd;box-shadow:0 0 15px #ffe07e;background:#e7ab5e77;animation:fx-delivery .4s ease-out both}
.fx-pop{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff 0 16%,var(--fx-color) 25% 55%,transparent 72%);transform:translate(-50%,-50%);animation:fx-pop .36s ease-out both}
.fx-particle{width:8px;height:8px;border-radius:3px;background:var(--fx-color);box-shadow:0 0 5px #fff9ca;animation:fx-particle .56s cubic-bezier(.1,.5,.4,1) both;will-change:transform,opacity}
.fx-star{width:13px;height:13px;clip-path:polygon(50% 0,62% 35%,100% 50%,62% 62%,50% 100%,35% 62%,0 50%,35% 35%);border-radius:0}
.fx-ring{width:var(--fx-size);height:var(--fx-size);border:5px solid var(--fx-color);border-radius:50%;background:radial-gradient(circle,#fff7c966,transparent 65%);box-shadow:0 0 12px 4px #fff4b7,inset 0 0 13px #fff9da;animation:fx-ring .5s cubic-bezier(.1,.5,.4,1) both;will-change:transform,opacity}
.fx-beam{background:linear-gradient(transparent,var(--fx-color) 25%,#fff 46% 54%,var(--fx-color) 75%,transparent);box-shadow:0 0 18px #ffefa4;animation:fx-beam .38s ease-out both}
.fx-horizontal{left:0!important;width:100%;height:var(--fx-width);transform:translateY(-50%)}
.fx-vertical{top:0!important;height:100%;width:var(--fx-width);transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--fx-color) 25%,#fff 46% 54%,var(--fx-color) 75%,transparent)}
.fx-lightning{position:absolute;inset:0;overflow:visible;animation:fx-network .64s ease-in-out both;filter:drop-shadow(0 0 4px #fff2ad);pointer-events:none}
.fx-target{width:38px;height:38px;border:3px solid #fff7da;border-radius:50%;box-shadow:0 0 14px 4px var(--fx-color);animation:fx-target .6s ease-in-out both}
.fx-fish{width:50px;height:50px;filter:drop-shadow(0 0 7px #fff7ca);will-change:transform}
.fx-fish svg{width:100%;height:100%}
.candy.fx-charged svg{filter:brightness(1.4) drop-shadow(0 0 7px #fff2ab)}
.candy.fx-source svg{animation:fx-source .2s ease-in-out infinite alternate}
.board.fx-shake{animation:fx-shake .22s ease-out both}
@keyframes fx-pop{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}60%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
@keyframes fx-delivery{0%{transform:translate(-50%,-50%) scale(.75);opacity:.8}35%{transform:translate(-50%,-65%) scale(1.25,.8);opacity:1}100%{transform:translate(-50%,-110%) scale(1.5);opacity:0}}
@keyframes fx-particle{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}35%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(180deg) scale(.25);opacity:0}}
@keyframes fx-ring{0%{transform:translate(-50%,-50%) scale(.18);opacity:1}55%{opacity:.75}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes fx-beam{0%{opacity:0;filter:brightness(2)}15%{opacity:1;filter:brightness(1.6)}70%{opacity:.85}100%{opacity:0}}
@keyframes fx-network{0%{opacity:0}12%{opacity:1}22%{opacity:.65}35%,65%{opacity:1}78%{opacity:.7}100%{opacity:0}}
@keyframes fx-target{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}30%,70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
@keyframes fx-source{from{transform:scale(1);filter:brightness(1.25)}to{transform:scale(1.13);filter:brightness(1.7) drop-shadow(0 0 7px #fff2aa)}}
@keyframes fx-shake{0%,100%{transform:translate(0)}15%{transform:translate(calc(-1 * var(--fx-shake)),2px)}30%{transform:translate(var(--fx-shake),-2px)}50%{transform:translate(calc(-.7 * var(--fx-shake)),1px)}70%{transform:translate(calc(.5 * var(--fx-shake)),-1px)}}