body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont;
    background:#000;
    overflow:hidden;
}

/* CALL UI */
.call-wrap{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.call-card{
    width:90%;
    max-width:420px;
    text-align:center;
    color:white;
}

.status{opacity:.6;font-size:13px;}

.avatar{
    width:120px;
    height:120px;
    margin:20px auto;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:50px;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

.name{font-size:26px;font-weight:bold;}

.price{color:#22c55e;font-weight:bold;}

.buttons{
    position:absolute;
    bottom:40px;
    width:100%;
    display:flex;
    justify-content:space-around;
}

button{
    width:80px;
    height:80px;
    border-radius:50%;
    border:none;
    font-weight:bold;
}

#accept{background:#22c55e;color:white;}
#reject{background:#ef4444;color:white;}

/* THANK YOU */
.ty-wrap{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0b1020;
}

.ty-card{
    width:90%;
    max-width:420px;
    background:rgba(255,255,255,0.05);
    padding:40px 20px;
    border-radius:20px;
    text-align:center;
    color:white;
}

.check{
    width:80px;
    height:80px;
    margin:0 auto;
    background:#22c55e;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
}

.box{
    margin:20px 0;
    background:rgba(255,255,255,0.08);
    padding:15px;
    border-radius:12px;
}

.success{transform:scale(0);transition:.3s;}
.error{animation:shake .4s;}

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