:root{--kbdc-safe-top:74px}

#kb-dashain-kites{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    overflow:hidden;
    pointer-events:none!important;
    z-index:9990;
    user-select:none;
    -webkit-user-select:none;
}

#kb-dashain-kites,
#kb-dashain-kites *{
    pointer-events:none!important;
}

#kb-dashain-kites .kb-kite{
    position:absolute;
    pointer-events:none!important;
    will-change:transform;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.16));
}

#kb-dashain-kites svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
    animation:kbdcSwing 3.4s ease-in-out infinite alternate;
}

/* Existing 5 kites */
#kb-dashain-kites .edge-left-top{
    left:8px;
    top:calc(var(--kbdc-safe-top) + 20px);
    width:58px;
    opacity:.9;
    animation:kbdcEdgeLeft 5.2s ease-in-out infinite alternate;
}

#kb-dashain-kites .edge-right-top{
    right:10px;
    top:calc(var(--kbdc-safe-top) + 95px);
    width:52px;
    opacity:.84;
    animation:kbdcEdgeRight 6.2s ease-in-out infinite alternate;
}

#kb-dashain-kites .edge-left-mid{
    left:12px;
    top:54vh;
    width:44px;
    opacity:.64;
    animation:kbdcEdgeLeftMid 7s ease-in-out infinite alternate;
}

#kb-dashain-kites .edge-right-mid{
    right:12px;
    top:68vh;
    width:42px;
    opacity:.6;
    animation:kbdcEdgeRightMid 7.8s ease-in-out infinite alternate;
}

#kb-dashain-kites .fly-top{
    left:-120px;
    top:calc(var(--kbdc-safe-top) + 8px);
    width:46px;
    opacity:.7;
    animation:kbdcFlyTop 22s linear 3s infinite;
}

#kb-dashain-kites .fly-top-right{
    right:-120px;
    top:calc(var(--kbdc-safe-top) + 52px);
    width:44px;
    opacity:.68;
    animation:kbdcFlyTopRight 24s linear 6s infinite;
}

/* NEW: 2 additional kites */
#kb-dashain-kites .edge-left-bottom{
    left:16px;
    bottom:11vh;
    width:40px;
    opacity:.58;
    animation:kbdcBottomLeft 6.8s ease-in-out infinite alternate;
}

#kb-dashain-kites .edge-right-bottom{
    right:16px;
    bottom:9vh;
    width:36px;
    opacity:.56;
    animation:kbdcBottomRight 7.3s ease-in-out infinite alternate;
}

@keyframes kbdcSwing{
    from{transform:rotate(-5deg) translateY(-3px)}
    to{transform:rotate(5deg) translateY(5px)}
}

@keyframes kbdcEdgeLeft{
    from{transform:translate3d(0,0,0) rotate(-5deg)}
    to{transform:translate3d(12px,18px,0) rotate(6deg)}
}

@keyframes kbdcEdgeRight{
    from{transform:translate3d(0,0,0) rotate(6deg)}
    to{transform:translate3d(-12px,22px,0) rotate(-5deg)}
}

@keyframes kbdcEdgeLeftMid{
    from{transform:translate3d(0,-8px,0) rotate(-4deg)}
    to{transform:translate3d(10px,16px,0) rotate(5deg)}
}

@keyframes kbdcEdgeRightMid{
    from{transform:translate3d(0,10px,0) rotate(4deg)}
    to{transform:translate3d(-10px,-14px,0) rotate(-5deg)}
}

@keyframes kbdcBottomLeft{
    from{transform:translate3d(0,8px,0) rotate(4deg)}
    to{transform:translate3d(15px,-18px,0) rotate(-6deg)}
}

@keyframes kbdcBottomRight{
    from{transform:translate3d(0,-6px,0) rotate(-5deg)}
    to{transform:translate3d(-14px,17px,0) rotate(6deg)}
}

@keyframes kbdcFlyTopRight{
    0%{transform:translate3d(130px,0,0) rotate(6deg)}
    20%{transform:translate3d(-18vw,10px,0) rotate(-4deg)}
    48%{transform:translate3d(-46vw,-6px,0) rotate(5deg)}
    76%{transform:translate3d(-75vw,14px,0) rotate(-5deg)}
    100%{transform:translate3d(calc(-100vw - 170px),0,0) rotate(2deg)}
}

@keyframes kbdcFlyTop{
    0%{transform:translate3d(-130px,0,0) rotate(-6deg)}
    22%{transform:translate3d(22vw,14px,0) rotate(4deg)}
    48%{transform:translate3d(50vw,-8px,0) rotate(-4deg)}
    76%{transform:translate3d(79vw,16px,0) rotate(5deg)}
    100%{transform:translate3d(calc(100vw + 170px),0,0) rotate(-2deg)}
}

/* Festive Vibes button */
#kbdc-music-btn{
    position:fixed;
    right:18px;
    bottom:22px;
    z-index:2147483646;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    align-items:center;
    gap:8px;
    min-height:46px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:999px;
    background:rgba(15,42,64,.96);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.24);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font:600 13px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    cursor:pointer;
    pointer-events:auto!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

#kbdc-music-btn *{
    pointer-events:none!important;
}

#kbdc-music-btn.kbdc-playing{
    background:rgba(145,43,35,.96);
}

#kbdc-music-btn .kbdc-music-icon{
    font-size:19px;
    line-height:1;
}

#kbdc-music-btn .kbdc-music-status{
    opacity:.78;
    font-weight:500;
    font-size:11px;
}

/* MOBILE */
@media(max-width:767px){
    :root{--kbdc-safe-top:64px}

    #kb-dashain-kites{
        height:100svh;
        min-height:100svh;
    }

    #kb-dashain-kites .edge-left-top{
        left:2px;
        top:78px;
        width:50px;
        opacity:.96;
    }

    #kb-dashain-kites .edge-right-top{
        right:2px;
        top:145px;
        width:45px;
        opacity:.93;
    }

    #kb-dashain-kites .edge-left-mid{
        left:3px;
        top:46vh;
        width:37px;
        opacity:.68;
    }

    #kb-dashain-kites .edge-right-mid{
        right:3px;
        top:60vh;
        width:35px;
        opacity:.64;
    }

    #kb-dashain-kites .fly-top{
        top:88px;
        width:36px;
        opacity:.72;
        animation-duration:19s;
    }

    #kb-dashain-kites .fly-top-right{
        top:122px;
        width:34px;
        opacity:.7;
        animation-duration:21s;
    }

    /* New kites remain visible on mobile */
    #kb-dashain-kites .edge-left-bottom{
        left:3px;
        bottom:18vh;
        width:33px;
        opacity:.62;
    }

    #kb-dashain-kites .edge-right-bottom{
        right:3px;
        bottom:12vh;
        width:29px;
        opacity:.58;
    }

    #kbdc-music-btn{
        right:10px!important;
        bottom:calc(92px + env(safe-area-inset-bottom, 0px))!important;
        min-height:44px!important;
        padding:9px 12px!important;
        font-size:12px!important;
        max-width:calc(100vw - 20px)!important;
    }
}

@media(max-width:390px){
    #kbdc-music-btn .kbdc-music-status{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    #kb-dashain-kites .kb-kite,
    #kb-dashain-kites svg{
        animation:none!important;
    }
}