/* The WitGarden tile: a thick pearl-enamel slab with an inlaid face and a jewel-colored edge.
   --ts sets the size; --e1/--e2/--e3 are the three stacked edge layers (each garden tints them). */
.wt{--ts:60px;--e1:var(--w1,#b9abf0);--e2:var(--w2,#8f80d6);--e3:var(--w3,#5a4cae);position:absolute;width:var(--ts);height:calc(var(--ts)*1.16);border-radius:calc(var(--ts)*.21);padding:0;border:0;cursor:default;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 90% at 30% 8%,#ffffff 0%,#fbf7ff 38%,#e9e0fb 78%,#d5c8f3 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 8px rgba(110,90,190,.28),inset 3px 0 6px rgba(255,255,255,.5),
    0 calc(var(--ts)*.035) 0 var(--e1),0 calc(var(--ts)*.07) 0 var(--e2),0 calc(var(--ts)*.105) 0 var(--e3),0 calc(var(--ts)*.15) calc(var(--ts)*.16) rgba(6,4,32,.55);
  transition:left .38s cubic-bezier(.2,.9,.3,1),top .38s cubic-bezier(.2,.9,.3,1),width .3s,height .3s,transform .16s cubic-bezier(.2,.9,.3,1.3),filter .25s,opacity .3s}
.wt::before{content:"";position:absolute;inset:calc(var(--ts)*.065);border-radius:calc(var(--ts)*.16);
  background:linear-gradient(160deg,#fff 0%,#f6f0ff 55%,#e6dcfa 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(130,110,200,.22),0 0 0 1px rgba(150,130,215,.35)}
.wt>.sym{position:absolute;left:calc(var(--ts)*.05);top:calc(var(--ts)*.075);width:calc(100% - var(--ts)*.1);height:calc(100% - var(--ts)*.185);filter:drop-shadow(0 calc(var(--ts)*.03) calc(var(--ts)*.03) rgba(50,30,110,.35));pointer-events:none}
.wt::after{content:"";position:absolute;left:calc(var(--ts)*.12);top:calc(var(--ts)*.08);width:calc(var(--ts)*.5);height:calc(var(--ts)*.16);border-radius:99px;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0));opacity:.7;pointer-events:none;transform:rotate(-8deg)}
.wt .bdg{position:absolute;right:calc(var(--ts)*-.1);top:calc(var(--ts)*-.1);width:calc(var(--ts)*.48);height:calc(var(--ts)*.48);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#efe6ff 70%);box-shadow:0 0 0 calc(var(--ts)*.03) #7c5cff,0 calc(var(--ts)*.04) calc(var(--ts)*.06) rgba(0,0,0,.45);z-index:3;display:grid;place-items:center;pointer-events:none}
.wt .bdg svg{width:82%;height:82%}
.wt .qm{position:absolute;inset:0;display:none;place-items:center;z-index:2;pointer-events:none}
.wt .qm svg{width:78%;height:78%;filter:drop-shadow(0 2px 3px rgba(20,10,80,.4))}
.wt.mystery>.sym{display:none}.wt.mystery .qm{display:grid}
.wt .ice{position:absolute;inset:calc(var(--ts)*-.02);border-radius:inherit;background:linear-gradient(135deg,rgba(233,251,255,.9),rgba(143,216,255,.5) 55%,rgba(79,168,230,.7));box-shadow:inset 0 0 0 calc(var(--ts)*.03) rgba(255,255,255,.75),inset 0 calc(var(--ts)*.05) calc(var(--ts)*.1) rgba(255,255,255,.9);display:none;z-index:2;pointer-events:none}
.wt .ice::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.8) 38%,transparent 46%)}
.wt.frozen .ice{display:block}
.wt.frozen.cracked .ice{background:linear-gradient(135deg,rgba(233,251,255,.45),rgba(143,216,255,.25) 55%,rgba(79,168,230,.4));clip-path:polygon(0 0,100% 0,100% 100%,55% 100%,50% 60%,44% 100%,0 100%)}
.wt .lk{position:absolute;inset:0;display:none;place-items:center;z-index:4;pointer-events:none;background:rgba(30,20,80,.42);border-radius:inherit}
.wt .lk svg{width:66%;height:66%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.wt.locked .lk{display:grid}
/* states */
.wt.covered{filter:brightness(.6) saturate(.72)}
.wt.free{cursor:pointer}
.wt.free:active{transform:translateY(calc(var(--ts)*.03)) scale(.97)}
.wt.enter{animation:tenter .55s cubic-bezier(.2,.9,.3,1.15) backwards;animation-delay:var(--dl,0s)}
@keyframes tenter{from{opacity:0;transform:translateY(-46px) scale(.55)}}
.wt.gone{opacity:0;transform:scale(.4);pointer-events:none}
.wt.picked{visibility:hidden}
body.show-free .wt.free:not(.locked){box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 8px rgba(110,90,190,.28),0 calc(var(--ts)*.035) 0 var(--e1),0 calc(var(--ts)*.07) 0 var(--e2),0 calc(var(--ts)*.105) 0 var(--e3),0 0 calc(var(--ts)*.35) rgba(124,240,255,.75)}
.wt.hint{animation:hintPulse .9s ease-in-out infinite;z-index:9999!important}
@keyframes hintPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--ts)*-.1)) scale(1.06);filter:drop-shadow(0 0 calc(var(--ts)*.3) rgba(255,214,80,.95))}}
.wt.shake{animation:tshake .32s}
@keyframes tshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.wt.flip{animation:tflip .55s cubic-bezier(.2,.9,.3,1)}
@keyframes tflip{0%{transform:rotateY(90deg) scale(.8)}100%{transform:rotateY(0) scale(1)}}
/* tray tiles fly in a fixed layer */
.wt.fly{position:fixed;z-index:200;transition:left .3s cubic-bezier(.2,.9,.3,1),top .3s cubic-bezier(.2,.9,.3,1),width .3s,height .3s,transform .28s,opacity .3s;pointer-events:none}
.wt.clear{z-index:210;animation:tclear .5s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes tclear{0%{transform:scale(1)}35%{transform:scale(1.28);filter:brightness(1.35) drop-shadow(0 0 16px rgba(255,255,255,.9))}100%{transform:scale(.2) translateY(-30px);opacity:0}}
/* stones */
.stone{position:absolute;pointer-events:none;filter:drop-shadow(0 calc(var(--ts,60px)*.08) calc(var(--ts,60px)*.08) rgba(0,0,0,.55));transition:left .38s,top .38s,width .3s,height .3s,transform .5s,opacity .5s}
.stone svg{width:100%;height:100%}
.stone.smash{transform:scale(1.5) rotate(18deg);opacity:0}