/* Soft, dimensional candy tiles. The input grid stays unchanged. */
.tile[data-value="1"]{--tile-color:#90e3c3;--tile-ink:#237a61;--tile-base:#52b996;--tile-light:#d8fff0}
.tile[data-value="2"]{--tile-color:#a2d5fa;--tile-ink:#316f9f;--tile-base:#6aa9db;--tile-light:#e4f7ff}
.tile[data-value="3"]{--tile-color:#cdb3f1;--tile-ink:#7950a8;--tile-base:#aa86d3;--tile-light:#f1e7ff}
.tile[data-value="4"]{--tile-color:#ffbca6;--tile-ink:#b65f45;--tile-base:#e89479;--tile-light:#fff0de}
.tile[data-value="5"]{--tile-color:#f7dc79;--tile-ink:#9f7821;--tile-base:#d9b448;--tile-light:#fff7cf}
.tile,.preview-board .tile,.game .tile{border-radius:30%;border:1px solid #ffffffb0;background:radial-gradient(ellipse at 30% 8%,#ffffff9c,transparent 60%),linear-gradient(155deg,var(--tile-light) -35%,var(--tile-color) 62%);box-shadow:inset 0 2px 2px #fff9,inset 0 -4px 0 #00000007,0 4px 0 var(--tile-base),0 6px 7px #24483a13;font-weight:900;text-shadow:0 1px 0 #ffffffb3;transform:translateY(-2px);isolation:isolate;transition:transform .14s cubic-bezier(.2,1.5,.5,1),box-shadow .14s,filter .14s}
.tile:before{content:'';position:absolute;left:16%;top:9%;width:29%;height:8%;border-radius:50%;background:#ffffffa6;transform:rotate(-22deg);pointer-events:none}
.tile:after{content:'';position:absolute;right:12%;bottom:15%;width:5%;height:5%;border-radius:50%;background:#ffffff82;pointer-events:none}
.tile.selected{border-color:#fff;transform:translateY(-5px) scale(1.035);box-shadow:inset 0 2px 3px #fffd,0 4px 0 var(--tile-base),0 0 0 2.5px #438c74,0 7px 13px #357f6540;filter:saturate(1.2) brightness(1.04);z-index:4}
.tile.selected:after{content:'✦';font-size:9px;line-height:10px;right:5px;bottom:5px;left:auto;width:10px;height:10px;color:#fff;background:transparent;filter:drop-shadow(0 1px 1px var(--tile-base))}
.board-wrap:before{content:'';position:absolute;inset:-9px -7px -12px;border-radius:24px;background:linear-gradient(155deg,#e9eee6,#e3e9e0);box-shadow:inset 0 2px 5px #32452c09,0 1px 0 #fff;z-index:-1}
.board-wrap{isolation:isolate;margin-top:3px;margin-bottom:9px}
.game .board{row-gap:8px;column-gap:6px}.preview-board{row-gap:10px;column-gap:7px}
.preview-shell{background:linear-gradient(145deg,#ffffff,#f2f5ed);border:2px solid #fff;box-shadow:0 10px 0 #e5eadf,0 24px 55px #344d3517}
.robot{background:linear-gradient(135deg,#e4efd4,#abc59b);box-shadow:inset 0 2px 1px #fff9,0 4px 0 #9eaf87,0 6px 10px #55634620;border:1px solid #e8f1dc}
.robot-face{background:#fbfff4;box-shadow:inset 0 2px 3px #5d785822}.robot-face i{background:#487554;box-shadow:0 0 4px #7bc28244}
.path-lines line{stroke:#5bae8e;stroke-width:7;filter:drop-shadow(0 2px 0 #317b6130)}
.tile.removing,.settling .tile.removing{animation:candy-pop .22s cubic-bezier(.22,.7,.3,1) both;transition:none;z-index:4}
.settling .tile:not(.removing){animation:candy-land .23s cubic-bezier(.2,.8,.35,1.2) backwards}
.pop-effects{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.pop-particle{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--burst-color);box-shadow:inset 0 1px 0 #fff9;animation:confetti-pop .56s cubic-bezier(.12,.6,.25,1) both}
.pop-particle.spark{width:12px;height:12px;border-radius:0;clip-path:polygon(50% 0,63% 36%,100% 50%,63% 63%,50% 100%,36% 63%,0 50%,36% 36%)}
.pop-ring{position:absolute;width:22px;height:22px;border:3px solid var(--burst-color);border-radius:50%;animation:pop-ring .38s ease-out both}
.pop-reward{position:absolute;display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 2px 0 #337c62,1px 0 0 #337c62,-1px 0 0 #337c62;filter:drop-shadow(0 4px 4px #23594425);animation:reward-float .8s ease-out both;white-space:nowrap}
.pop-reward span{font-size:12px;letter-spacing:1px;font-weight:900;background:#39886b;border:2px solid #fff;border-radius:20px;padding:4px 12px;transform:rotate(-8deg)}
.pop-reward strong{font-size:37px;line-height:1.2;font-weight:900}.pop-reward.perfect span{background:#aa76ce;text-shadow:0 2px #794d9a}.pop-reward.perfect strong{font-size:45px;color:#fff4a8;text-shadow:0 3px #bc8a35,1px 0 #bc8a35,-1px 0 #bc8a35}
.score-pop .score-block strong{animation:score-bump .32s ease-out}
@keyframes candy-pop{0%{transform:translateY(-3px) scale(1);opacity:1}32%{transform:translateY(-3px) scale(1.2,.85);filter:brightness(1.14)}58%{transform:translateY(-7px) scale(.88,1.17);opacity:1}100%{transform:translateY(-9px) scale(.15);opacity:0}}
@keyframes candy-land{0%{transform:translateY(-13px);opacity:.65}65%{transform:translateY(1px) scale(1.03,.97);opacity:1}100%{transform:translateY(-2px)}}
@keyframes confetti-pop{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}12%{opacity:1}75%{opacity:.9}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 15px)) rotate(var(--spin)) scale(.2);opacity:0}}
@keyframes pop-ring{0%{transform:translate(-50%,-50%) scale(.3);opacity:.9}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
@keyframes reward-float{0%{transform:translate(-50%,0) scale(.6);opacity:0}17%{transform:translate(-50%,-10px) scale(1.12);opacity:1}32%{transform:translate(-50%,-14px) scale(1);opacity:1}74%{opacity:1}100%{transform:translate(-50%,-49px) scale(.95);opacity:0}}
@keyframes score-bump{40%{transform:scale(1.15);color:#388763}100%{transform:scale(1)}}
.score-block strong{display:inline-block}
@media(max-width:700px){.game .board{row-gap:7px;column-gap:5px}.game .tile{font-size:26px}.preview-board{row-gap:9px;column-gap:6px}}
.reduced .pop-particle,.reduced .pop-ring{display:none}.reduced .pop-reward{animation:none;transform:translate(-50%,-15px)}.reduced .tile.removing{opacity:0}.reduced .tile.selected{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.pop-particle,.pop-ring{display:none}.pop-reward{animation:none;transform:translate(-50%,-15px)}.tile.removing{opacity:0}.tile.selected{transform:translateY(-2px)}}

.pop-flash{position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 45px #fff6ab;background:#fff6c822;animation:board-glow .42s ease-out both}
.pop-wave{position:absolute;width:50px;height:50px;border:5px solid #fff6b0;border-radius:50%;box-shadow:0 0 15px #ffe493,inset 0 0 10px #fff;animation:burst-wave .55s ease-out both}
@keyframes board-glow{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes burst-wave{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(3.8);opacity:0}}
.reduced .pop-flash,.reduced .pop-wave{display:none}
@media(prefers-reduced-motion:reduce){.pop-flash,.pop-wave{display:none}}