/* Candy Wid V8 — FX aligned to the user's 2026-11-08 reference recording.
 * Shared by tutorial and normal game. No change to wagers, scoring, odds or user accounts.
 * Video around 01:49–01:51: dense coloured pixel debris, short light impact,
 * stacked/outlined arcade praise, 1–2 bold yellow rewards, short sequential drops.
 */
body.wild-tutorial-page .cw-v8-glint, body.wild-match-page .cw-v8-glint {
  position:absolute;z-index:3;pointer-events:none;width:30px;height:30px;
  margin:-15px;border-radius:50%;
  background:radial-gradient(circle,#ffffffb5 0 8%,var(--v8-color,#ffb3ee) 18%,transparent 59%);
  mix-blend-mode:screen;filter:none;opacity:0;
  animation:cw-v8-glint .37s ease-out var(--v8-delay,0ms) both;
}
@keyframes cw-v8-glint{
  0%{opacity:0;transform:scale(calc(.25 * var(--v8-scale,1)))}
  26%{opacity:.72;transform:scale(calc(.85 * var(--v8-scale,1)))}
  100%{opacity:0;transform:scale(calc(1.38 * var(--v8-scale,1)))}
}
body.wild-tutorial-page .cw-v8-dust,body.wild-match-page .cw-v8-dust{
  position:absolute;z-index:5;pointer-events:none;
  width:var(--v8-size,4px);height:var(--v8-size,4px);
  margin-left:calc(var(--v8-size,4px) / -2);margin-top:calc(var(--v8-size,4px) / -2);
  border-radius:1px;background:var(--v8-color,#fe8fd9);
  box-shadow:none;filter:none;opacity:0;will-change:transform,opacity;
  animation:cw-v8-dust .61s cubic-bezier(.16,.48,.28,1) var(--v8-delay,0ms) both;
}
body.wild-tutorial-page .cw-v8-dust-light,body.wild-match-page .cw-v8-dust-light {
  background:#fff9c0;box-shadow:0 0 2px var(--v8-color,#ffd45e);
}
body.wild-tutorial-page .cw-v8-gold,body.wild-match-page .cw-v8-gold{
  animation-duration:.72s;border-radius:1px;
}
@keyframes cw-v8-dust{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.55)}
  13%{opacity:1}
  41%{opacity:.92;transform:translate3d(calc(var(--v8-x,0px) * .44),calc(var(--v8-y,-10px) * .49),0) rotate(calc(var(--v8-rot,0deg) * .5)) scale(1)}
  100%{opacity:0;transform:translate3d(var(--v8-x,0px),var(--v8-y,-12px),0) rotate(var(--v8-rot,0deg)) scale(.34)}
}
body.wild-tutorial-page .cw-v8-chest-halo,body.wild-match-page .cw-v8-chest-halo{
  position:absolute;z-index:3;pointer-events:none;
  width:58px;height:58px;margin:-29px;border-radius:50%;
  background:radial-gradient(circle,#fff6ad90 0%,#ffc33c68 19%,transparent 58%);
  box-shadow:none;filter:none;opacity:0;
  animation:cw-v8-chest .57s ease-out both;
}
@keyframes cw-v8-chest{
  0%{opacity:0;transform:scale(.45)}
  36%{opacity:.8;transform:scale(var(--v8-scale,1))}
  100%{opacity:0;transform:scale(calc(1.45 * var(--v8-scale,1)))}
}
body.wild-tutorial-page .cw-v8-gain,body.wild-match-page .cw-v8-gain{
  position:absolute;z-index:15;pointer-events:none;width:max-content;
  transform:translateX(-50%);white-space:nowrap;
  font-family:'Baloo 2','Candy Baloo',system-ui,sans-serif;
  font-weight:1000;font-size:clamp(19px,5.3vw,26px);line-height:1;
  color:#ffe535;-webkit-text-stroke:2.4px #a52b81;paint-order:stroke fill;
  text-shadow:0 2px 0 #7e1a6c,0 0 3px #fff5a8;
  animation:cw-v8-gain .94s cubic-bezier(.18,.73,.34,1) var(--v8-label-delay,0ms) both;
}
@keyframes cw-v8-gain{
  0%{opacity:0;translate:0 10px;scale:.66}
  19%{opacity:1;translate:0 -6px;scale:1.19}
  40%{opacity:1;translate:0 -14px;scale:1.03}
  73%{opacity:1;translate:0 -26px;scale:1}
  100%{opacity:0;translate:0 -45px;scale:.91}
}
/* The original pieces snap and fade under dense pixel-sized dust — no white
   full-tile smoke, exaggerated squash, or large yellow ring. */
body.wild-tutorial-page .wild-board .wild-cell.is-match img,
body.wild-match-page .wild-board .wild-cell.is-match img{
  animation:cw-v8-match .34s cubic-bezier(.24,.72,.36,1) both!important;
}
@keyframes cw-v8-match{
  0%{opacity:1;transform:scale(1);filter:brightness(1)}
  29%{opacity:1;transform:scale(1.08);filter:brightness(1.28) saturate(1.18)}
  62%{opacity:.81;transform:scale(.92);filter:brightness(1.08)}
  100%{opacity:0;transform:scale(.22);filter:brightness(1)}
}
/* Keep all effect sizes tied to the same phone-width board at desktop sizes. */
@media(min-width:701px){
  body.wild-tutorial-page .cw-v8-gain,body.wild-match-page .cw-v8-gain{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  body.wild-tutorial-page .cw-v8-dust,body.wild-match-page .cw-v8-dust,
  body.wild-tutorial-page .cw-v8-glint,body.wild-match-page .cw-v8-glint,
  body.wild-tutorial-page .cw-v8-chest-halo,body.wild-match-page .cw-v8-chest-halo,
  body.wild-tutorial-page .cw-v8-gain,body.wild-match-page .cw-v8-gain{display:none!important}
}


/* V9: reference 00:24–00:32 — luminous backing behind the 4 guided sweets,
   with an extra pink-neon ring on the heart while touched or dragged.
   This is a selection effect, not a match explosion. */
body.wild-tutorial-page .wild-board .wild-cell.cw-route-tile{
  position:relative;isolation:isolate;z-index:5;
  background:transparent!important;border:0!important;border-radius:12px!important;
  box-shadow:none!important;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-route-tile::before,
body.wild-tutorial-page .wild-board .wild-cell.cw-guide-heart::before,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"])::before,
body.wild-match-page .wild-board .wild-cell.is-source:not([data-piece="C"])::before,
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"])::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:2px;border-radius:11px;
  background:radial-gradient(ellipse at 48% 45%,#fffefd 2%,#fff1fbef 52%,#ffb5e6d6 100%);
  border:1.5px solid #fffafc;
  box-shadow:0 0 0 1px #ffb0e5,0 0 6px #fffdfd,0 0 13px #ffb8efb8;
  animation:cw-route-tile-breathe 1.6s ease-in-out infinite;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-route-tile img,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked img,
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked img{
  position:relative;z-index:2;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-guide-heart::after,
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"])::after,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"])::after,
body.wild-match-page .wild-board .wild-cell.is-source:not([data-piece="C"])::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  inset:3px;border-radius:11px;border:2px solid #ff76d4;
  box-shadow:inset 0 0 4px #fff,0 0 5px #ff4cc1,0 0 10px #ff82e7;
  opacity:.76;animation:cw-heart-pick-glow 1s ease-in-out infinite;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"])::after,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"])::after{
  border-width:3px;opacity:1;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"]),
body.wild-match-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"]),
body.wild-match-page .wild-board .wild-cell.is-source:not([data-piece="C"]){
  z-index:20;isolation:isolate;
}
@keyframes cw-route-tile-breathe{
  0%,100%{filter:brightness(.96);opacity:.91}
  50%{filter:brightness(1.12);opacity:1}
}
@keyframes cw-heart-pick-glow{
  0%,100%{opacity:.55;filter:brightness(.9)}
  50%{opacity:1;filter:brightness(1.18)}
}
@media(prefers-reduced-motion:reduce){
  body.wild-tutorial-page .wild-board .wild-cell.cw-route-tile::before,
  body.wild-tutorial-page .wild-board .wild-cell.cw-guide-heart::after,
  body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked::after,
  body.wild-match-page .wild-board .wild-cell.cw-piece-picked::before,
  body.wild-match-page .wild-board .wild-cell.cw-piece-picked::after{animation:none!important}
}

/* V10: pink drag-backlight shared by ALL playable candy types on desktop/mobile.
 * The reference's guided four-cell glow remains untouched. */
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"]),
body.wild-match-page .wild-board .wild-cell.cw-piece-picked:not([data-piece="C"]){
  position:relative;isolation:isolate;z-index:26;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-drag-neighbor,
body.wild-match-page .wild-board .wild-cell.cw-drag-neighbor{
  position:relative;isolation:isolate;z-index:24;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-drag-neighbor::before,
body.wild-match-page .wild-board .wild-cell.cw-drag-neighbor::before{
  content:"";position:absolute;inset:3px;z-index:0;pointer-events:none;
  border-radius:11px;border:1px solid #ffcbf0;
  background:radial-gradient(ellipse at 50% 46%,#fffafbda 0%,#ffd1efc0 61%,#fd9fd878 100%);
  box-shadow:0 0 6px #ffe6f8b5,0 0 9px #ff9add7d;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-drag-neighbor img,
body.wild-match-page .wild-board .wild-cell.cw-drag-neighbor img{
  z-index:2;position:relative;
  transform:translate3d(var(--cw-neighbor-x,0px),var(--cw-neighbor-y,0px),0) scale(1.03)!important;
  filter:drop-shadow(0 5px 5px #70205b88)!important;
  will-change:transform;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked.is-dragging img,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked.is-dragging img{
  filter:drop-shadow(0 5px 4px #782e6c96) drop-shadow(0 0 4px #ffb9e8)!important;
  will-change:transform;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-drag-returning img,
body.wild-match-page .wild-board .wild-cell.cw-drag-returning img{
  transition:transform .145s cubic-bezier(.22,.7,.27,1)!important;
}
@media(prefers-reduced-motion:reduce){
  body.wild-tutorial-page .wild-board .wild-cell.cw-drag-returning img,
  body.wild-match-page .wild-board .wild-cell.cw-drag-returning img{transition:none!important}
}


/* Candy Wid V11 — reference drag (00:29–00:32 and free play ~01:17–01:24).
 * Only the FOUR scripted guided squares retain their pink-white illumination.
 * Ordinary selection and drag do not paint a white rectangular backing.
 * No background is created behind the neighboring piece during preview. */
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not(.cw-route-tile)::before,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked::before,
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not(.cw-route-tile)::after,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked::after,
body.wild-match-page .wild-board .wild-cell.is-source::before,
body.wild-match-page .wild-board .wild-cell.is-source::after,
body.wild-tutorial-page .wild-board .wild-cell.cw-drag-neighbor::before,
body.wild-match-page .wild-board .wild-cell.cw-drag-neighbor::before{
  content:none!important;animation:none!important;box-shadow:none!important;
}
/* A normal chosen candy remains on the SAME translucent grid cell.
 * Do not keep the old white fill/strong frame after click or during drag. */
body.wild-match-page .wild-board .wild-cell.is-source,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked,
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked:not(.cw-route-tile){
  background:rgba(255,242,255,.075)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:none!important;
  animation:none!important;
}
body.wild-match-page .wild-board .wild-cell.is-source img,
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked img,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked img{
  filter:drop-shadow(0 3px 2px rgba(99,22,80,.40))!important;
}
/* During the gesture only the piece moves; neighboring candy stays still. */
body.wild-tutorial-page .wild-board .wild-cell.cw-piece-picked.is-dragging img,
body.wild-match-page .wild-board .wild-cell.cw-piece-picked.is-dragging img{
  transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) scale(1.035)!important;
  filter:drop-shadow(0 5px 4px rgba(101,45,86,.43))!important;
  transition:none!important;
  position:relative;z-index:4;
  will-change:transform;
}
body.wild-tutorial-page .wild-board .wild-cell.cw-drag-returning.is-dragging img,
body.wild-match-page .wild-board .wild-cell.cw-drag-returning.is-dragging img{
  transition:transform .17s cubic-bezier(.18,.77,.28,1)!important;
}
/* V10 selected heart's additional neon ring should not become a second block
 * while the finger moves; the first guided row is illuminated by cw-route-tile. */
body.wild-tutorial-page .wild-board .wild-cell.cw-route-tile.cw-piece-picked::after{
  content:none!important;
}
@media (prefers-reduced-motion:reduce){
  body.wild-tutorial-page .wild-board .wild-cell.cw-drag-returning.is-dragging img,
  body.wild-match-page .wild-board .wild-cell.cw-drag-returning.is-dragging img{
    transition:none!important;
  }
}

/* Candy Wid V12 — movement polish verified against reference video.
   Keep one shared FX implementation for tutorial and normal mode. */
body.wild-tutorial-page .wild-board .wild-cell img,
body.wild-match-page .wild-board .wild-cell img {
  image-rendering:auto!important;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
body.wild-tutorial-page .cw-v8-dust,
body.wild-match-page .cw-v8-dust { animation-duration:.54s!important; }
body.wild-tutorial-page .cw-v8-gold,
body.wild-match-page .cw-v8-gold { animation-duration:.65s!important; }
body.wild-tutorial-page .wild-board .wild-cell.is-match img,
body.wild-match-page .wild-board .wild-cell.is-match img {animation-duration:.30s!important}
body.wild-tutorial-page .wild-board .wild-cell.is-crate-open img,
body.wild-match-page .wild-board .wild-cell.is-crate-open img{animation-duration:.36s!important}

/* Candy Wid V15 — desktop feedback parity when Windows has "reduce motion".
 * The V14 hand exception worked, but the board engine and older CSS still
 * hid floating rewards, particles and match animations entirely on desktop.
 * Restore just the short, functional game feedback. No changes to mobile CSS,
 * payouts, scoring, navigation, authentication or the backend. */
@media (min-width:740px) and (prefers-reduced-motion:reduce) {
  /* Falling ghosts must remain visible while the actual grid is hidden. */
  body.wild-tutorial-page .wild-board-wrap .cw-v4-falling,
  body.wild-match-page .wild-board-wrap .cw-v4-falling {
    display:block!important;
  }
  body.wild-tutorial-page .wild-board-wrap .cw-v4-moving-candy,
  body.wild-match-page .wild-board-wrap .cw-v4-moving-candy {
    display:block!important;
  }
  body.wild-tutorial-page .wild-board-wrap .cw-v8-gain,
  body.wild-match-page .wild-board-wrap .cw-v8-gain {
    display:block!important;
    animation:cw-v8-gain .94s cubic-bezier(.18,.73,.34,1) var(--v8-label-delay,0ms) both!important;
    opacity:1;
  }
  body.wild-tutorial-page .wild-board-wrap .cw-v8-dust,
  body.wild-match-page .wild-board-wrap .cw-v8-dust {
    display:block!important;
    animation:cw-v8-dust .54s cubic-bezier(.16,.48,.28,1) var(--v8-delay,0ms) both!important;
  }
  body.wild-tutorial-page .wild-board-wrap .cw-v8-glint,
  body.wild-match-page .wild-board-wrap .cw-v8-glint {
    display:block!important;
    animation:cw-v8-glint .37s ease-out var(--v8-delay,0ms) both!important;
  }
  body.wild-tutorial-page .wild-board-wrap .cw-v8-chest-halo,
  body.wild-match-page .wild-board-wrap .cw-v8-chest-halo {
    display:block!important;
    animation:cw-v8-chest .65s ease-out both!important;
  }
  body.wild-tutorial-page .wild-board .wild-cell.is-match img,
  body.wild-match-page .wild-board .wild-cell.is-match img {
    animation:cw-v8-match .30s cubic-bezier(.24,.72,.36,1) both!important;
  }
  body.wild-tutorial-page .wild-board .wild-cell.is-crate-open img,
  body.wild-match-page .wild-board .wild-cell.is-crate-open img {
    animation:cw-v4-crate .36s ease-out both!important;
  }
  /* The pink backing of the guided route and its gently pulsing outline. */
  body.wild-tutorial-page .wild-board .wild-cell.cw-route-tile::before {
    display:block!important;
    animation:cw-route-tile-breathe 1.6s ease-in-out infinite!important;
  }
  body.wild-tutorial-page .wild-board .wild-cell.cw-guide-heart:not(.cw-piece-picked)::after {
    display:block!important;
    animation:cw-heart-pick-glow 1s ease-in-out infinite!important;
  }
  /* Keep the short praise effects consistent with the same phone build. */
  body.wild-tutorial-page .cw-voice-feedback.is-visible {
    animation:cw-v12-praise .96s cubic-bezier(.19,.67,.32,1) both!important;
  }
  body.wild-match-page .wild-board-wrap .wild-praise.show {
    animation:wild-praise 1s ease-out both!important;
  }
}

/* V17 shared visual events: all positions are board-relative coordinates. */
body.wild-tutorial-page .wild-fx .cw-v17-star,
body.wild-match-page .wild-fx .cw-v17-star,
body.wild-tutorial-page .wild-fx .cw-v17-line-star,
body.wild-match-page .wild-fx .cw-v17-line-star {
  position:absolute;z-index:46;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  color:#fff7a8;font-size:23px;font-weight:900;line-height:26px;text-align:center;
  text-shadow:0 0 3px #fff,0 0 8px #ffd340,0 1px 2px #c8780b;
  transform-origin:50% 50%;
  animation:cw-v17-star .53s cubic-bezier(.19,.68,.28,1) var(--v17-delay,0ms) both;
}
body.wild-tutorial-page .wild-fx .cw-v17-line-star,
body.wild-match-page .wild-fx .cw-v17-line-star {
  color:#ffe16c;animation-duration:.66s;
}
@keyframes cw-v17-star {
  0% {opacity:0;transform:scale(calc(.35 * var(--v17-scale,1))) rotate(-26deg)}
  33% {opacity:1;transform:scale(calc(1.2 * var(--v17-scale,1))) rotate(8deg)}
  75% {opacity:.96;transform:scale(calc(.85 * var(--v17-scale,1))) rotate(-7deg)}
  100% {opacity:0;transform:translateY(-18px) scale(calc(.4 * var(--v17-scale,1))) rotate(24deg)}
}
body.wild-tutorial-page .wild-fx .cw-v17-coin,
body.wild-match-page .wild-fx .cw-v17-coin {
  position:absolute;z-index:47;pointer-events:none;
  width:var(--coin-size,9px);height:var(--coin-size,9px);
  margin-left:calc(var(--coin-size,9px) / -2);margin-top:calc(var(--coin-size,9px) / -2);
  border:1px solid #fff4b4;border-radius:50%;
  background:radial-gradient(circle at 32% 29%,#fffacf 0 17%,#ffdf58 24%,#e9a91d 77%);
  box-shadow:0 0 3px #ffe18a;
  animation:cw-v17-coin .68s cubic-bezier(.2,.64,.25,1) var(--coin-delay,0ms) both;
}
@keyframes cw-v17-coin {
  0%{opacity:0;transform:translate3d(0,0,0) scale(.3)}
  23%{opacity:1;transform:translate3d(calc(var(--coin-x,0px) * .38),calc(var(--coin-y,0px) * 1.05),0) scale(1.05)}
  100%{opacity:0;transform:translate3d(var(--coin-x,0px),calc(var(--coin-y,0px) + 16px),0) scale(.72)}
}
/* Both rewards and reaction text may coexist over different candy clusters. */
body.wild-tutorial-page .wild-board-wrap .cw-praise-secondary {
  top:47%;z-index:49;color:#fff7ff;
}
body.wild-tutorial-page .wild-board-wrap .cw-v17-claim-confirmation {
  position:absolute;z-index:50;left:50%;top:44%;margin:0;
  width:max-content;max-width:100%;text-align:center;pointer-events:none;
  transform:translate(-50%,-50%);font:900 clamp(22px,6.5vw,35px)/1.2 'Baloo 2',system-ui,sans-serif;
  color:#b6ff96;-webkit-text-stroke:2px #3c2071;paint-order:stroke fill;
  text-shadow:0 0 13px #fff4d1,0 4px 3px #210a43;
  animation:cw-v17-claim .95s ease-out both;
}
@keyframes cw-v17-claim {
  0%{opacity:0;translate:0 13px;scale:.8}
  23%{opacity:1;translate:0 -5px;scale:1.08}
  76%{opacity:1;translate:0 -12px;scale:1}
  100%{opacity:0;translate:0 -23px;scale:.98}
}
@media(min-width:740px) and (prefers-reduced-motion:reduce){
  body.wild-tutorial-page .wild-fx .cw-v17-star,body.wild-match-page .wild-fx .cw-v17-star,
  body.wild-tutorial-page .wild-fx .cw-v17-line-star,body.wild-match-page .wild-fx .cw-v17-line-star{
    animation:cw-v17-star .53s cubic-bezier(.19,.68,.28,1) var(--v17-delay,0ms) both!important;
  }
  body.wild-tutorial-page .wild-fx .cw-v17-coin,body.wild-match-page .wild-fx .cw-v17-coin{
    animation:cw-v17-coin .68s ease-out var(--coin-delay,0ms) both!important;
  }
  body.wild-tutorial-page .cw-v17-claim-confirmation{
    animation:cw-v17-claim .95s ease-out both!important;
  }
}