* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

.modal-cover {
    width : 100%;
    height: 100%;
}

/* 背景图片 */
body {
    background     : url('./img/background.jpg') no-repeat center;
    background-size: 500px 550px;
    overflow       : hidden;
}

/* 九宫格 */
.container {
    width           : 300px;
    height          : 300px;
    /* border       : 1px solid; */
    display         : flex;
    flex-wrap       : wrap;
    margin          : 100px auto;
    border-radius   : 6px;
    background      : #ffa0;
    padding         : 5px 3px 5px 8px;
    align-items     : center;
}

/* 每一个奖品对象集合 */
.item {
    width             : 30%;
    height            : 30%;
    /* outline        : 1px solid black; */
    display           : flex;
    justify-content   : center;
    /* align-items    : center; */
    font-size         : 18;
    border-radius     : 2px;
    /* border         : 1px solid; */
    margin            : 4px;
    box-shadow        : 1px 1px 14px #ccc;
    position          : relative;
}

/* 灰色遮罩 */
.cover {
    position     : absolute;
    width        : 100%;
    height       : 100%;
    background   : rgba(0, 0, 0, 0.3);
    top          : 0;
    left         : 0;
    border-radius: 2px;
}

/* 礼物图片 */
.item-box {
    margin-top: 10%;
    width            : 70%;
    height           : 70%;
    background-size  : 100% 100%;
    background-repeat: no-repeat;
}

/* 礼物名字 */
.item-name {
    position  : absolute;
    top       : 78%;
    width     : 100%;
    height    : 20%;
    text-align: center;
}

/* 中间的抽奖按钮 */
.btn-box {
    background-color: #faa5b6;
    cursor          : pointer;
    color           : #fff;
    font-size       : 14px;
    text-align      : center;
    line-height     : 100px;
}

/* 结果弹窗 */
.modal {
    width        : 80%;
    height       : 150px;
    position     : fixed;
    top          : 50%;
    left         : 50%;
    background   : rgba(255, 255, 255, 255);
    border-radius: 4px;
    transform    : translate(-50%, -50%);
    text-align   : center;
    padding      : 20px 10px 10px;
    z-index      : 2;
}

.modal .confirm-btn {
    background   : pink;
    width        : 170px;
    height       : 40px;
    color        : #fff;
    text-align   : center;
    line-height  : 40px;
    margin       : 0 auto;
    margin-top   : 20px;
    cursor       : pointer;
    border-radius: 4px;
}

.modal-cover {
    position  : fixed;
    top       : 0;
    left      : 0;
    background: rgba(0, 0, 0, 0.3);
    z-index   : 1;
    display   : none;
}

/* 当前抽奖的用户/状态 */
#current-uname {
    width     : 100%;
    text-align: center;
    /* border : 1px solid; */
}