/* ================= LOCKSCREEN ONLY ================= */
#lockScreen{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    color:#fff;
    z-index:2;
}

/* nền riêng lockscreen */
#lockScreen .bg{
    position:fixed;
    inset:0;
    background:url('../assets/bg.jpg') center/cover no-repeat;
    filter:blur(12px) brightness(0.6);
    z-index:-1;
    will-change:transform, filter;
}

/* khối giữa */
#lockScreen .center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    width:min(92vw, 300px);
    z-index:3;
    will-change:transform, opacity;
}

/* avatar */
#lockScreen .avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    margin:0 auto 16px;
    background:url('../assets/avt.jpg') center/cover no-repeat;
    box-shadow:0 0 15px rgba(255,255,255,0.5);
    animation:glowPulse 3s infinite ease-in-out;
    transition:transform .3s ease, box-shadow .3s ease;
    cursor:default;
}

#lockScreen .avatar:hover{
    transform:scale(1.08);
    box-shadow:0 0 30px rgba(255,255,255,0.9);
}

@keyframes glowPulse{
    0%{ box-shadow:0 0 10px rgba(255,255,255,0.4); }
    50%{ box-shadow:0 0 25px rgba(255,255,255,0.8); }
    100%{ box-shadow:0 0 10px rgba(255,255,255,0.4); }
}

/* tiêu đề */
#lockScreen h1{
    margin:0 0 20px;
    font-weight:300;
    font-size:38px;
    letter-spacing:.2px;
    text-shadow:0 4px 20px rgba(0,0,0,0.7);
}

/* input */
#lockScreen input{
    width:100%;
    padding:14px 16px;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);
    color:#fff;
    text-align:center;
    outline:none;
    box-shadow:0 5px 20px rgba(0,0,0,0.4);
    transition:all .25s ease;
    font-family:'Montserrat', sans-serif;
    font-size:15px;
}

#lockScreen input:focus{
    background:rgba(255,255,255,0.25);
    box-shadow:0 0 15px rgba(255,255,255,0.4);
}

#lockScreen input:disabled{
    opacity:.7;
}

#lockScreen input::placeholder{
    color:rgba(255,255,255,0.75);
}

/* shake */
.shake{
    animation:shake .35s;
}

@keyframes shake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-5px); }
    50%{ transform:translateX(5px); }
    75%{ transform:translateX(-5px); }
    100%{ transform:translateX(0); }
}

/* hint */
#lockScreen .hint{
    margin:12px 0 0;
    font-size:13px;
    opacity:0.92;
    text-shadow:0 2px 10px rgba(0,0,0,0.7);
    line-height:1.6;
}

/* guest */
#lockScreen .guest{
    margin-top:22px;
    cursor:pointer;
    transition:transform .25s ease, opacity .2s ease;
    user-select:none;
}

#lockScreen .guest:hover{
    transform:scale(1.06);
}

#lockScreen .guest-icon{
    width:48px;
    height:48px;
    margin:0 auto 6px;
    background:url('../assets/visitor.svg') center/contain no-repeat;
    filter:drop-shadow(0 5px 15px rgba(0,0,0,0.6));
    transition:transform .25s ease;
}

#lockScreen .guest:hover .guest-icon{
    transform:scale(1.08);
}

#lockScreen .guest span{
    display:block;
    font-size:14px;
    text-shadow:0 2px 10px rgba(0,0,0,0.7);
}

/* clock */
#lockScreen .clock{
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:3;
    will-change:opacity, transform;
}

#lockScreen .clock #time{
    font-size:60px;
    font-weight:300;
    line-height:1;
    text-shadow:0 5px 25px rgba(0,0,0,0.8);
}

#lockScreen .clock #date{
    margin-top:8px;
    font-size:14px;
    opacity:0.92;
    text-shadow:0 2px 10px rgba(0,0,0,0.7);
}

/* animation khi unlock */
#lockScreen.unlocking .center{
    animation:fadeOutCenter .6s ease forwards;
}

#lockScreen.unlocking .clock{
    animation:fadeOutClock .6s ease forwards;
}

#lockScreen.unlocking .bg{
    animation:bgZoom .8s ease forwards;
}

@keyframes fadeOutCenter{
    0%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
    100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(1.08);
    }
}

@keyframes fadeOutClock{
    0%{
        opacity:1;
        transform:translateX(-50%) translateY(0);
    }
    100%{
        opacity:0;
        transform:translateX(-50%) translateY(14px);
    }
}

@keyframes bgZoom{
    0%{
        filter:blur(12px) brightness(0.6);
        transform:scale(1);
    }
    100%{
        filter:blur(20px) brightness(0.42);
        transform:scale(1.05);
    }
}

/* transition overlay */
#transition{
    position:fixed;
    inset:0;
    background:#000;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease;
    z-index:99999;
}

#transition.active{
    opacity:1;
}

/* trạng thái screen */
#lockScreen.screen-hidden{
    display:none !important;
}

#lockScreen.screen-visible{
    display:block !important;
}

/* chống ảnh hưởng nhầm sang desktop */
#desktopScreen .center,
#desktopScreen .clock{
    all:unset;
}

/* mobile */
@media (max-width:768px){
    #lockScreen .center{
        top:unset;
        left:50%;
        bottom:120px;
        transform:translateX(-50%);
        width:min(92vw, 360px);
    }

    #lockScreen .avatar{
        width:92px;
        height:92px;
    }

    #lockScreen h1{
        font-size:30px;
    }

    #lockScreen input{
        padding:13px 14px;
        font-size:14px;
    }

    #lockScreen .guest{
        margin-top:16px;
    }

    #lockScreen .clock{
        top:58px;
        bottom:auto;
        transform:translateX(-50%);
    }

    #lockScreen .clock #time{
        font-size:46px;
    }

    #lockScreen .clock #date{
        font-size:13px;
    }
}

@media (max-width:480px){
    #lockScreen .center{
        bottom:110px;
    }

    #lockScreen h1{
        font-size:26px;
    }

    #lockScreen .clock #time{
        font-size:40px;
    }

    #lockScreen .hint{
        font-size:12px;
    }
}
/*-------Chặn bôi đen bằng chuột----------*/
#lockScreen,
#lockScreen *{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#lockScreen input{
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}