/* Particles, cup variants, zoom, avatar */
/* PARTICLES */
.particle{position:fixed;pointer-events:none;z-index:1000;animation:floatOut 0.85s ease-out forwards;width:28px;height:28px;}
.particle img{width:100%;height:100%;object-fit:contain;}
@keyframes floatOut{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--x),var(--y)) scale(0.4);opacity:0;}}

/* CUP VARIANTS */
@keyframes rainbow-shift{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}
.v-rainbow{animation:rainbow-shift 2s linear infinite;}
@keyframes glitch-cup{0%{transform:translate(0);}20%{transform:translate(-2px,2px);}40%{transform:translate(-2px,-2px);}60%{transform:translate(2px,2px);}80%{transform:translate(2px,-2px);}100%{transform:translate(0);}}
.v-glitch{animation:glitch-cup 0.2s infinite;filter:contrast(2) saturate(3);}
@keyframes spin-cup{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.v-spin{animation:spin-cup 3s linear infinite;}
@keyframes pulse-cup{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.v-pulse{animation:pulse-cup 1s ease-in-out infinite;}
@keyframes float-cup{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.v-pixel{image-rendering:pixelated;image-rendering:crisp-edges;}
.v-float{animation:float-cup 2s ease-in-out infinite;}


/* ZOOM */
.zoom-container{background:#151515;padding:18px;border-radius:15px;border:1px solid #333;margin:15px 0;}
.zoom-controls-wrapper{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:12px;}
.zoom-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--neon-pink);background:transparent;color:var(--neon-pink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.2s;}
.zoom-btn:hover{background:var(--neon-pink);color:black;}
.zoom-display{font-size:26px;font-weight:bold;color:white;min-width:80px;text-shadow:0 0 10px var(--neon-pink);}
.zoom-slider-custom{-webkit-appearance:none;width:100%;height:6px;background:#222;border-radius:5px;outline:none;margin:15px 0;}
.zoom-slider-custom::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--neon-pink);cursor:pointer;}

/* AVATAR */
.avatar-selector-container{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px;background:#111;border-radius:15px;margin-top:12px;border:1px solid #333;}
.avatar-item{position:relative;cursor:pointer;transition:transform 0.2s;border:3px solid transparent;border-radius:10px;overflow:hidden;aspect-ratio:1;background:#222;display:flex;justify-content:center;align-items:center;}
.avatar-item:hover{transform:scale(1.06);}
.avatar-item.selected{border-color:var(--neon-blue);box-shadow:0 0 15px var(--neon-blue);}
.avatar-item img{width:100%;height:100%;object-fit:cover;}
.avatar-item.locked{filter:grayscale(1) brightness(0.45);cursor:not-allowed;}
.avatar-item.locked .lock-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;}
.avatar-item.locked .lock-overlay img{width:28px;height:28px;}
.upload-avatar-btn{background:#1a1a1a;border:2px dashed #444;color:#888;flex-direction:column;gap:4px;}
.upload-avatar-btn img{width:28px;height:28px;opacity:0.5;}
.upload-avatar-btn span{font-size:8px;text-align:center;font-family:sans-serif;padding:0 4px;color:#666;}