.sticker {
    position: absolute;
    cursor: grab;
    user-select: none;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sticker:active {
    cursor: grabbing;
    transform: scale(1.05) !important;
    z-index: 100;
}

/* Pills */
.pill {
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    border: 2px solid var(--text-black);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 4px 4px 0px var(--text-black);
}

.blue-pill {
    background-color: var(--brand-blue);
    color: white;
    transform: rotate(-3deg);
}

.yellow-pill {
    background-color: var(--brand-yellow);
    color: var(--text-black);
    transform: rotate(5deg);
}

/* Handwritten Notes */
.handwritten {
    font-family: var(--font-hand-gochi);
    font-size: 2rem;
    color: var(--brand-blue);
    line-height: 1.1;
}

.welcome-note {
    transform: rotate(-8deg);
}

/* 3D Symbols */
.symbol-3d {
    filter: drop-shadow(5px 10px 15px rgba(0,0,0,0.15)) 
            drop-shadow(2px 4px 5px rgba(0,0,0,0.1));
}

/* Layering shadows for extra depth */
.symbol-3d::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 10%;
    width: 80%;
    height: 10px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%);
    filter: blur(5px);
    z-index: -1;
}

/* Emoticons */
.emoticon {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.5rem;
    opacity: 0.6;
}

/* Tablet Frame */
.tablet-frame {
    background: #000;
    padding: 10px;
    border-radius: 20px;
    width: 250px;
    box-shadow: 10px 20px 40px rgba(0,0,0,0.2);
    transform: rotate(-5deg);
}

.tablet-frame img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Custom Cursor */
.custom-cursor {
    pointer-events: none;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.2));
}

/* Animation Classes */
.float-anim {
    /* Will be handled by GSAP for better control */
}

@media (max-width: 768px) {
    .pill {
        font-size: 1.1rem;
        padding: 8px 16px;
    }
    
    .handwritten {
        font-size: 1.5rem;
    }
    
    .tablet-frame {
        width: 180px;
    }
    
    .symbol-3d {
        width: 80vw !important;
    }
}

.sticker-note img {
    border: 8px solid white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    display: block;
}

.sticker-note {
    background: white;
    padding: 0;
}