/* Required-colour target: keep the canonical gem colour and add a key layer. */
.m3j-game .match3-gem.m3j-color-key-target{isolation:isolate}
.m3j-game .match3-gem.m3j-color-key-target:before{content:"";position:absolute;z-index:6;inset:3%;border:2px solid #fff3a3;border-radius:25%;box-shadow:inset 0 0 0 2px #92400e99,0 0 0 1px #fbbf24,0 0 14px #fde047cc;pointer-events:none}
.m3j-game .m3j-color-key-mark{position:absolute;z-index:8;right:2%;bottom:3%;width:30%;aspect-ratio:1;border:2px solid #fff5b7;border-radius:50%;background:radial-gradient(circle,#5b2b08 0 31%,transparent 34%),linear-gradient(145deg,#fff7b5,#f59e0b 62%,#92400e);box-shadow:inset 0 1px #fff,0 2px 5px #0009,0 0 10px #fde68a;pointer-events:none}
.m3j-game .m3j-color-key-mark:before{content:"";position:absolute;top:62%;left:61%;width:82%;height:28%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,#fff3a3,#d97706);box-shadow:0 1px 2px #0008;transform:rotate(42deg);transform-origin:left center}
.m3j-game .m3j-color-key-mark:after{content:"";position:absolute;top:104%;left:112%;width:26%;height:35%;border-left:2px solid #92400e;border-right:2px solid #92400e;transform:rotate(42deg)}
.m3j-game .match3-gem.m3j-color-key-target>i{box-shadow:inset 0 0 0 2px #fff7,0 0 0 3px #fbbf24,0 0 18px #fde68acc}
.m3j-game .m3j-color-key-piece .m3j-color-key-mark{right:-5%;bottom:-3%;width:32%}
.m3j-game .m3j-color-key-piece>i:before{content:"";position:absolute;z-index:3;inset:-7%;border:2px solid #fde68a;border-radius:28%;box-shadow:0 0 18px #f59e0baa;pointer-events:none}

/* A loose collectible: a rainbow ring with many key-bit teeth, never a square. */
.m3j-game .obstacle-key{cursor:grab}
.m3j-game .obstacle-key:active{cursor:grabbing}
.m3j-game .obstacle-key>i,.m3j-game .m3j-color-key-piece.obstacle-key>i{opacity:0!important}
.m3j-game .obstacle-key .m3j-obstacle-layer,.m3j-feature-material.obstacle-key .m3j-obstacle-layer{inset:4%;border:0!important;border-radius:50%;clip-path:polygon(50% 0,57% 9%,66% 3%,70% 14%,81% 10%,82% 22%,94% 22%,89% 34%,100% 41%,90% 50%,100% 59%,89% 66%,94% 78%,82% 78%,81% 90%,70% 86%,66% 97%,57% 91%,50% 100%,43% 91%,34% 97%,30% 86%,19% 90%,18% 78%,6% 78%,11% 66%,0 59%,10% 50%,0 41%,11% 34%,6% 22%,18% 22%,19% 10%,30% 14%,34% 3%,43% 9%);background:conic-gradient(from 10deg,#fb7185,#f472b6,#c084fc,#818cf8,#22d3ee,#34d399,#fde047,#fb923c,#fb7185)!important;background-image:conic-gradient(from 10deg,#fb7185,#f472b6,#c084fc,#818cf8,#22d3ee,#34d399,#fde047,#fb923c,#fb7185)!important;box-shadow:inset 0 0 0 3px #ffffff75,inset 0 0 16px #fff9,0 0 18px #c084fccc!important;animation:m3j-key-pulse 1.8s ease-in-out infinite}
.m3j-game .obstacle-key .m3j-obstacle-layer:before,.m3j-feature-material.obstacle-key .m3j-obstacle-layer:before{content:"";position:absolute;width:42%;aspect-ratio:1;border:3px solid #fffde7;border-radius:50%;background:#130d2bd9;box-shadow:inset 0 0 10px #000c,0 0 8px #fff}
.m3j-game .obstacle-key .m3j-obstacle-layer:after,.m3j-feature-material.obstacle-key .m3j-obstacle-layer:after{content:"✦";position:absolute;display:grid;width:22%;aspect-ratio:1;place-items:center;border-radius:50%;background:#fffde7;color:#7c3aed;font-size:9px;line-height:1;box-shadow:0 0 9px #fff;transform:none}
.m3j-game .obstacle-key .m3j-obstacle-layer em{display:none}
@keyframes m3j-key-pulse{50%{filter:brightness(1.18) saturate(1.16);transform:scale(1.035);box-shadow:inset 0 0 0 3px #ffffff55,inset 0 0 22px #fff,0 0 24px #67e8f9dd}}
.m3j-game .match3-gem.falling.obstacle-key .m3j-obstacle-layer{animation:m3j-key-fall 360ms cubic-bezier(.18,.82,.28,1.08) both;animation-delay:var(--fall-delay,0ms)}
.m3j-game .match3-gem.obstacle-key-entering .m3j-obstacle-layer{animation:m3j-key-enter 520ms cubic-bezier(.16,.9,.25,1.12) both}
@keyframes m3j-key-fall{from{opacity:.45;transform:translate(var(--fall-x,0),var(--fall-y,var(--fall-offset)))}75%{opacity:1;transform:translate(0,5%) scale(1.04)}to{opacity:1;transform:none}}
@keyframes m3j-key-enter{from{opacity:0;transform:translateY(-170%) rotate(-18deg) scale(.72)}70%{opacity:1;transform:translateY(7%) rotate(3deg) scale(1.06)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.m3j-game .obstacle-key .m3j-obstacle-layer{animation:none}}
.m3j-game .obstacle-key .m3j-obstacle-layer,.m3j-feature-material.obstacle-key .m3j-obstacle-layer{inset:0!important;border-radius:24%!important;clip-path:none!important;background:transparent url('/assets/images/match3/m3j-color-key-v3.png?v=3') center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 3px 5px #0008) drop-shadow(0 0 6px #c084fc80);animation:m3j-key-pulse 1.8s ease-in-out infinite}.m3j-game .obstacle-key .m3j-obstacle-layer:before,.m3j-game .obstacle-key .m3j-obstacle-layer:after,.m3j-feature-material.obstacle-key .m3j-obstacle-layer:before,.m3j-feature-material.obstacle-key .m3j-obstacle-layer:after{display:none!important}