/* Generated Värvisaju special-piece atlas: row, column, bomb, color core. */
.match3-gem.special.gem-violet{--special-base:linear-gradient(145deg,#d8b4fe 0%,#8b5cf6 48%,#5b21b6 100%)}
.match3-gem.special.gem-cyan{--special-base:linear-gradient(145deg,#a5f3fc 0%,#06b6d4 48%,#0e7490 100%)}
.match3-gem.special.gem-coral{--special-base:linear-gradient(145deg,#fecaca 0%,#f43f5e 48%,#be123c 100%)}
.match3-gem.special.gem-gold{--special-base:linear-gradient(145deg,#fef3c7 0%,#f59e0b 48%,#b45309 100%)}
.match3-gem.special.gem-mint{--special-base:linear-gradient(145deg,#bbf7d0 0%,#22c55e 48%,#15803d 100%)}
.match3-gem.special.gem-pink{--special-base:linear-gradient(145deg,#fbcfe8 0%,#ec4899 48%,#a21caf 100%)}
.match3-gem.special>i{inset:3%;overflow:visible;border:0!important;border-radius:24%!important;background:var(--special-base)!important;box-shadow:inset 0 5px 10px #fff3,inset 0 -7px 12px #0003!important;clip-path:none!important;animation:none!important;outline:0!important;filter:none!important;transform:none!important}
.match3-gem.special>i:after{position:absolute;z-index:2;inset:12%;display:grid;width:auto;height:auto;place-items:center;border:2px solid #ffffffc7;border-radius:28%;background:linear-gradient(145deg,#ffffff24,#07101d35);box-shadow:inset 0 0 10px #fff2,0 0 9px #07101d66;color:#fff;font-size:clamp(17px,4.5vw,28px);font-weight:900;line-height:1;text-shadow:0 2px 4px #0009;filter:none;transform:none;animation:m3SpecialArtPulse 1.7s ease-in-out infinite;pointer-events:none}
.match3-gem.special.gem-violet>i:after{--special-art-x:0%}
.match3-gem.special.gem-cyan>i:after{--special-art-x:20%}
.match3-gem.special.gem-coral>i:after{--special-art-x:40%}
.match3-gem.special.gem-gold>i:after{--special-art-x:60%}
.match3-gem.special.gem-mint>i:after{--special-art-x:80%}
.match3-gem.special.gem-pink>i:after{--special-art-x:100%}
.match3-gem.special-1>i:after{content:"↔";border-radius:999px 36%}
.match3-gem.special-2>i:after{content:"↕";border-radius:36% 999px}
.match3-gem.special-3>i:after{content:"✦";inset:10%;border-radius:50%;border-color:#fff4;background:radial-gradient(circle at 38% 34%,#fff 0 8%,#ffffff36 10% 25%,#160d2b66 58%,#05071199);box-shadow:inset 0 0 12px #fff4,0 0 11px #fff5;color:#fff;font-size:clamp(18px,5vw,30px)}
.match3-gem.special-4>i:after{background-image:url('/assets/images/match3/m3-special-atlas-v1.png?v=1');background-size:200% 200%;background-position:100% 100%}
.match3-gem.special-4>i{background:transparent!important;box-shadow:none!important}
.match3-gem.special>i>span,.match3-gem.special>i:before{display:none!important}
.match3-gem.special:before{display:none!important}
.match3-gem.special{filter:none!important}
.match3-gem.special:hover>i{filter:brightness(1.08)!important}

@keyframes m3SpecialArtPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.045)}}

.m3j-game .match3-gem.m3j-special-launch{z-index:12}.m3j-game .match3-gem.m3j-special-launch>i{animation:m3jSpecialDepart 140ms cubic-bezier(.3,0,.7,1) forwards!important}.m3j-game .match3-gem.m3j-special-launch>i:after{animation:none!important}
.m3j-game .match3-gem.m3j-core-converted-pending>i:after{opacity:0;transform:scale(.25)}
.m3j-game .match3-gem.m3j-core-converted-reveal>i:after{animation:m3jCoreSpecialReveal 190ms cubic-bezier(.18,.86,.24,1.18) both!important}
@keyframes m3jCoreSpecialReveal{0%{opacity:0;transform:scale(.25) rotate(-18deg)}65%{opacity:1;transform:scale(1.16) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.m3j-special-flight{position:absolute;z-index:15;width:0;height:0;pointer-events:none}.m3j-special-flight>i{position:absolute;display:grid;width:38px;height:24px;place-items:center;margin:-12px 0 0 -19px;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#f9a8d4 48%,#67e8f9);box-shadow:0 0 9px #fff,0 0 22px #c084fc;color:#fff;font-size:13px;font-style:normal;font-weight:950;text-shadow:0 1px 3px #312e81}.m3j-special-flight-1 .toward-negative{animation:m3jRocketLeft 460ms cubic-bezier(.12,.72,.18,1) forwards}.m3j-special-flight-1 .toward-positive{animation:m3jRocketRight 460ms cubic-bezier(.12,.72,.18,1) forwards}.m3j-special-flight-2>i{width:24px;height:38px;margin:-19px 0 0 -12px;background:linear-gradient(180deg,#7c3aed,#67e8f9 52%,#f9a8d4)}.m3j-special-flight-2 .toward-negative{animation:m3jRocketUp 460ms cubic-bezier(.12,.72,.18,1) forwards}.m3j-special-flight-2 .toward-positive{animation:m3jRocketDown 460ms cubic-bezier(.12,.72,.18,1) forwards}.m3j-special-flight-3 .m3j-bomb-shock{width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid #fff;border-radius:50%;background:radial-gradient(circle,#fff 0 10%,#f59e0b 13% 24%,#c026d3 38%,transparent 64%);box-shadow:0 0 22px #fff,0 0 45px #f97316;animation:m3jBombDetonate 480ms ease-out forwards}
@keyframes m3jSpecialDepart{0%{opacity:1;transform:scale(1)}65%{opacity:1;transform:scale(1.16);filter:brightness(1.8)}100%{opacity:0;transform:scale(.08);filter:brightness(2.4)}}@keyframes m3jRocketLeft{to{opacity:0;transform:translateX(-430%) scaleX(1.2)}}@keyframes m3jRocketRight{to{opacity:0;transform:translateX(430%) scaleX(1.2)}}@keyframes m3jRocketUp{to{opacity:0;transform:translateY(-430%) scaleY(1.2)}}@keyframes m3jRocketDown{to{opacity:0;transform:translateY(430%) scaleY(1.2)}}@keyframes m3jBombDetonate{0%{opacity:1;transform:scale(.18)}55%{opacity:1;transform:scale(2)}100%{opacity:0;transform:scale(3.4)}}

.guide-power.special-1,.guide-power.special-2,.guide-power.special-3,.guide-power.special-4{
  border:0;
  border-radius:0;
  background-color:transparent!important;
  background-image:url('/assets/images/match3/m3-special-color-atlas-v2.png?v=1')!important;
  background-repeat:no-repeat!important;
  background-size:600% 300%!important;
  box-shadow:none;
  filter:drop-shadow(0 6px 8px #000a);
}
.guide-power.gem-violet{--guide-special-x:0%}.guide-power.gem-cyan{--guide-special-x:20%}.guide-power.gem-coral{--guide-special-x:40%}.guide-power.gem-gold{--guide-special-x:60%}.guide-power.gem-mint{--guide-special-x:80%}.guide-power.gem-pink{--guide-special-x:100%}
.guide-power.special-1{background-position:var(--guide-special-x) 0!important}.guide-power.special-2{background-position:var(--guide-special-x) 50%!important}.guide-power.special-3{background-position:var(--guide-special-x) 100%!important}.guide-power.special-4{background-image:url('/assets/images/match3/m3-special-atlas-v1.png?v=1')!important;background-size:200% 200%!important;background-position:100% 100%!important}
.guide-power.special-1:before,.guide-power.special-2:before,.guide-power.special-3:before,.guide-power.special-4:before,.guide-power.special-1>i,.guide-power.special-2>i,.guide-power.special-3>i,.guide-power.special-4>i{display:none!important}

@media(max-width:430px){.match3-gem.special>i{inset:2%}}
@media(prefers-reduced-motion:reduce){.match3-gem.special>i,.match3-gem.special>i:after,.m3j-special-flight *{animation-duration:1ms!important}}

/* Colour core: the same tactile square language as other energy pieces, while
   its six-colour surface makes the any-colour ability unmistakable. */
.match3-gem.special-4>i{--core-angle:25deg;inset:4%!important;border:1px solid rgba(255,255,255,.48)!important;border-radius:24%!important;background:conic-gradient(from var(--core-angle),#8b5cf6,#06b6d4,#f43f5e,#f59e0b,#22c55e,#ec4899,#8b5cf6)!important;box-shadow:inset 0 5px 10px #fff5,inset 0 -8px 12px #05081655,0 0 13px #c084fc88!important;filter:none!important;animation:m3CoreBreathe 3.2s ease-in-out infinite!important}
.match3-gem.special-4>i:before{content:""!important;position:absolute!important;z-index:2!important;display:block!important;inset:7%!important;border:0!important;border-radius:0!important;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-opacity='.88' stroke-width='5'%3E%3Cellipse cx='50' cy='50' rx='43' ry='18'/%3E%3Cellipse cx='50' cy='50' rx='43' ry='18' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='43' ry='18' transform='rotate(120 50 50)'/%3E%3C/g%3E%3C/svg%3E")!important;box-shadow:none!important;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 8px #a5f3fc)!important;animation:m3CoreOrbit 5.4s linear infinite!important}
.match3-gem.special-4>i:after{content:""!important;display:block!important;inset:39%!important;border:1px solid #fff!important;border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#fff,#fde68a 35%,#f0abfc 68%,#7c3aed)!important;clip-path:none!important;box-shadow:0 0 7px #fff,0 0 13px #67e8f9!important;filter:none!important;animation:m3CoreSigil 1.8s ease-in-out infinite!important}
.guide-power.special-4{border:1px solid #ffffff70!important;border-radius:22%!important;background:conic-gradient(from 25deg,#8b5cf6,#06b6d4,#f43f5e,#f59e0b,#22c55e,#ec4899,#8b5cf6)!important;box-shadow:inset 0 5px 10px #fff4,inset 0 -8px 12px #05081655,0 5px 12px #0007!important}
.guide-power.special-4:before{content:""!important;position:absolute;display:block!important;inset:8%!important;border:0!important;border-radius:0!important;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-opacity='.9' stroke-width='5'%3E%3Cellipse cx='50' cy='50' rx='43' ry='18'/%3E%3Cellipse cx='50' cy='50' rx='43' ry='18' transform='rotate(60 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='43' ry='18' transform='rotate(120 50 50)'/%3E%3C/g%3E%3C/svg%3E")!important;filter:drop-shadow(0 0 5px #fff)!important}.guide-power.special-4:after{content:"";position:absolute;inset:40%;border:1px solid #fff;border-radius:50%;clip-path:none;background:radial-gradient(circle at 35% 30%,#fff,#fde68a 35%,#f0abfc 68%,#7c3aed);box-shadow:0 0 7px #fff,0 0 12px #67e8f9;filter:none}
@property --core-angle{syntax:"<angle>";inherits:false;initial-value:25deg}@keyframes m3CoreBreathe{50%{transform:scale(1.035);filter:brightness(1.08)}to{--core-angle:385deg}}@keyframes m3CoreOrbit{to{transform:rotate(360deg)}}@keyframes m3CoreSigil{50%{transform:scale(1.1) rotate(8deg);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 11px #67e8f9)}}

/* Final board art: use the purpose-built colour atlas, without the generic framed glyphs. */
.match3-gem.special-1>i,.match3-gem.special-2>i,.match3-gem.special-3>i{
  inset:1%!important;border:0!important;border-radius:18%!important;
  background-color:transparent!important;
  background-image:url('/assets/images/match3/m3-special-color-atlas-v3.png?v=1')!important;
  background-repeat:no-repeat!important;background-size:600% 300%!important;
  box-shadow:none!important;filter:drop-shadow(0 4px 5px rgba(3,7,18,.46))!important;
}
.match3-gem.special-1>i{background-position:var(--special-art-x) 0!important}
.match3-gem.special-2>i{background-position:var(--special-art-x) 50%!important}
.match3-gem.special-3>i{background-position:var(--special-art-x) 100%!important}
.match3-gem.special-1>i:after,.match3-gem.special-2>i:after,.match3-gem.special-3>i:after{display:none!important}

.guide-power.special-1,.guide-power.special-2,.guide-power.special-3{
  background-image:url('/assets/images/match3/m3-special-color-atlas-v3.png?v=1')!important;
}

/* Readability-first ability overlays. The ordinary gem colour remains the
   dominant surface; the icon communicates only the ability. */
.match3-gem.special-1>i,.match3-gem.special-2>i,.match3-gem.special-3>i{
  inset:4%!important;background:var(--special-base)!important;
  border:1px solid rgba(255,255,255,.34)!important;border-radius:24%!important;
  box-shadow:inset 0 5px 9px rgba(255,255,255,.28),inset 0 -7px 11px rgba(4,8,20,.28),0 2px 5px rgba(3,7,18,.28)!important;
  filter:none!important;
}
.match3-gem.special-1>i:after,.match3-gem.special-2>i:after,.match3-gem.special-3>i:after{
  content:""!important;display:block!important;inset:18%!important;border:0!important;border-radius:0!important;
  background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;
  box-shadow:none!important;filter:drop-shadow(0 2px 2px rgba(3,7,18,.48))!important;animation:none!important;
}
.match3-gem.special-1>i:after{background-image:url('/assets/images/match3/special-row-overlay.svg?v=1')!important}
.match3-gem.special-2>i:after{background-image:url('/assets/images/match3/special-column-overlay.svg?v=1')!important}
.match3-gem.special-3>i:after{inset:14%!important;background-image:url('/assets/images/match3/special-bomb-overlay.svg?v=1')!important}
.guide-power.special-1,.guide-power.special-2,.guide-power.special-3{
  border:1px solid rgba(255,255,255,.28)!important;border-radius:22%!important;background-image:var(--guide-base)!important;
  box-shadow:inset 0 5px 9px rgba(255,255,255,.25),inset 0 -7px 11px rgba(4,8,20,.3),0 4px 9px rgba(3,7,18,.34)!important;filter:none!important;
}
.guide-power.gem-violet{--guide-base:linear-gradient(145deg,#d8b4fe,#8b5cf6 52%,#5b21b6)}
.guide-power.gem-cyan{--guide-base:linear-gradient(145deg,#a5f3fc,#06b6d4 52%,#0e7490)}
.guide-power.gem-coral{--guide-base:linear-gradient(145deg,#fecaca,#f43f5e 52%,#be123c)}
.guide-power.gem-gold{--guide-base:linear-gradient(145deg,#fef3c7,#f59e0b 52%,#b45309)}
.guide-power.gem-mint{--guide-base:linear-gradient(145deg,#bbf7d0,#22c55e 52%,#15803d)}
.guide-power.gem-pink{--guide-base:linear-gradient(145deg,#fbcfe8,#ec4899 52%,#a21caf)}
.guide-power.special-1:after,.guide-power.special-2:after,.guide-power.special-3:after{content:"";position:absolute;inset:18%;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 2px 2px rgba(3,7,18,.48))}
.guide-power.special-1:after{background-image:url('/assets/images/match3/special-row-overlay.svg?v=1')}
.guide-power.special-2:after{background-image:url('/assets/images/match3/special-column-overlay.svg?v=1')}
.guide-power.special-3:after{inset:14%;background-image:url('/assets/images/match3/special-bomb-overlay.svg?v=1')}
.guide-power.special-1>i,.guide-power.special-2>i,.guide-power.special-3>i{position:absolute;inset:18%;display:block!important;background-repeat:no-repeat;background-position:center;background-size:contain;font-size:0;filter:drop-shadow(0 2px 2px rgba(3,7,18,.48))}
.guide-power.special-1>i{background-image:url('/assets/images/match3/special-row-overlay.svg?v=1')!important}
.guide-power.special-2>i{background-image:url('/assets/images/match3/special-column-overlay.svg?v=1')!important}
.guide-power.special-3>i{inset:14%;background-image:url('/assets/images/match3/special-bomb-overlay.svg?v=1')!important}

/* Keep the colour-core atom optically centred and readable at board scale. */
.match3-gem.special-4>i:before{inset:auto!important;top:-8%!important;right:auto!important;bottom:auto!important;left:-8%!important;width:116%!important;height:116%!important;opacity:1!important;background-size:100% 100%!important;background-position:50% 50%!important;transform-origin:50% 50%!important}
.match3-gem.special-4>i:after{inset:36%!important;transform-origin:50% 50%!important}