.effect-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}
.effect-card{min-width:0;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(160deg,#182443,#16162e);border:1px solid #7180b43d;border-radius:16px;color:#e3ebff;cursor:pointer}
.effect-card[aria-pressed=true]{border-color:#60eadf;background:linear-gradient(160deg,#194447,#202747);box-shadow:inset 0 0 18px #5af2da13}
.effect-card:focus-visible{outline:2px solid #92f6ff;outline-offset:3px}.effect-card:disabled{opacity:.65;cursor:wait}
.effect-card small{font-size:10px;letter-spacing:1.5px;color:#a1afd2}.effect-card strong{font-size:13px;text-align:center;line-height:1.5}.effect-card-state{font-size:10px;color:#9ab7cf}.effect-card[aria-pressed=true] .effect-card-state{color:#7dffdf}
.effect-preview{display:block;position:relative;width:88px;height:120px;max-width:100%;background:radial-gradient(ellipse,#42486b55,transparent 70%);pointer-events:none}
.effect-preview>svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.effect-mini-bottle{position:absolute;inset:24% 27% 13%;border:2px solid #c0e5f9a6;border-radius:14px 14px 12px 12px;background:linear-gradient(90deg,#c2ffff22,transparent 30%,#84abff10 75%,#fff3);box-shadow:inset 3px 0 3px #fff2}.effect-mini-bottle:before{content:'';position:absolute;left:27%;width:46%;height:12px;top:-11px;border:2px solid #c0e5f9a6;border-bottom:0;border-radius:4px 4px 0 0}.effect-none{position:absolute;inset:45% 0 0;text-align:center;color:#a9bbda}
/* No stacking context on either wrapper: the vessel sits between back and front. */
.bottle-selected-effect{display:contents;pointer-events:none}
.orbit-scene{position:absolute;inset:62px -12px 54px;pointer-events:none;--orbit-duration:5s;--orbit-tilt:0%;--orbit-depth:10.6%;--orbit-radius:50%}
.orbit-track{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--effect-color);stroke-width:1;filter:drop-shadow(0 0 2px var(--effect-color))}
.orbit-back{z-index:1;opacity:.18;stroke-dasharray:2 5}
.orbit-front{z-index:6;opacity:.65}
.orbit-mote{position:absolute;left:100%;top:var(--orbit-y);width:16px;height:16px;margin:-8px;display:grid;place-items:center;color:var(--effect-color);font-size:13px;line-height:1;animation:orbit-depth var(--orbit-duration) linear infinite;animation-delay:var(--delay);will-change:transform,left,top}
.orbit-mote>span{filter:drop-shadow(0 0 4px var(--effect-color))}
.effect-preview .orbit-scene{inset:18% 6% 9%}
.effect-mini-bottle{z-index:2;background:linear-gradient(90deg,#31485e,#202c42 40%,#344056)}
:is(.orbit-style-4,.orbit-style-9,.orbit-style-10,.orbit-style-11,.orbit-style-16,.orbit-style-26) .orbit-track{stroke-dasharray:1 7;opacity:.25}
:is(.orbit-style-2,.orbit-style-15,.orbit-style-19,.orbit-style-30) .orbit-front{stroke-width:1.5}
:is(.orbit-style-7,.orbit-style-8,.orbit-style-18,.orbit-style-20) .orbit-front{stroke-dasharray:7 4}
.orbit-style-24 .orbit-mote{font-size:17px}
@keyframes orbit-depth{
 0%{left:calc(50% + var(--orbit-radius) * 1);top:calc(var(--orbit-y) + var(--orbit-tilt) * 1 + var(--orbit-depth) * 0);transform:scale(.85);opacity:.55;z-index:1}
 12.5%{left:calc(50% + var(--orbit-radius) * 0.707);top:calc(var(--orbit-y) + var(--orbit-tilt) * 0.707 + var(--orbit-depth) * -0.707);transform:scale(.67);opacity:.3;z-index:1}
 25%{left:calc(50% + var(--orbit-radius) * 0);top:calc(var(--orbit-y) + var(--orbit-tilt) * 0 + var(--orbit-depth) * -1);transform:scale(.55);opacity:.2;z-index:1}
 37.5%{left:calc(50% + var(--orbit-radius) * -0.707);top:calc(var(--orbit-y) + var(--orbit-tilt) * -0.707 + var(--orbit-depth) * -0.707);transform:scale(.67);opacity:.3;z-index:1}
 49.99%{left:calc(50% + var(--orbit-radius) * -1);top:calc(var(--orbit-y) + var(--orbit-tilt) * -1 + var(--orbit-depth) * 0);transform:scale(.85);opacity:.55;z-index:1}
 50%{left:calc(50% + var(--orbit-radius) * -1);top:calc(var(--orbit-y) + var(--orbit-tilt) * -1 + var(--orbit-depth) * 0);transform:scale(.85);opacity:.55;z-index:6}
 62.5%{left:calc(50% + var(--orbit-radius) * -0.707);top:calc(var(--orbit-y) + var(--orbit-tilt) * -0.707 + var(--orbit-depth) * 0.707);transform:scale(1.08);opacity:.9;z-index:6}
 75%{left:calc(50% + var(--orbit-radius) * 0);top:calc(var(--orbit-y) + var(--orbit-tilt) * 0 + var(--orbit-depth) * 1);transform:scale(1.2);opacity:1;z-index:6}
 87.5%{left:calc(50% + var(--orbit-radius) * 0.707);top:calc(var(--orbit-y) + var(--orbit-tilt) * 0.707 + var(--orbit-depth) * 0.707);transform:scale(1.08);opacity:.9;z-index:6}
 99.99%{left:calc(50% + var(--orbit-radius) * 1);top:calc(var(--orbit-y) + var(--orbit-tilt) * 1 + var(--orbit-depth) * 0);transform:scale(.85);opacity:.55;z-index:6}
 100%{left:calc(50% + var(--orbit-radius) * 1);top:calc(var(--orbit-y) + var(--orbit-tilt) * 1 + var(--orbit-depth) * 0);transform:scale(.85);opacity:.55;z-index:1}
}
@media(max-width:600px){.bottle-selected-effect .orbit-scene{inset:53px -7px 54px}.orbit-mote{font-size:11px}}
@media(prefers-reduced-motion:reduce){.orbit-mote{animation:none;display:none}.orbit-track{filter:none}}
.custom-pour .effect-flow{fill:none;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 3px #a9f8ff99);stroke-dasharray:14 3;animation:effect-flow .6s linear infinite}.custom-pour .effect-side{stroke-width:2;opacity:.75;stroke-dasharray:6 8}.custom-pour .effect-core{stroke-width:1.5;stroke-dasharray:2 9}.custom-pour .effect-zig{fill:none;stroke-width:2;filter:drop-shadow(0 0 3px #80aaff);animation:aura-flash .2s steps(2) infinite}.custom-pour .effect-splash{fill:none;stroke-width:1.5;filter:none;transform-box:fill-box;transform-origin:center;animation:effect-ripple .6s ease-out infinite}.effect-mote text{filter:drop-shadow(0 0 2px currentColor)}
.custom-pour :is(.flow-1,.flow-12,.flow-20){stroke-dasharray:none}.custom-pour :is(.flow-3,.flow-16,.flow-26){stroke-dasharray:1 9;stroke-width:7}.custom-pour :is(.flow-4,.flow-10,.flow-21){stroke-dasharray:5 12;stroke-width:3}.custom-pour :is(.flow-5,.flow-13){stroke-dasharray:20 12;stroke-width:2}.custom-pour .flow-6{stroke-dasharray:4 4;stroke-width:6}.custom-pour .flow-7{stroke-width:8;stroke-dasharray:14 1}.custom-pour .flow-8{stroke-width:2;stroke-dasharray:1 8}.custom-pour .flow-9{stroke-width:3;stroke-dasharray:9 7}.custom-pour .flow-11{stroke-width:8;stroke-dasharray:1 13}.custom-pour .flow-14{stroke-width:9;stroke-dasharray:2 6}.custom-pour .flow-15{stroke-width:7;opacity:.7}.custom-pour .flow-17{stroke-width:6;stroke-dasharray:3 11}.custom-pour .flow-18{stroke-width:4;stroke-dasharray:18 14}.custom-pour .flow-19{stroke-width:2;stroke-dasharray:8 4}.custom-pour .flow-20{stroke-width:3}.custom-pour .flow-22{stroke-width:6;stroke-dasharray:16 4}.custom-pour .flow-23{stroke-width:2;stroke-dasharray:2 3}.custom-pour .flow-24{stroke-width:7;stroke-dasharray:2 10}.custom-pour .flow-25{stroke-width:9;stroke-dasharray:8 8;opacity:.6}.custom-pour .flow-27{stroke-width:5;stroke-dasharray:6 5}.custom-pour .flow-28{stroke-width:7;stroke-dasharray:3 7}.custom-pour .flow-29{stroke-width:5;stroke-dasharray:16 6}.custom-pour .flow-30{stroke-width:7;stroke-dasharray:24 4}
@keyframes effect-flow{to{stroke-dashoffset:-80}}@keyframes effect-ripple{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}@keyframes aura-spin{to{transform:rotate(360deg)}}@keyframes aura-breathe{50%{opacity:.45;transform:scale(.94)}}@keyframes aura-drift{0%,100%{opacity:.3;transform:translateY(5px)}50%{opacity:1;transform:translateY(-7px)}}@keyframes aura-dash{to{stroke-dashoffset:-100}}@keyframes aura-flash{50%{opacity:.25}}@keyframes aura-scan{50%{transform:translateY(-35px)}}@keyframes aura-float{50%{transform:translateX(4px)}}
@media(max-width:700px){.effect-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.bottle-tabs [role=tab]{white-space:normal;line-height:1.5;min-height:48px}.effect-card{padding:10px 4px}.effect-card strong{font-size:11px}.effect-preview{height:100px;width:74px}}
@media(max-width:380px){.effect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.around-art *,.custom-pour *{animation:none!important}.custom-pour .effect-mote{display:none}}

.effect-unlock{font-size:10px;color:#aebbd5}.effect-card.locked{border-color:#a594bd40}.effect-card.locked .effect-card-state{color:#ffdd9a}.effect-buy{padding:18px;border:1px solid #e9c67a66;border-radius:16px;background:#342e4655;margin:16px 0}.effect-buy[hidden]{display:none}.effect-buy p{line-height:1.7}.effect-buy button{margin:4px}

/* Jewel trails and small glints retain the same front/back orbital depth. */
.orbit-luxe .orbit-front{stroke-width:1.15;opacity:.8;filter:drop-shadow(0 0 2px var(--effect-color)) drop-shadow(0 0 5px var(--effect-accent))}
.orbit-luxe .orbit-back{opacity:.24;stroke-dasharray:1 4}
.jewel-mote{font-size:var(--mote-size)}
.jewel-mote>span{position:relative;animation:jewel-shimmer 1.8s ease-in-out infinite;animation-delay:var(--glint-delay);text-shadow:0 0 3px #fff,0 0 7px var(--effect-color)}
.jewel-mote>span:after{content:'';position:absolute;right:65%;top:48%;width:18px;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--effect-color),#fff);opacity:.65;transform:rotate(-20deg)}
.orbit-glint{position:absolute;z-index:6;font-size:9px;color:#fff;opacity:0;animation:jewel-glint 2.8s ease-in-out infinite;animation-delay:var(--delay);text-shadow:0 0 5px var(--effect-color),0 0 9px var(--effect-accent)}
@keyframes jewel-shimmer{0%,100%{filter:brightness(.9) drop-shadow(0 0 2px var(--effect-color))}50%{filter:brightness(1.7) drop-shadow(0 0 5px var(--effect-color))}}
@keyframes jewel-glint{0%,65%,100%{opacity:0;transform:scale(.3)}78%{opacity:1;transform:scale(1.25)}88%{opacity:.4;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.jewel-mote>span,.orbit-glint{animation:none}.orbit-glint{opacity:.45}.orbit-luxe .orbit-track{filter:none}}