/* ===== NAVIGATION DOTS ===== */
    .nav-dots {
        display: none;
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        z-index: 1001;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .nav-dots.visible {
        opacity: 1;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        background: #d4af37;
        width: 30px;
        border-radius: 5px;
    }

    /* ===== FLOATING MUSIC BUTTON ===== */
    .music-control {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 35px;
        height: 35px;
        /*background: linear-gradient(135deg, #171717 0%, #3f3f3f 100%);*/
        border: none;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 1002;
        transition: all 0.3s ease;
        /*box-shadow: 0 8px 25px rgba(212,175,55,0.5);*/
        opacity: 0;
    }

    .music-control.visible {
        opacity: 1;
        animation: floatUpDown 3s ease-in-out infinite;
    }

    @keyframes floatUpDown {
        0%, 100% { 
            transform: translateY(0px);
            /*box-shadow: 0 8px 25px rgba(212,175,55,0.5);*/
        }
        50% { 
            transform: translateY(-15px);
            /*box-shadow: 0 15px 35px rgba(212,175,55,0.7);*/
        }
    }

    .music-control img {
        width: 35px;
        height: 35px;
    }

    .music-control.playing {
        animation: floatUpDown 3s ease-in-out infinite, spinPulse 2s ease-in-out infinite;
    }

    @keyframes spinPulse {
        0%, 100% { transform: rotate(0deg) scale(1); }
        25% { transform: rotate(-10deg) scale(1.1); }
        75% { transform: rotate(10deg) scale(1.1); }
    }

    /* ===== SWIPE HINT ===== */
    .swipe-hint {
        position: fixed;
        bottom: 120px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: #d4af37;
        font-family: "Poiret One", sans-serif;
        letter-spacing: 2px;
        animation: fadeInOut 2s ease-in-out infinite;
        z-index: 1001;
        opacity: 0;
    }

    .swipe-hint.visible {
        opacity: 1;
    }

    @keyframes fadeInOut {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }