/* =========================================================
   LOCK BUTTON

   Independent of #controls so it stays
   reachable while everything else is
   hidden in the locked state.
========================================================= */

.lock-btn {

    position: absolute;

    left:
        max(18px, env(safe-area-inset-left));

    top: 50%;

    z-index: 700;

    transform:
        translateY(-50%);

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(20,20,22,.55);

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

    backdrop-filter:
        blur(14px);

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

    color: #fff;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s var(--ease),
        background .15s var(--ease);

}


.lock-btn.show {

    opacity: 1;

    pointer-events: auto;

}


.lock-btn:active {

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

}


.lock-btn.active {

    background: var(--red);

}


.lock-btn svg {

    width: 17px;

    height: 17px;

}


/* =========================================================
   GESTURE INDICATOR
========================================================= */

#gesture-indicator {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 900;

    transform:
        translate(-50%, -50%)
        scale(.88);

    min-width: 116px;

    padding: 16px 22px;

    border-radius: 16px;

    background:
        rgba(18,18,20,.62);

    -webkit-backdrop-filter:
        blur(18px) saturate(1.4);

    backdrop-filter:
        blur(18px) saturate(1.4);

    box-shadow:
        0 12px 34px rgba(0,0,0,.4);

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

    text-align: center;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .2s var(--ease),
        transform .2s var(--ease);

}


#gesture-indicator.show {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

}


.gesture-icon {

    font-size: 25px;

    color: var(--red);

}


.gesture-icon svg {

    width: 26px;

    height: 26px;

}


.gesture-text {

    margin-top: 6px;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .2px;

}


/* =========================================================
   CENTER PLAY
========================================================= */

#center-play {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 300;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translate(-50%, -50%)
        scale(1);

    border-radius: 50%;

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

    background:
        rgba(15,15,17,.5);

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

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.4);

    color: white;

    cursor: pointer;

    transition:
        opacity .22s var(--ease),
        transform .22s var(--ease),
        background .22s var(--ease),
        box-shadow .22s var(--ease);

}


#center-play:hover {

    background:
        var(--red);

    box-shadow:
        0 8px 30px rgba(229,9,20,.4);

    transform:
        translate(-50%, -50%)
        scale(1.06);

}


#center-play:active {

    transform:
        translate(-50%, -50%)
        scale(.96);

}


#center-play svg {

    width: 28px;

    height: 28px;

}


#center-play.hide {

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(.8);

}