/* ==========================================
   SPYDR FLOATING DOCK
========================================== */

.dock {

    position: fixed;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px;

    background: rgba(23, 23, 23, 0.78);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 999px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.45),
        0 0 18px rgba(124,58,237,.08);

    z-index: 99999;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

/* Hide while a game/app is open */

.dock.hidden{

    opacity:0;

    pointer-events:none;

    transform:
        translate(-50%,20px);

}

/* ==========================================
   BUTTONS
========================================== */

.dock button{

    position:relative;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    outline:none;

    border-radius:14px;

    background:transparent;

    color:var(--gray);

    cursor:pointer;

    transition:
        transform .22s cubic-bezier(.22,1,.36,1),
        background .22s,
        color .22s,
        box-shadow .22s;

}

.dock button i{

    font-size:24px;

    transition:inherit;

}

/* ==========================================
   HOVER
========================================== */

.dock button:hover{

    color:var(--white);

    background:rgba(255,255,255,.06);

    transform:
        translateY(-8px)
        scale(1.08);

    box-shadow:
        0 0 18px rgba(124,58,237,.18);

}

.dock button:hover i{

    transform:scale(1.05);

}

/* ==========================================
   ACTIVE PAGE
========================================== */

.dock button.active{

    background:
        linear-gradient(
            135deg,
            var(--accent),
            #7c3aed
        );

    color:white;

    box-shadow:
        0 0 20px rgba(124,58,237,.28);

}

.dock button.active::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    transform:translateX(-50%);

    width:6px;
    height:6px;

    border-radius:50%;

    background:white;

}

/* ==========================================
   TOOLTIPS
========================================== */

.dock button::before{

    content:attr(data-title);

    position:absolute;

    bottom:68px;

    left:50%;

    transform:
        translate(-50%,8px);

    padding:6px 10px;

    border-radius:8px;

    background:rgba(0,0,0,.9);

    color:white;

    font-size:12px;

    font-family:"JetBrains Mono", monospace;

    white-space:nowrap;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .18s,
        transform .18s;

}

.dock button:hover::before{

    opacity:1;

    transform:
        translate(-50%,0);

}

/* ==========================================
   CLICK
========================================== */

.dock button:active{

    transform:
        scale(.95);

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:700px){

    .dock{

        bottom:18px;

        gap:5px;

        padding:8px;

    }

    .dock button{

        width:46px;
        height:46px;

    }

    .dock button i{

        font-size:21px;

    }

}